用CSS实现网页表格修饰

曾经为添加简单的表格线，困难重重，原来用CSS实现这么简单，现介绍如下(复制到html中即可查看）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

body {

font: 0.8em 宋体;

}

table.grid{ /* 折叠所有表格边框--使单元格共享边框*/

border-collapse:collapse;

}

table.grid td,th { /* 给单元格设置边框线 */

border: 1px solid #99CCCC;

text-align:left;

padding:4px 4px;

}

table.grid th[scope="col"] { /*给列表头文字加粗，加背景色 */

font:bold;

background-color:#00ddcc;

}

table.grid caption {

font-size:1.2em;

margin-bottom: .5em;

}

</style>

</head>

</caption>

<tr>

<th scope="col">Stylin'</th>

<th scope="col">Codin'</th>

<th scope="col">Stylin'</th>

<th scope="col">Codin'</th>

</tr>

<tr>

<th scope="row">Languages</th>

<td>XHTML & CSS</td>

<td>XHTML & CSS</td>

</tr>

<tr>

<th scope="row">Focus</th>

<td>Interface design</td>

<td>Interface design</td>

</tr>

<tr>

<th scope="row">Languages</th>

<td>XHTML & CSS</td>

<td>XHTML & CSS</td>

</tr>

<tr>

<th scope="row">Focus</th>

<td>Interface design</td>

<td>Interface design</td>

</tr>

</table>

</body>

</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。