CSS表格设计

html-css015

CSS表格设计,第1张

抱歉.这个CSS做不到......CSS只能做到让表格隔行颜色不同....如果说经过表格时颜色改变的话..可那在其他高版本的浏览器中能够实现或许..注意..只是说或许.因为我也没有利用高版本的浏览器...

做到兼容性上...还是利用JS来实现好点...

顺便说下.css实现隔行颜色不同的话...也是要页面输出table后..然后给tr加上不同class来实现的...然后指定class的css就可以了....

如果你是静态页面的话...用JS实现tr动态添加CLASS也行..但是如果你是PHP或者服务端语言输出的话...可以直接判断下....

比如..用三元运算符..?: ..这样是可以的.先判断前一个输出的是什么颜色..如果是..换色..如果不是则就指定这个颜色..

例外....推荐你一个JS库.jquery..它做的一个经典的一个例子就是实现表格的斑马线...具体怎么实现就不说了...网上方法.很多...自己找找吧..象这种的...动态输入就用三元运算符判断......或者JS来指定..但是那样很麻烦....

<!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">

<head>

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

<title>DIV+CSS表格效果</title>

<style type="text/css">

* {margin:0padding:0}

#main {margin:100px 0 0 200px}

#main ul {width:520pxheight:165pxlist-style:none}

#main li {border-left:1px solid #cccborder-top:1px solid #cccfloat:leftwidth:102pxheight:33pxtext-align:centerline-height:33px}

#main li.b {border-bottom:1px solid #ccc}

#main li.r {border-right:1px solid #ccc}

</style>

</head>

<body>

<div id="main">

<ul>

<li>11</li>

<li>11</li>

<li>11</li>

<li>11</li>

<li class="r">11</li>

<li>怎么样?</li>

<li>还行吧?</li>

<li></li>

<li></li>

<li class="r">11</li>

<li>上海世博</li>

<li></li>

<li></li>

<li></li>

<li class="r">11</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li class="r">11</li>

<li class="b">生活更美好</li>

<li class="b"></li>

<li class="b"></li>

<li class="b"></li>

<li class="b r">11</li>

</ul>

</div>

</body>

</html>

用CSS设置html中的表格边框样式,要设计的样式非常多,下面举例说明

工具:

记事本

浏览器

方法如下:

CSS代码:

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

<!--关键代码:设置表格边框为1像素,实体,红色-->

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>网站名称</td>

<td>具体网址</td>

<td>网站说明</td>

</tr>

<tr>

<td>网站名称</td>

<td>具体网址</td>

<td>网站说明</td>

</tr>

</table>

</div>

效果图如下: