本文介绍了一个使用CSS进行表格样式的具体实例。通过定义类名为'def'的<tr>元素及内部<th>和<td>元素的样式，实现了表格边框的统一风格。每个单元格都拥有灰色实线边框，并且对顶部和底部填充进行了设定。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>TABLE CSS</title>
<style type="text/css">
<!--
table {
border:1px solid #A9B3CD;
border-collapse:collapse;
}
tr.def {
padding-top: 2px;
padding-bottom: 2px;
}
tr.def td{
border: solid #A9B3CD; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
tr.def th{
border: solid #A9B3CD; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
--!>
</style>
</head>
<body>
<table width="600">
<tr class="def">
<th>A</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
</tr>
<tr class="def">
<td align="right">ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>TABLE CSS</title>
<style type="text/css">
<!--
table {
border:1px solid #A9B3CD;
border-collapse:collapse;
}
tr.def {
padding-top: 2px;
padding-bottom: 2px;
}
tr.def td{
border: solid #A9B3CD; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
tr.def th{
border: solid #A9B3CD; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
--!>
</style>
</head>
<body>
<table width="600">
<tr class="def">
<th>A</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
</tr>
<tr class="def">
<td align="right">ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
