零基础Web前端开发(5)

HTML表格概述

表格的基本结构

表格的基本标签有标签

(表格),标签(表格行),标签和

标签(表格单元格)。

标签必须在标签与
标签之间才有效。

除了基本标签外还有表格标题

标签、表头
标签。

浏览器会将

标签中的内容在表格正上方居中显示。一个表格只能有一个标题标签。

浏览器会以粗体和居中的样式显示

元素中的内容。

零基础Web前端开发(5)_第1张图片
代码示例与效果显示

表格语义化:

为了更深一层对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分:表头、表身、表脚。有了这三个标签,表格HTML代码语义更加良好,结构更加清晰。

语法:

表格标题

表头单元格1 表头单元格2 表头单元格3
标准单元格1 标准单元格2 标砖单元格3
标准单元格1 标准单元格2 标准单元格3
标准单元格1 标准单元格2 标准单元格3

、、这三个标签很重要,虽然加了跟没加显示效果一样,但它从语义上区分了表头,表身和表脚,使结构更加清晰。


合并行rowspan属性

rowspan是的一个属性。

零基础Web前端开发(5)_第2张图片
测试代码和显示效果
零基础Web前端开发(5)_第3张图片
不加rowspan属性显示效果展示

合并列colspan属性

  colspan是的一个属性。

,用法跟rowspan属性差不多

零基础Web前端开发(5)_第4张图片
代码测试与显示效果
零基础Web前端开发(5)_第5张图片
不加colspn属性效果展示

仔细看,跨两列不加colspan属性的话,显示效果与加了的差别。

【小技巧】:表格合并行属性和表格合并列属性在内容不能完全放于一个单元格内时非常有用。通过跨越许多单元格,不需要改变表格就能将更多的文字放入单元格。

你可能感兴趣的:(零基础Web前端开发(5))