如何用DIV+CSS制作表格

html-css06

如何用DIV+CSS制作表格,第1张

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

<meta name="author" content="Chomo" />

<link rel="start" href=" http://www.14px.com" title="Home" />

<title>表格外观的无序列表</title>

<style type="text/css">

* { margin:0padding:0list-style:none}

ul { margin-left:1pxmargin-top:1pxwidth:505px}

li { float:leftheight:23pxborder:1px solid #cfdae8width:100pxmargin-left:-1pxmargin-top:-1px}

</style>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>

1.设置class或者id,加以区分

2.比如说上级菜单是div,如下:

<div>

<table></table>

<table></table>

</div>

那么,在css中第一个table可以用“div>table{ }“来写

设置每个table的样式,比如class=tab1,class=tab2,然后在样式表设置

.tab1 td{这里为tab1的样式}

.tab2 td{这里为tab2的样式}

而不用一个个去设置td class="xx"了 毕竟比较麻烦。

如下代码:

<table >

<td class="style1" >内容</td >

</table >

<table >

<td class="style2" >内容</td >

</table >

在CSS中定义:

.style1 {

}

.style2 (

}

或者是给TD加上class,相同样式用的相同Class,不同样式用的不同Class