错误博客( cuowu.com )发布于 2019-06-05 10:54:18

CSS表格

CSS表格属性可以帮助您极大地改善表格的外观。CSS表格使用CSS可以使HTML表格更美观。

CSS表格几个常用属性:

1)普通边框:border

例如:

table,th,td {

border:1px solid red;

}

注:以上表格具有双线条边框,由于table、th、td元素都有独立边框。

下面属性可以显示为单线条边框。

单一边框:border-collapse

例如:

table {

border-collapse:collapse;

}

table,th,td {

border:1px solid red;

}

2)高度和宽度

通过width和height定义,单位百分比或px。可以是table tr td th

一般来说,table控制宽度,tr控制高度。

例如:

table{

width:100px;

height:100%;

}

tr {

height:100px;

}

表格宽100像素,高100%,行高100像素

3)文本对齐

text-align和vertical-align分别为水平对齐,垂直对齐。

text-align属性left、right、center。

vertical-align属性top、center、bottom。

例如:

td,th {

text-align:left;

vertical-align:top;

}

单元格水平左对齐,垂直上对齐

4)表格内边框

表格中的内容和边框之间的距离,td和th这两个表示单元格的标签,设置padding(盒模型会讲的内边距)。

例如:

td,th{

padding:10px;

}

5)表格颜色

table、td、th都可以设置边框、文本和背景颜色。

例如:

table,td,th{

border:1px solid red;

}

th,td {

color:pink;

}

th,td{

background-color:green;

}


2020年错误博客亲测项目系列

错误教程( cuowu.com )专注网推培训、SEO培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码