使用CSS可以制作出十分精美的表格。
代码整理自w3school:http://www.w3school.com.cn
效果图:
代码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Language" content="zh-cn"><title>CSS 表格样式</title> <style type="text/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;} </style> <h3>(一)蓝色边框的表格</h3>
省份 | 面积 |
---|---|
黑龙江 | 47.2 |
辽宁 | 11.6 |
省份 | 面积 |
---|---|
黑龙江 | 47.2 |
辽宁 | 11.6 |
省份 | 面积 |
---|---|
黑龙江 | 47.2 |
辽宁 | 11.6 |
省份 | 省会 | 面积 | 人口 | GDP |
---|---|---|---|---|
黑龙江 | 哈尔滨 | 47.2 | 4900 | 16000 |
吉林 | 长春 | 11.6 | 2600 | 27000 |
辽宁 | 沈阳 | 12.6 | 4500 | 27000 |
河北 | 石家庄 | 29.1 | 5200 | 26000 |