html设置表格字体样式表 CSS：表格样式（设置表格边框/文字/背景的样式）

使用CSS可以制作出十分精美的表格。

效果图：

代码：

/p>

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS 表格样式

body {background-color:#e8e8e8}

/*text-align 属性设置水平对齐方式，vertical-align 属性设置垂直对齐方式*/

table,th,td {border:1px solid blue;text-align:center}

table.singlineBorder {border-collapse:collapse;} /*单线条边框的表格*/

table.widthPercent30 {width:30%}

th.height50px {height:50px}

td.greenBg {color:#00aa00;background-color:#ccc}

/*一个精美的表格*/

table.niceTable

{

width:30%;

border-collapse:collapse;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

}

table.niceTable td,table.niceTable th

{

padding:3px 7px 2px 7px;

border:1px solid #98bf21;

}

table.niceTable th

{

color:white;

background-color:#A7C942;

}

table.niceTable tr.light td {background-color:#EAF2D3;}

(一)蓝色边框的表格

(二)单线条边框的表格

(三)表格宽度30%，高度50px，设置字体颜色和背景颜色

(四)一个漂亮的表格