如何让CSS表格效果更美观

html-css023

如何让CSS表格效果更美观,第1张

table自带的border属行显得很生硬。建议请将table的cellspacing设置为1，然后给table设置一个背景，给所有的td设置白色背景，这样td和td之间空出来的一像素就会显示为table背景的颜色形成一种边框效果，宽度和颜色可以随意控制，甚至能使用图片。满意请采纳，谢谢！

使用border-collapse: collapse去掉表格线间的空白。

使用:nth-child(even)选择表格中的偶数行，进行修改背景色，如果选择奇数行，使用odd选择奇数。

使用:last-of-type选择最后一个元素进行画表格底线

使用colspan进行行合并

使用rowspan进行列合并

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

<html xmlns=" http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title><html>

<head>

<style type="text/css">

<!--

.BG {border: 1px solid #FFCC00<br>}

.BG1 {border: 1px dashed #CCCCCC<br>}

.BG2 {border: 1px inset #3399CC<br>}

.BG3 {border-top-width: 1px<br>border-right-width: 1px<br>border-bottom-width: 1px<br>border-left-width: 1px<br>border-top-style: dotted<br>border-right-style: solid<br>border-bottom-style: double<br>border-left-style: outset<br>border-top-color: #999999<br>border-right-color: #FF9900<br>border-bottom-color: #CC9999<br>border-left-color: #99CC00<br>}

.BG4 {border-top-width: 1px<br>border-right-width: 1px<br>border-bottom-width: 1px<br>border-left-width: 1px<br>border-top-style: dashed<br>border-right-style: none<br>border-bottom-style: dashed<br>border-left-style: none<br>border-top-color: #FFCC00<br>border-right-color: #FFCC00<br>border-bottom-color: #FFCC00<br>border-left-color: #FFCC00<br>}

-->

</style>

</head>

<body>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="BG">

<tr>

<td bgcolor="#FFFF99"><div align="center">模拟百度的表格</div></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<p></p>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="BG1">

<tr>

<td bgcolor="#CCCCCC"><div align="center">模拟很多BLOG表格</div></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<p></p>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="BG2">

<tr>

<td><div align="center">新款式表格</div></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<p></p>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="BG3">

<tr>

<td><div align="center">花式表格</div></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<p></p>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="BG4">

<tr>

<td><div align="center">去任意边表格</div></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<p></p>

<p></p>

<p></p>

</body>

</html>

整个页面的，复制看看把