HTML表格

本文详细介绍了HTML中的表格元素,包括基本结构如<table>、<tr>、<td>和<th>,以及表格的结构化元素如<thead>、<tbody>和<tfoot>。此外,还讨论了如何使用rowspan和colspan属性实现跨行和跨列,以及如何添加表格标题和使用<caption>标签。同时提醒注意表格的样式默认不显示边框,并建议避免过度嵌套表格以保持结构清晰。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表格是由行和列组成的结构化数据集合。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>

对于<tbody>,它总是包含在表格中,即使没有显式地被指定。

对于<tfoot>,即使它被放置于<thead><tbody>之间而非最后,它在显示时也会位于表格的最底部。

跨行与跨列

在使用表格时,经常会碰到需要跨行或跨列的情况。例如在制作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>

<caption>标签无论写在表格数据的前后,都会被视为表格的标题,并显示在表格的上方。

需要注意区分<caption>标题与<th>标题,它们代表的是不同的含义。

表格嵌套

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

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

通常来说,不建议对表格进行嵌套操作,使得表格的结构过于复杂。

实际上,表格中的每个单元格可以放入任何你想要的元素,而不仅仅是嵌套另一张表格。

欢迎大家搜索关注我的公众号“风纸”,或是直接扫描下方二维码关注👇,也可以在微信上查看本文
风纸

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值