HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并

他咔咔咔

已于 2024-07-17 23:01:30 修改

阅读量921

点赞数 26

分类专栏： HTML标签前端页面布局文章标签： html 前端

于 2024-07-12 00:07:26 首次发布

本文链接：https://blog.csdn.net/weixin_64294248/article/details/140363676

版权

HTML标签同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端页面布局

3 篇文章 0 订阅

订阅专栏

表格边框属性border-collapse

表格边框属性cellspacing和cellpadding

一、表格标签简介

HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作<table></table>。

每个表格分为表格标题（由 <thead> 标签定义），以及表格单元格（由 <tbody> 标签定义），表格标题和表格身体中均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题，其中标题行（<th>）会有默认加粗的效果。

此外，表格还可以包括<caption>（用于描述表格）、<tfoot>（用于页脚内容进行分组）等标签。

二、表格标签基本格式及示例

一个表格标签的基本格式如下：

<!-- 基本格式 -->
<table>
    <!-- 表格标题 -->
    <caption>表格描述</caption>
    <!-- 表头 -->
    <thead>
        <tr>
            <th>表头内容（列标题1）</th>
            <th>表头内容（列标题2）</th>
            <th>表头内容（列标题3）</th>
        </tr>
    </thead>
    <!-- 表格内容 -->
    <tbody>
        <tr>
            <td>单元格内容（第一行第一列）</td>
            <td>单元格内容（第一行第二列）</td>
            <td>单元格内容（第一行第三列）</td>
        </tr>
        <tr>
            <td>单元格内容（第二行第一列）</td>
            <td>单元格内容（第二行第二列）</td>
            <td>单元格内容（第二行第三列）</td>
        </tr>
        <tr>
            <td>单元格内容（第三行第一列）</td>
            <td>单元格内容（第三行第二列）</td>
            <td>单元格内容（第三行第三列）</td>
        </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
        <tr>
            <td>单元格内容..</td>
        </tr>
    </tfoot>
</table>

上述代码运行效果如下：

接着，以下图的表格为例，第一行（序号、姓名、班级、成绩）为表格标题，也就是表头<thead>标签包裹的内容，表头的<tr>标签中包括五个<th>标签，也就是五个表头标题。而下面表格内容部分由表身体<tbody>标签包裹，表内容共有四行，也就是有四个<tr>标签，表格包括五个属性，所以每一行应该有五个单元格，也就是有五个<td>标签。

写为代码应该如下：

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>101</td>
            <td>男</td>
            <td>90</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>101</td>
            <td>男</td>
            <td>85</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小丽</td>
            <td>102</td>
            <td>女</td>
            <td>70</td>
        </tr>
        <tr>
            <td>4</td>
            <td>小敏</td>
            <td>103</td>
            <td>女</td>
            <td>60</td>
        </tr>
    </tbody>
</table>

三、表格标签相关属性

在上述基本代码运行后，我们会在浏览器中看见下图的结果，此时没有对表格进行任何的修饰，所以我们不能看见边框，以及表格之间的间距。

表格边框border

border属性可以给表格设置边框，常写为形如以下的格式，其中1px表示边框的粗细，solid表示实线，#000表示边框的颜色，border属性还包括其他许多属性的值，此处不展开说明。

border: 1px solid #000;

我们选中table，也就是整个表格（一般不推荐，因为一个网页中可能有多个表格，此处只是为了方便演示），添加border属性，查看效果。

此时可以看见表格外部已经有了边框线，我们可以继续给<th>、<td>标签加上边框，整体代码如下：

table {
    border: 1px solid #000;
}

th {
    border: 1px solid red;
}

td {
    border: 1px solid blue;
}

运行效果如下图，可以看到表头标题的边框颜色是红色，也就是<th>标签选中的颜色，单元格的边框颜色是蓝色，也就是<td>标签选中的颜色，而外边框是黑色，也就是表格<table>选中的颜色。

此时的表格并不美观，通常情况下，我们只设置一个边框的颜色，如：

table {
    border: 1px solid #000;
}

th,
td {
    border: 1px solid #000;
}

效果如下：

这样也不美观，进一步地，我们需要将边框线合并，也就是只留下一条边框。

表格边框属性border-collapse

通常使用边框的collapse属性进行边框合并，如果没有如果没有设置边框合并，边框线条会重叠。

设置边框合并border-collapse属性，选中table之后进行设置（因为边框线一般都需要合并，所以此处可以选中全局的table标签），代码如下：

table {
    border-collapse: collapse;
}

设置后效果如下：

表格边框属性cellspacing和cellpadding

cellspacing用于设置表格中单元格与单元格之间的距离，cellpadding用于设置表格中内容与边框之间的间距，可以用于撑开表格的内容。

设置表格的cellspacing、cellpadding属性的代码示例如下：

<table cellspacing="10" cellpadding="10">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>101</td>
            <td>男</td>
            <td>90</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>101</td>
            <td>男</td>
            <td>85</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小丽</td>
            <td>102</td>
            <td>女</td>
            <td>70</td>
        </tr>
        <tr>
            <td>4</td>
            <td>小敏</td>
            <td>103</td>
            <td>女</td>
            <td>60</td>
        </tr>
    </tbody>
</table>

给前面的表格设置cellspacing属性为10，效果如下：

若设置cellspacing为0，效果如下，可以看到表格进行了合并，边框线变粗。

给前面的表格设置cellpadding属性为10，效果如下：

而cellpadding属性为0则无变化：

可以看到设置cellpadding属性为10撑开单元格内容，同时，也可以直接设置th或者td的宽高，CSS代码如下（HTML代码不变）：

th,
td {
    border: 1px solid #000;
    width: 100px;
    height: 20px;
}

效果如下：

此外，还可以设置表格中的单元格内容居中显示，只需要设置text-align属性即可。

表格内容居中显示text-align

居中显示设置th、td中的text-align属性为center，此外还可以设置为left或者right，即居左或居右。

text-align: center;

设置后效果如下：

四、表格的跨行与跨列显示

一般情况下，我们在使用表格工具时候可能会见到以下场景：

在这个场景下，n*n的单元格已经无法满足我们的布局需求，此时我们需要“合并”某些单元格，可能是跨行（将n个行合并）或者跨列（将m个列合并）

rowspan属性用于跨行合并，colspan属性用于跨列合并，一般将这两个属性写在某个<th>/<td>标签中，也就是单元格标签中。

以下图表格为例，我们可以看出这个表格是由四行、三个单元格组成的，其中头像这一个单元格跨了姓名、年龄、电话三列，需要进行跨列合并；居住地址后的一个单元格跨了上面的两个行，需要进行跨行合并。

跨列合并

头像需要占满三列，我们进行将colspan属性设置为3，代码如下：

<tbody>
    <tr>
        <td>姓名</td>
        <td></td>
        <td rowspan="3" style="text-align: center;">头像</td>
    </tr>
    <tr>
        <td>年龄</td>
        <td></td>
    </tr>
    <tr>
        <td>电话</td>
        <td></td>
    </tr>
</tbody>

跨行合并

居住地址的后面单元格是需要进行跨行两行合并的，我们进行将rowspan属性设置为2，代码如下：

<tbody>
    <tr>
        <td>姓名</td>
        <td></td>
        <td rowspan="3" style="text-align: center;">头像</td>
    </tr>
    <tr>
        <td>年龄</td>
        <td></td>
    </tr>
    <tr>
        <td>电话</td>
        <td></td>
    </tr>
    <tr>
        <td>居住地址</td>
        <td colspan="2"></td>
    </tr>
</tbody>

效果如下：

他咔咔咔

关注

26
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并

HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由标签定义），以及表格单元格（由标签定义），表格标题和表格身体中均有若干行（由标签定义），每行被分割为若干单元格（由标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
复制链接

扫一扫