Use CSS to write a table, do not doubt, mainly on the HTML structure of the CSS style redefinition, we can see the effect map, personal feeling is also good, interested friends can refer to the
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content_Type"
content= "text/html";charset=utf-8>
<title> Personal Information registration </title>
<style>
Caption{height:50px;font-size:30px;font-weight:bold;}
table{border:1px solid Gray;
Border-collapse:collapse;
margin:100px Auto;
th{height:60px;width:130px;
border:1px solid Gray;
background-color: #D6D3D6;}
. topleft{width:120px background-color: #C6C7C6;}
td{height:60px;width:130px;
border:1px solid Gray;
Background-color: #C6C7C6;
Text-align:center;}
. t1{width:120px background-color: #BDBABD;}
#out1 {border-top:60px solid transparent;
border-left:60px solid #BDBABD;
height:0px;width:0px;
position:relative;
Float:left;}
#out2 {border-top:30px solid #D6D3D6;
border-left:120px solid Transparent;
height:0px;width:0px;
}
#in1 {position:absolute; width:50px; top:-60px; left:10px;}
#in2 {position:absolute; width:50px; top:-30px; left:-10px;}
#in3 {position:absolute; width:50px; top:-20px; left:-60px;}
body{background-color: #123456;}
</style>
</head>
<body>
<table>
<caption> Personal Information Registration </caption>
<tr>
<th class= "TopLeft" >
<div id= "OUT1" >
<div id= "in1" > Category </div>
<div id= "in2" > Content </div>
<div id= "in3" > Name </div>
</div>
<div id= "Out2" ></div>
</th>
<th> Grade </th>
<th> Gender </th>
<th> Professional </th>
<th> Specialty </th>
</tr>
<tr>
<td class= "T1" >
<input type= "text" size= "value=" Please enter your name >
</td>
<td>
<select>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select>
</td>
<td>
<input type= "Radio" name= "Sex" > Male
<input type= "Radio" name= "Sex" > Female
</td>
<td>
<select>
<option> Jiko </option>
<option> Brass </option>
<option> Technology </option>
</select>
</td>
<td>
<textarea rows=2 cols=10>
</textarea>
</td>
</tr>
<tr>
<td class= "T1" >
<input type= "text" size= "value=" Please enter your name >
</td>
<td>
<select>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select>
</td>
<td>
<input type= "Radio" name= "Sex" > Male
<input type= "Radio" name= "Sex" > Female
</td>
<td>
<select>
<option> Jiko </option>
<option> Brass </option>
<option> Technology </option>
</select>
</td>
<td>
<textarea rows=2 cols=10>
</textarea>
</td>
</tr>
<tr>
<td class= "T1" >
<input type= "text" size= "value=" Please enter your name >
</td>
<td>
<select>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select>
</td>
<td>
<input type= "Radio" name= "Sex" > Male
<input type= "Radio" name= "Sex" > Female
</td>
<td>
<select>
<option> Jiko </option>
<option> Brass </option>
<option> Technology </option>
</select>
</td>
<td>
<textarea rows=2 cols=10>
</textarea>
</td>
</tr>
<tr>
<td class= "T1" >
<input type= "text" size= "value=" Please enter your name >
</td>
<td>
<select>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select>
</td>
<td>
<input type= "Radio" name= "Sex" > Male
<input type= "Radio" name= "Sex" > Female
</td>
<td>
<select>
<option> Jiko </option>
<option> Brass </option>
<option> Technology </option>
</select>
</td>
<td>
<textarea rows=2 cols=10>
</textarea>
</td>
</tr>
<tr>
<td class= "T1" >
<input type= "text" size= "value=" Please enter your name >
</td>
<td>
<select>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select>
</td>
<td>
<input type= "Radio" name= "Sex" > Male
<input type= "Radio" name= "Sex" > Female
</td>
<td>
<select>
<option> Jiko </option>
<option> Brass </option>
<option> Technology </option>
</select>
</td>
<td>
<textarea rows=2 cols=10>
</textarea>
</td>
</tr>
<tr>
<td class= "T1" >
<input type= "text" size= "value=" Please enter your name >
</td>
<td>
<select>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select>
</td>
<td>
<input type= "Radio" name= "Sex" > Male
<input type= "Radio" name= "Sex" > Female
</td>
<td>
<select>
<option> Jiko </option>
<option> Brass </option>
<option> Technology </option>
</select>
</td>
<td>
<textarea rows=2 cols=10>
</textarea>
</td>
</tr>
</table>
</body>
</html>