html表格设置静态数据,构建静态页面 之 [ 表格 ]

表格

描述

以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容

表格元素

元素 - 表示定义表格中的标题

元素 - 表示定义表格中的表头	元素 - 表示定义表格中的单元格

元素 - 表示定义表格的页眉

元素 - 表示定义表格的主体元素 - 表示表格的页脚

表格元素元素属性

border属性

表示设置表格的边框

属性值为数字值

会同时设置表格和单元格

rowspan属性

表示设置单元格的跨行

属性值为数字值

colspan属性

表示设置单元格的跨列

属性值为数字值

表格元素整体示例代码

手机电脑手表平板

iphone XMacBook Pro 15寸卡西欧iPad Pro 12寸iphone SEMacBook Pro 13寸尼尚iPad Pro 10寸以上二选一

表格样式

caption-side属性

表示设置表格中的标题元素在表格中的显示位置

border属性

表示设置边框

border-width - 表示设置边框的宽度

border-style - 表示设置边框的样式

border-color - 表示设置边框的颜色

border属性也允许简写：顺序是 边框的宽度 边框的样式 边框的颜色

border-collapse属性

表示设置边框是分离还是合并

注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效

border-spacing属性

表示设置边框之间的距离

empty-cells属性

表示设置空白单元格的显示与隐藏

表格样式示例代码

表格的样式

caption {

/*

caption-side属性 - 表示设置表格中的标题元素在表格中的显示位置

* top - 表示设置表格标题出现在表格的顶部“默认值”

* bottom - 表示设置表格标题出现在表格的底部

*/

caption-side: top;

}

table, th, td {

/*

border属性 - 表示设置边框

* border-width - 表示设置边框的宽度

* border-style - 表示设置边框的样式

* border-color - 表示设置边框的颜色

border属性也允许简写：顺序是 边框的宽度 边框的样式 边框的颜色

*/

border: 1px solid black;

/*

border-collapse属性 - 表示设置边框是分离还是合并

* separate属性值 - 表示边框的分离“默认值”

* collapse属性值 - 表示边框的合并

* 注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效

*/

border-collapse: separate;

/* border-spacing属性 - 表示设置边框之间的距离 */

border-spacing: 10px;

/*

empty-cells属性 - 表示设置空白单元格的显示与隐藏

* show属性值 - 表示显示空白单元格“默认值”

* hide属性值 - 表示隐藏空白单元格

*/

empty-cells: hide;

}

手机电脑手表平板

iphone XMacBook Pro 15寸卡西欧iPad Pro 12寸iphone SEMacBook Pro 13寸尼尚iPad Pro 10寸以上二选一