Maison > interface Web > tutoriel HTML > 如何使用CSS实现细线表格效果_html/css_WEB-ITnose

如何使用CSS实现细线表格效果_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:40:39
original
959 Les gens l'ont consulté

如何使用CSS实现细线表格效果:

虽然在使用布局的时候不提倡使用table,但是table并非是一个不能使用的元素,只要和CSS配合使用得当,还是具有相当的威力,并且在特地的情况使用table比使用div更有优势,例如在制作表格,但是表格自带的边框比较丑陋,下面介绍一下如何使用CSS实现细线表格效果。代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">table{  width:300px;  height:60px;  background-color:green;}table td{  background-color:white;}</style></head><body><table cellspacing="1">  <tr>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>  </tr>  <tr>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>    <td>单元格</td>  </tr></table></body></html>
Copier après la connexion

以上代码通过设置table的cellspacing属性值为1px,然后再设置table的背景颜色为绿色,再将单元格的背景颜色设置为白色,那么就能够显露出来1px的“边框”效果。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0504/725.html

最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4645

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal