首页 > 文章资讯 > 站长教程 > 建站知识 > html有语义标签-5.整齐表格（table标签）

html有语义标签-5.整齐表格（table标签）

时间：2023年10月20日

来源：网络

编辑：佚名

在html中我们用<table>标签表示表格，<tr>标签表示行，<td>标签表示列。在曾经表格时我们先书写行数，再在相应的行数里添加对于列数，并且标签中需要有内容才能显示。
如下图代码：

css初始化及html语义标签
运行以上代码时，我们发现效果是这样的，明显我们所理解的表格不同。其实表格我们是画好的了，只是没有显示出来而已，我们需要用css来控制就可显示出表格了，就像我们之前用div布局时，必须要css设置颜色才能显示出来。

css初始化及html语义标签
我们用css来控制表格的边为1px 的蓝色实线，会出现以下效果，看到下图我们发现这个表格是分开的一个个小方块。这时我们可以查看css手册，发现表格有个属性border-collapse，它的默认值是separate(边框独立)就是我们看到下图的那种效果，我们设置它的border-collapse属性值为collapse（相邻边合并）就可得到我们通常所需要的表格了，亦可以给它添加一个实际的像素。

css初始化及html语义标签
最终设置为我们通常理解的表格：

css初始化及html语义标签
如果我们要合并某项单元格要怎么操作呢？
以上图为例，我们需要把第一行合并为1列，则需把第一行的2,3,4列去掉，并且在第1列加上属性colspan="4"，其中的4代表跨越的列数。
<tr>
<td colspan="4">1</td>
</tr>
效果图如下：

css初始化及html语义标签
假如我们又需要把24、28两个格子合并该怎么办呢？
首先把28删掉，我们知道24跨到28加上本身是跨越了2行，所以我们在24列里加入属性rowspan="2"，其中的2就是跨越的行数。
<td rowspan="2">24</td>
效果图如下：

css初始化及html语义标签
最终代码如下：

css初始化及html语义标签

新闻资讯更多

猜你需要