0
点赞
收藏
分享

微信扫一扫

HTML表格

墨春 2022-04-13 阅读 75
html

表格是由行和列组成的结构化数据集合。HTML中的表格是一个极其常见且功能强大的元素,除了用来表示数据外,曾经也被广泛用于构建网页表格(现在已经被容器及CSS取代)。

HTML中的表格

在HTML中,每一个表格都需要包含在<table>元素中。在表格中,最基本元素的就是一个单元格<td>,它用于表示我们需要在表格中具体某个位置的数据。对于连续的多个单元格<td>,它们将被显示在同一行中。为了将表格中的单元格区分为多行,就需要使用到<tr>标签。<tr>标签表示的是表格中的一行,它的内容为该行中的所有单元格,即一个或多个<td>

<table>
  <tr>
    <td>名字</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>35</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>21</td>
  </tr>
</table>

上面的例子为一个列出了姓名和年龄的名单,但是它有个缺点是将表格的标题也表示为了一个普通的单元格。为了更好的区分标题与数据,我们可以使用<th>标签代替标题行中的<td>标签。

表格结构化

对于一个复杂的表格,我们可能需要引入一些其它的标签使其更具结构化。

<table>
  <thead>
    <tr>
      <th>名字</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>35</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>21</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总人数</th>
      <td>2</td>
    </tr>
  </tfoot>
</table>

跨行与跨列

在使用表格时,经常会碰到需要跨行或跨列的情况。例如在制作Excel表格时,需要进行合并单元格进行跨行或跨列的合并。

在HTML中,同样也提供了跨行或跨列的功能。为了实现这个目的,我们需要使用到rowspancolspan属性,它们分别代表跨行或跨列的数目。

<table>
  <tr>
    <th>名字</th>
    <th>年龄</th>
    <th>单位</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>35</td>
    <td rowspan="2">加利顿大学</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>21</td>
  </tr>
</table>

表格的其它特性

表格标题

我们在使用表格时,经常会碰到需要为表格增加标题的需求,用于表示对表格内容的描述。这种情况下,我们可以使用<caption>标签来表示表格的标题。在<table>中使用<caption>时,应该放置于<table>开始标签的后面。

<table>
  <caption>学生信息</caption>
  <tr>
    ...
  </tr>
</table>

表格嵌套

如同列表一样,表格也可以进行嵌套操作,只需要注意嵌套的表格结构完整即可。

<table>
  <tr>
    <td>
      <table>
        <!-- ... -->
      </table>
    </td>
  </tr>
</table>
举报

相关推荐

html表格

HTML - html 表格(二)

HTML--表格

HTML|表格标签

Html制作表格

0 条评论