用div+css做表格

html-css018

用div+css做表格,第1张

如果有很多单元格的话，还是尽量用表格来做。

DIV：

<div

style="width:600pxoverflow:hidden">

<div

style="float:leftwidth:98pxheight:700pxborder:1px

solid

#000"></div>

<div

style="float:leftwidth:499pxheight:100pxborder:1px

solid

#000border-left:0px"></div>

<div

style="float:leftwidth:499pxheight:599pxborder:1px

solid

#000border-left:0pxborder-top:0px"></div>

</div>

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

charset=gb2312"

/>

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

<style

type="text/css">

.tab{

margin:0

padding:0

/*合并边线*/border-collapse:collapse/*宽高自定*/

width:200px

height:200px}

.tab

td{

border:solid

1px

#000}

</style>

</head>

<body>

<table

class="tab">

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

属性都写在CSS里就可以了

方法一直接写页面上：

<table style="css写这里">

对于<td>和<tr>同样加上style可直接写css（如<td style="color:#F00">）

方法二（推荐）

<table class="table1">

然后在css文件定义table1

.table1{}

对于.table1 里的tr的css可以这样写 .table1 tr{}

同理，td可以这样 .table1 td{}

方法三

<table id="table1">

然后在css文件定义table1

.table1{}

对于#table1 里的tr的css可以这样写 #table1 tr{}

同理，td可以这样 #table1 td{}