Home > Article > Web Front-end > CSS: Table style (set the style of table border/text/background)_html/css_WEB-ITnose
CSS: Table style (set the style of table border/text/background)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:552888browse
Using CSS, you can create very beautiful tables.
Code compiled from w3school: http://www.w3school.com.cn
Rendering:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>CSS 表格样式</title><head> <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></head><body> <h3>（一）蓝色边框的表格</h3> <table cellpadding="10px"> <tr> <th>省份</th> <th>面积</th> </tr> <tr> <td>黑龙江</td> <td>47.2</td> </tr> <tr> <td>辽宁</td> <td>11.6</td> </tr> </table> <h3>（二）单线条边框的表格</h3> <table cellpadding="10px" class="singlineBorder"> <tr> <th>省份</th> <th>面积</th> </tr> <tr> <td>黑龙江</td> <td>47.2</td> </tr> <tr> <td>辽宁</td> <td>11.6</td> </tr> </table> <h3>（三）表格宽度30%，高度50px，设置字体颜色和背景颜色</h3> <table class="widthPercent30"> <tr> <th class="height50px">省份</th> <th class="height50px">面积</th> </tr> <tr> <td>黑龙江</td> <td class="greenBg">47.2</td> </tr> <tr> <td>辽宁</td> <td class="greenBg">11.6</td> </tr> </table> <h3>（四）一个漂亮的表格</h3> <table cellpadding="10px" class="niceTable"> <caption>省份基本信息</caption> <tr> <th>省份</th> <th>省会</th> <th>面积</th> <th>人口</th> <th>GDP</th> </tr> <tr> <td>黑龙江</td> <td>哈尔滨</td> <td>47.2</td> <td>4900</td> <td>16000</td> </tr> <tr class="light"> <td>吉林</td> <td>长春</td> <td>11.6</td> <td>2600</td> <td>27000</td> </tr> <tr> <td>辽宁</td> <td>沈阳</td> <td>12.6</td> <td>4500</td> <td>27000</td> </tr> <tr class="light"> <td>河北</td> <td>石家庄</td> <td>29.1</td> <td>5200</td> <td>26000</td> </tr> </table></body></html> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 photo wall_html/css_WEB-ITnoseNext article：css3 photo wall_html/css_WEB-ITnose