使用CSS能够制作出十分精美的表格。
效果图:
代码:
/p>
"http://www.w3.org/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;}
(一)蓝色边框的表格
省份 | 面积 |
---|---|
黑龙江 | 47.2 |
辽宁 | 11.6 |
(二)单线条边框的表格
省份 | 面积 |
---|---|
黑龙江 | 47.2 |
辽宁 | 11.6 |
(三)表格宽度30%。高度50px,设置字体颜色和背景颜色
省份 | 面积 |
---|---|
黑龙江 | 47.2 |
辽宁 | 11.6 |
(四)一个美丽的表格
省份 | 省会 | 面积 | 人口 | GDP |
---|---|---|---|---|
黑龙江 | 哈尔滨 | 47.2 | 4900 | 16000 |
吉林 | 长春 | 11.6 | 2600 | 27000 |
辽宁 | 沈阳 | 12.6 | 4500 | 27000 |
河北 | 石家庄 | 29.1 | 5200 | 26000 |