当前位置: 首页 > 工具软件 > Table Library > 使用案例 >

table 的使用

易品
2023-12-01

 

第1种对表格设置边框 效果

站名网址说明
DIVCSS5www.divcss5.comCSS学习
CSS5www.css5.com.cnCSS切图

对应CSS代码

.table-a table{border:1px solid #F00}

对应html源代码

<div class="table-a">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

第2种对表格设置边框 效果

站名网址说明
DIVCSS5www.divcss5.comCSS学习
CSS5www.css5.com.cnCSS切图

对应CSS代码:

.table-b table td{border:1px solid #F00}

对应HTML代码片段:

<div class="table-b">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

第3种对表格设置边框 效果

站名网址说明
DIVCSS5www.divcss5.comCSS学习
CSS5www.css5.com.cnCSS切图

对应CSS代码:

.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00}
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00}

对应HTML源代码片段:

<div class="table-c">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

第4种对表格设置边框 效果

站名网址说明
DIVCSS5www.divcss5.comCSS学习
CSS5www.css5.com.cnCSS切图

对应CSS代码:

.table-d table{ background:#F00}
.table-d table td{ background:#FFF}

对应HTML代码片段:

<div class="table-d">
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

文章出处和来源网址:http://www.divcss5.com/wenji/w503.shtml

合并边框:

border-collapse: collapse;

 类似资料: