Question

我正在尝试创建一个垂直表格，其中包含特定区域的标题，例如用户的地址。我想创建这样的东西：

        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>

如何在表格顶部添加标题？

Answer 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>

Answer 2

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>

Answer 3

<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>

Answer 4

只是重新排列<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>

Answer 5

<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>

可以制作一个带水平标题的垂直表格吗？

5 个答案: