CSS样式-表格和轮廓

浏览数：32 / 时间：2015年06月09日

CSS表格属性可以帮助您极大地改善表格的外观。

1）border

border属性设置表格边框。

table, th, td
  {
  border: 1px solid blue;
  }

2）border-collapse

border-collapse属性设置是否将表格边框折叠为单线条边框。

table
  {
  border-collapse:collapse;
  }

table,th, td
  {
  border: 1px solid black;
  }

3）width,height

width,height属性定义表格的宽度和高度。属性值可以是百分比或者像素值。

<html>
<head>
<style type="text/css">
table,td,th
  {
  border:1px solid black;
  }

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>

4）text-align,vertical-align

text-align属性设置水平对齐方式。属性值有：left,center,right.

vertical-align属性设置垂直对齐方式。属性值有：top,center,bottom.

<html>
<head>
<style type="text/css">
table, td, th
  {
  border:1px solid black;
  }

td
  {
  height:50px;
  vertical-align:center;
  }
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>

5）padding

padding属性设置表格内边距。属性值为像素值。

6）color,background-color

color属性设置表格文本的颜色。

background-color属性设置表格背景色。

<html>
<head>
<style type="text/css">
table, td, th
  {
  border:1px solid green;
  }

th
  {
  background-color:green;
  color:white;
  }
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>

下例是一个漂亮的表格实例：

<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#customers th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#customers tr.alt td 
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>

轮廓outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可用的属性值有outline,outline-color,outline-style,outline-width.

outline-color属性值有：color-name,hex-number,RGB-number,invert,inherit.

outline-style属性值有：none,dotted,dashed,solid,double,groove,ridge,inset,outset,

　　inherit.

outline-width属性值有：thin,medium,thick,length,inherit.

outline用来在一个声明中设置所有的轮廓属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>

<body>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
</body>
</html>