0

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

        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>

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

4

5 回答 5

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>
于 2013-08-21T19:16:35.500 回答
0

演示在这里，代码在这里：

<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>
于 2013-08-21T19:18:49.157 回答
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>
于 2013-08-21T19:19:12.480 回答
0

这只是重新排列<td>'s 和<th>'s 的情况

表头（或“标题”）只是一个额外的标签。

选项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>
于 2013-08-21T19:19:19.137 回答
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>

于 2013-08-21T19:20:42.987 回答