我正在尝试创建一个垂直表格,其中包含特定区域的标题,例如用户的地址。我想创建这样的东西:
General Information
Name John Smith
Date of Birth April 1, 1984
Gender Male
Account Information
Correspondence Address
Address 1 1234 MLK Blvd
Address 2 502
City Kansas City
State Missouri
Country USA
Zip Code 55748
Residential Address
Address 1 143 St Michael's Way
Address 2
City Independence
State Missouri
Country USA
Zip Code 55760
我目前在没有标题的表中使用此代码:
<table>
<tr id='Name'>
<th>Name</th>
</tr>
<tr id='PersonEmail'>
<th>Email</th>
</tr>
<tr id='Gender'>
<th>Gender</th>
<td></td>
</tr>
<tr id='Date_of_Birth'>
<th>Date of Birth</th>
<td></td>
</tr>
</table>
如何在表格顶部添加标题?
答案 0 :(得分:1)
将colspan作为所需的值来占据标题
的位置<table>
<tr>
<td colspan='2'>General Information</td>
</tr>
<tr >
<td >Name </td>
<td > John Smith </td>
</tr>
<tr>
<td >Date of Birth</td>
<td > April 1, 1984</td>
</tr>
</table>
答案 1 :(得分:0)
demo here,代码在这里:
<table border="1">
<tr>
<th colspan="2">Header</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<th colspan="2">Header2</th>
</tr>
</table>
答案 2 :(得分:0)
<table>
<tr><td colspan="2">Title 1</td></tr>
<tr id='Name'>
<th>Name</th>
</tr>
<tr><td colspan="2">Title 2</td></tr>
<tr id='PersonEmail'>
<th>Email</th>
</tr>
...
</table>
答案 3 :(得分:0)
只是重新排列<td>
和<th>
的
表格标题(或“标题”)只是一个额外的标记。
选项1 :(传统)
<table>
<caption>General Information</caption>
<tr>
<th>Name</th>
<td>John Smith</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>April 1, 1984</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
</table>
<table>
<caption>Account Information</caption>
</table>
<table>
<caption>Correspondence Address</caption>
<tr>
<th>Address 1</th>
<td>1234 MLK Blvd</td>
</tr>
<tr>
<th>Address 2</th>
<td>502</td>
</tr>
<tr>
<th>City</th>
<td>Kansas City</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55748</td>
</tr>
</table>
<table>
<caption>Residential Address</caption>
<tr>
<th>Address 1</th>
<td>143 St Michael's Way</td>
</tr>
<tr>
<th>Address 2</th>
<td></td>
</tr>
<tr>
<th>City</th>
<td>Independence</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55760</td>
</tr>
</table>
选项2 :(使用附加tr作为子标题)
<table>
<tr>
<th colspan="2" class="caption">General information</th>
</tr>
<tr>
<th>Name</th>
<td>John Smith</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>April 1, 1984</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
<tr>
<th colspan="2" class="caption">Account Information</th>
</tr>
<tr>
<!-- Account Info -->
</tr>
<tr>
<th colspan="2" class="caption">Correspondence Address</th>
</tr>
<tr>
<th>Address 1</th>
<td>1234 MLK Blvd</td>
</tr>
<tr>
<th>Address 2</th>
<td>502</td>
</tr>
<tr>
<th>City</th>
<td>Kansas City</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55748</td>
</tr>
<tr>
<th colspan="2" class="caption">Residential Address</th>
</tr>
<tr>
<th>Address 1</th>
<td>143 St Michael's Way</td>
</tr>
<tr>
<th>Address 2</th>
<td></td>
</tr>
<tr>
<th>City</th>
<td>Independence</td>
</tr>
<tr>
<th>State</th>
<td>Missouri</td>
</tr>
<tr>
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>Zip Code</th>
<td>55760</td>
</tr>
</table>
答案 4 :(得分:0)
<table>
<tr>
<td></td>
<td colspan="2">General Information</td>
</tr>
<tr id='Name'>
<th>Name</th>
<td></td>
</tr>
<tr id='PersonEmail'>
<th>Email</th>
<td></td>
</tr>
<tr id='Gender'>
<th>Gender</th>
<td></td>
<td></td>
</tr>
<tr id='Date_of_Birth'>
<th>Date of Birth</th>
<td></td>
</tr>