html+css画表格,[八]HTML+CSS基础（表格）

*** 一，创建一个表格:***使用table标签

tr表示表格中的一行。

tr中可以编写一个或多个th或td。

th表示表头。

td表示表格中的一个单元格。

Document

ID	书名	作者
001	《解忧杂货铺》	东野圭吾
002	《时生》	东野圭吾
003	《祈祷落幕时》	东野圭吾

table.png

二，合并单元格：合并单元格指将两个或两个以上的单元格合并为一个单元格。 合并单元格可以通过在th或td中设置属性来完成。

横向合并– colspan

纵向合并– rowspan

Document

ID	书名	作者
001	《解忧杂货铺》	东野圭吾
002	《时生》
003	《祈祷落幕时》

横纵向合并.png

三，表格的样式： 之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。

text-align ：设置文本的水平对齐。

vertical-align ：设置文本的垂直对齐。

可选值：top、baseline、middle、bottom

border-spacing ：边框间距

border-collapse ：合并边框 ，此属性设置了，border-spacing将失效

collapse ：合并边框

separate ：不合并边框

Document

table{

border-collapse:collapse;

}

ID	书名	作者
001	《解忧杂货铺》	东野圭吾
002	《时生》
003	《祈祷落幕时》

border-collapse.png

四，表格的实例：

Document

*{

margin: 20px auto;

}

table{

border-collapse:collapse;

}

tr:nth-child(even){

background-color: #bebebe;

}

ID	书名	作者
001	《解忧杂货铺》	东野圭吾
002	《时生》	东野圭吾
003	《祈祷落幕时》	东野圭吾
001	《解忧杂货铺》	东野圭吾
002	《时生》	东野圭吾
003	《祈祷落幕时》	东野圭吾

隔行变色.png

Document

*{

margin: 20px auto;

}

table{

border-collapse:collapse;

}

tr:nth-child(even){

background-color: #bebebe;

}

tr:hover{

background-color: yellowgreen;

}

ID	书名	作者
001	《解忧杂货铺》	东野圭吾
002	《时生》	东野圭吾
003	《祈祷落幕时》	东野圭吾
001	《解忧杂货铺》	东野圭吾
002	《时生》	东野圭吾
003	《祈祷落幕时》	东野圭吾

移入变色.png

五，长表格：

caption表示表格的标题。

thead表示表格的头部。 其中的内容永远显示在表格上面

tbody表示表格的主体。 其中的内容永远显示在表格中间

tfoot表示表格的底部。其中的内容永远显示在表格底部

即使没有写tbody，浏览器也会默认添加的，所以使用table > tr的方法是不可以的,tr其实是tbody的儿子

Document

*{

margin: 20px auto;

}

table{

border-collapse:collapse;

}

tr:nth-child(even){

background-color: #bebebe;

}

tr:hover{

background-color: yellowgreen;

}

ID书名作者

合计001《解忧杂货铺》东野圭吾002《时生》东野圭吾003《祈祷落幕时》东野圭吾004《解忧杂货铺》东野圭吾005《时生》东野圭吾006《祈祷落幕时》东野圭吾007《梦幻花》东野圭吾008《白夜行》东野圭吾009《恶意》东野圭吾