前端学习笔记一一HTML表格标签（table）

最新推荐文章于 2025-10-17 22:03:26 发布

原创

最新推荐文章于 2025-10-17 22:03:26 发布 · 2.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #前端 #大前端

本文介绍了HTML表格的基础构成和各种属性，包括表格标题、宽度、高度、对齐方式、边框、内框间距、背景颜色及图像，以及表首、表主体、表尾标记的使用。同时讲解了行属性、单元格大小、水平和垂直跨度的设定，是前端开发者学习HTML表格的参考教程。

前言

表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但是在实际制作过程中，表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。

1.表格的基本构成

表格由行、列、和单元格3部分组成，一般通过3个标记来创建，分别是表格标记<table>、行标记<tr>、和单元格标记<td>。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。

创建表格的四个元素：

table、tr、th、td

<tabel>...</table>:整个表格以<table>标记开始、</table>标记结束。

<tr>...</tr>：表格的一行，那么以为着有几对<tr></td>，表格就有几行。

<td>...</td>:表格的一个单元格，一行中包含几对<td></td>,说明一行中就有几列。

<th></th>:表格的头部的一个单元格，表格表头。

表格中列的个数，取决于一行中数据单元格的个数

<table>
    <tr>
        <th>动物名称</th>
        <th>物种</th>
        <th>生活习性</th>
        <th>食性</th>
    </tr>
    <tr>
        <td>老虎</td>
        <td>猫科动物</td>
        <td>单独活动</td>
        <td>肉食</td>
    </tr>
    <tr>
        <td>狮子</td>
        <td>猫科动物</td>
        <td>集群</td>
        <t