HTML5语言—— table表格标签结构的详解 前段大G > 首页 > HTML5语言合集 >
(table,tr,td)的详细介绍
属性:
border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度
在网页中创建表格,就需要使用到表格相对应的标签。创建表格的基本语法格式如下:
1.table用于定义一个表格。
2.tr 用于定义表格中的一行,必须嵌套在 table /table标签中,在 table /table中包含几对 tr /tr,就有几行表格。
3.td /td:用于定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。
4. th:用于定义表格第一行的表格标题,嵌套标签当中,第一行有多少个th /th就有多少个表头标题 如下:
<table>
<tr>
<th>标题标题内容
<th>
</tr>
</table>
注意:
<tr></tr>中只能嵌套<td></td>
<td></td><!-- 标签,他就像一个容器,可以容纳所有的元素 -->
表头标签(th)
表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:
<thead></thead>
<!-- :用于定义表格的头部。 -->
必须位于<table></table>
<!-- 标签中,一般包含网页的logo和导航等头部信息。 -->
<tbody></tbody>
<!-- :用于定义表格的主体。 -->
位于<table></table>
<!-- 标签中,一般包含网页中除头部和底部之外的其他内容。 -->
表格线重叠方法
border-collapse:collapse;
把这句代码CSS代码放在table的样式表中
合并单元格
合并单元格的方法:
将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。
公式: 删除的个数 = 合并的个数 - 1
跨行合并:rowspan
跨列合并:colspan
这篇HTML5语言—— table表格标签结构的详解,文章就结束了,有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作,谢谢观看,祝您生活愉快。
2023-12-04 14:37
文章点击量:
作者:【前端大G】
文章标签:
html,教程,表格,结构,的,详解,table,属性,bo