HTML表格

Zhuang

已于 2022-05-07 22:15:03 修改

阅读量368

点赞数

文章标签： html css

于 2022-05-07 22:13:59 首次发布

本文链接：https://blog.youkuaiyun.com/toufachangdehen/article/details/124598502

版权

这篇博客详细介绍了HTML中表格的使用，包括基本标签如<table>, <tr>, <td>，以及属性如border, width, height。还讲解了表格的标题<caption>、表头单元格<th>，以及结构标签<thead>, <tbody>, <tfoot>的用法。此外，还阐述了如何通过rowspan和colspan属性进行单元格的合并，以实现更复杂的表格布局。

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

HTML学习笔记

一，表格标签

1.表格的基本标签

场景：在网页中以行＋列的单元格的方式整齐展示和数据，如：学生成绩单
基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

2.标签的基本属性

场景：展示效果
相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：实际开发对于样式效果推荐使用css设置

3.表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题
其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示。

4.表格的结构标签（了解）

thead，tbody，tfoot。

<body>
  <table border="1">
    <caption><strong>学生成绩单</strong></caption>
      <thead>
        <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
      </tr>
   </thead>
      <tbody>
        <tr>
        <td>王一</td>
        <td>100</td>
        <td>很好</td>
      </tr>
      <tr>
        <td>王二</td>
        <td>99</td>
        <td>好</td>
      </tr>
    </tbody>
      <tfoot>
        <tr>
        <td>总结</td>
        <td>good</td>
        <td>very good</td>
      </tr>
    </tfoot>
  </table>
</body>

5.合并单元格

步骤：

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁

上下合并，只保留最上的，删除其他的
左右合并，只保留最左的，删除其他的

3.给保留的单元格设置：跨行合并或者跨列合并

属性名	属性值	说明
rowspan	合并单元格数目	跨行合并，将多行单元格垂直合并
colspan	合并单元格数目	跨列合并，将多列单元格水平合并

      <tbody>
        <tr>
        <td>王一</td>
        <td rowspan="2">100</td>
        <td>很好</td>
      </tr>
      <tr>
        <td>王二</td>
        <td>好</td>
      </tr>
    </tbody>