css表格样式的布局篇

进修了div css构造后，确凿css对表格样式的设置就变得简单了。一样平常对table配置class或id来对其设置装备摆设CSS花色。

表格CSS花式配置实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格CSS设置装备摆设实例 CSS5</title>
<style>
.tablecss{text-align:center; border:1px solid #CCC;border-bottom:0;border-left:0}
.tablecss th{color:#00F; line-height:30px;border-bottom:1px solid #CCC;border-left:1px solid #CCC}
.tablecss td{font-size:14px;line-height:30px;border-bottom:1px solid #CCC;border-left:1px solid #CCC}
</style>
</head>
<body>
<table width="300" class="tablecss" border="0" cellspacing="0">
<tr>
<th width="63">序列</th>
<th width="155">打造品名称</th>
<th width="75">价格</th>
</tr>
<tr>
<td>1</td>
<td>XX书本</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>XX文具盒</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>XX书包</td>
<td>45</td>
</tr>
</table>

</body> </html>

以上对table设置装备摆设了class引入CSS款式，同时CSS设置装备摆设表格th和td格局。

css table构造实例截图

css 表格样式实例截图 css构造表格花样实例截图

真实学习了css div布局对于table tr td,table tr th构造就变得容易了，经由对table设置class或id,对th与td设置装备摆设需求CSS花式便可。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j52699.shtml