表格标签——HTML5学习笔记（5）

原创已于 2023-01-16 14:41:16 修改 · 569 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #学习 #前端

于 2022-10-27 22:30:26 首次发布

HTML5学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文围绕HTML表格展开，介绍了表格的主要作用是展示数据，阐述了表格基本语法，其单元格可放多种元素；说明了表头单元格文本居中加粗，提及表格属性部分可在CSS设置；还讲解了表格结构标签，可分头部和主体，最后介绍了合并单元格的方法与步骤。

6.1表格的主要作用

展示数据

6.2表格的基本语法

<table>
  <tr> //定义行
    <td>第一行第一列单元格内的文字</td> //定义列
    <td>第一行第二列单元格内的文字</td>
  </tr>
  <tr>
    <td>第二行第一列单元格内的文字</td>
    <td>第二行第二列单元格内的文字</td>
  </tr>
</table>

特点：

单元格内可以放文字、图片、链接等任何元素。

6.3表头单元格标签

<table>
  <tr> //定义行
    <th>表头1：姓名</th> //定义表头
    <th>表头2：性别</th>
  </tr>
  <tr>
    <td>小月</td>
    <td>女</td>
  </tr>
</table>

特点：

表头内的文本居中且加粗。

6.4表格的属性

位置：align="center"
边框：border="1"
单元格与内部文字距离：cellpadding
单元格与单元格间距：cellspacing

更多在CSS里设置，此处略。

6.5表格结构标签

为了更好地表示语义，可以将表格分成表格头部和表格主体。
表格头部区域：<thead> 内部必须有<tr>
表格主体区域：<tbody>
例：

<table> //头部区域
  <thead>
      <tr> //定义行
        <th>表头1：姓名</th> //定义表头
        <th>表头2：性别</th>
      </tr>
  </thead>
  <tbody> //主体区域
      <tr>
        <td>小月</td>
        <td>女</td>
      </tr>
  </tbody>
    </table>

6.6合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格：
- 跨行：要跨行的单元格中最上侧单元格写合并代码。
- 跨列：要跨行的单元格中最左侧单元格写合并代码。
步骤：
- 确定跨行/列。
- 找到目标单元格，写合并代码。如<td colspan="2"></td>
- 删除多余的单元格。如一个两行三列的表格，将第一行的第二第三列合并后，需要将多出来的第一行的第三列单元格删除。