>  기사  >  웹 프론트엔드  >  CSS:表格样式(设置表格边框/文字/背景的样式)_html/css_WEB-ITnose

CSS:表格样式(设置表格边框/文字/背景的样式)_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:51:552888검색

使用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

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

省份 面积
黑龙江 47.2
辽宁 11.6

(四)一个漂亮的表格

省份基本信息
省份 省会 面积 人口 GDP
黑龙江 哈尔滨 47.2 4900 16000
吉林 长春 11.6 2600 27000
辽宁 沈阳 12.6 4500 27000
河北 石家庄 29.1 5200 26000


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.