表格&表格布局&长表格

表格:
在HTML中使用使用table标签来创建一个表格

格式:

给表格设置样式:
table{

/*设置表格的宽度*/

width: 300px;

/*居中*/

margin: 0 auto;

/*边框*/

            /*border:1px solid black;*/

            /*table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离*/

            /*border-spacing: 10px;*/

            /*

            border-collapse可以用来设置表格的边框合并

            如果设置了边框合并,则border-spacing自动失效

            */

            border-collapse: collapse;

            /*设置背景样式*/

/*background-color: #bfa;*/

}

/*设置边框*/

th, td{

border: 1px solid black;

}

/*设置隔行变色*/

tbody > tr:nth-child(even){

background-color: #bfa;

}

/*鼠标移入到tr以后,改变颜色*/

tr:hover{

background-color: yellow;

}

长表格:

有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部

在HTML中为我们提供了三个标签:

thead 表头

tbody 表格主体

tfoot 表格底部

这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中

thead中的内容,永远会显示在表格的头部

tfoot中的内容,永远都会显示表格的底部

tbody中的内容,永远都会显示表格的中间

如果表格中没有写tbody,浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素

通过table > tr 无法选中行 需要通过tbody > tr

表格的布局:

以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了

表格的列数由td最多的那行决定

表格是可以嵌套,可以在td中在放置一个表格

你可能感兴趣的:(表格&表格布局&长表格)

A1 A2 A3 A4
B1 B2 B3 B4
C1 C2 C3
D1 D2 D3