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寸以上二选一

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

excel几个表合成一张_Excel中怎样把多张表格中的数据合并到一张表格中
由于各种需要,我们往往会需要把多张表格中的数据内容合并成一张表格,那么应该怎么操作呢?我们以下为例: 下图中Sheet1是2011年的数据,sheet2是2012年的数据,最后要把它们合并在一张新表上 ...
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效
来自文章 http://www.jb51.net/css/153601.html 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对 ...
java 静态数据_Java 静态数据初始化的示例代码
无论创建多少个对象,静态数据都只占用一份存储区域.static关键字不能应用于局部变量,因此它只能作用于域.如果一个域是静态的基本类型域,且也没有对它进行初始化,那么它就会获得基本类型的标准初始值:如 ...
java怎么让表格的字段相乘,excel表格怎么让数据相乘-如何在excel表格中设置乘法公式...
EXCEL里的表格使两列自动相乘怎么设置? 在你需要得出结果的那个单元格,输入"＝",再点击你需要相乘的第一个单元格,再输入"*",再点击你需要相乘的第二个单元 ...
css表格设置行列的颜色,CSS：为表格中的选定行设置颜色
我需要将以下功能添加到我的表中:当用户单击某行(选择它)时,该行用颜色#FFCF8B标记(与hover相同).我试过#newspaper-b tbody tr.selected td,但它不起作用.C ...
怎么将计算机恢复到前一天的状况,excel表格恢复前一天数据-我想将excel表格中的两组数据做对比（数据是每天变......
我想将excel表格中的两组数据做对比(数据是每天变... Office2003以上的版本"灾难恢复"已经做得很,每次开一个Office文档时,都会个对应的临时文件. 这个文件会实 ...
把一个表格里的数据添加到另一个表格并且去重
今天做一个以前没做过的功能,本来以为挺麻烦的,试了一下觉得也不难,记录一下我的成果,有不合适的可留言指正 function(row){ this.tableList.push(row)//往目标表格里 ...
微服务架构下静态数据通用缓存机制
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源 | my.oschina.net/u/3971241/bl ...
微服务架构下的静态数据通用缓存机制！
什么是静态数据为什么需要缓存通用缓存机制总结后记在分布式系统中,特别是最近很火的微服务架构下,有没有或者能不能总结出一个业务静态数据的通用缓存处理机制或方案,这篇文章将结合一些实际的研发经验 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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