1. 怎樣用div做表格完美版
用div做成表格的形式
把標簽中間的空格都去掉就OK了
< !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 >強強的博客-用div做表格完美版 < /title>
< /head>
< style type="text/css" >
body{ margin:0px; padding:0px;font-family:Microsoft
Yahei,Tahoma,Verdana,STHeiTi,simsun,sans-serif; font-size:14px;
background-image:url(../images/t_bg.jpg);
background-repeat:no-repeat; background-color:#000;}
ul,li{ list-style-type:none; padding:0px; margin:0px;}
a { color:#fff; text-decoration:none;}
a:hover { color:#F30; text-decoration:none;}
#tab{
width:645px;
height:auto;
margin:0 auto;
background-color:#e5f2f4;
}
.lititle{
width:643px; border:1px dotted #f3f3f3;
line-height:40px; font-size:16px; font-weight:bold;
color:#000;
}
.cont {
}
.cont li{
list-style:none;
float:left;
border-left:1px dotted
#f3f3f3;
border-bottom:1px dotted #f3f3f3;
border-right:1px dotted #f3f3f3;
height:24px;
background-color:#395560;
line-height:24px;
color:#f3f3f3;
}
.li1{
width:50px;
list-style:none;
float:left;
text-align:center;
border-right:1px dotted #f3f3f3;
}
.li2{
width:140px;
list-style:none;
float:left;
text-align:center;
border-right:1px dotted
#f3f3f3; }
.li3{
width:400px;
list-style:none;
float:left;
text-align:center;
border-right:1px dotted
#f3f3f3; }
.li4{
width:50px;
float:left;
text-align:center;
}
.liwz{
width:451px;
float:left;
text-align:center;
}
.lititle{ display:block;
text-align:center;}
< /style>
< body >
< div id="tab">
< div class="cont">
< div class="lititle">強強的博客-用div做表格完美版
< /div>
< ul > < li > < span
class="li1">< b >排序 < /b> < /span> < span
class="li2">< b >名稱 < /b> < /span> < span
class="liwz">< b >網址 < /b> < /span> <
/li> < li > < span class="li1">1 < /span> <
span class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> < /li> < li
> < span class="li1">1 < /span> < span
class="li2">強強的博客 < /span> < span
class="li3">http://blog.sina.com.cn/kakuue < /span> <
span class="li4">訪問 < /a> < /span> <
/li>
< /ul>
< /div>
< /div>
< /body>
< /html>
2. 怎麼在DIV裡面畫表格
既然你都用DIV了 那你何必TD TR那樣麻煩 直接用CSS樣式表控制DIV就可以了 可以控制DIV的boder嘛 要不然教你個不錯的辦法 也是很簡便的辦法 直接PS裡面畫好表格 直接切圖 然後Dreamweaver裡面添加表格文字 不過此辦法可控制性比較差 不利於修改
3. 如何用DIV+CSS製作表格
如下幾點建議：
1）DIV+CSS是用來替換表格排版的，表格還是用table。
2）可以嘗試用ul li 做簡單的表格
3）用DIV+CSS做表格的方法和做頁面布局的方法一致，所以你要學習一下這方面，可以參考一下相關視頻教程。如果做復雜的表格因為需要反復嵌套效果就不好了。
4. 怎樣用div做表格
<style>.data-table{..}
.weekli{float:left;}
.dayli{float:left;}</style>
<divclass="data-table">
<divclass="week"><ul><li>星期日</li><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li></ul></div>
<divclass="day"><ul><li>1</li>....<li>29</li></ul></div>
<divclass="today"></div>
</div>
5. 怎麼在DIV裡面畫表格
既然你都用DIV了 那你何必TD TR那樣麻煩 直接用CSS樣式表控制DIV就可以了 可以控制DIV的boder嘛 要不然教你個不錯的辦法 也是很簡便的辦法 直接PS裡面畫好表格 直接切圖 然後Dreamweaver 裡面添加表格文字 不過此辦法可控制性比較差 不利於修改
6. 請幫忙用DIV寫一個表格
<style>
#box{ width:750px;height:310px; border:1px solid #0F0}
#left{width:310px;height:310px; float:left;border:1px solid #0F0}
#right{margin:51px 0 0 485px;}
.tab{width:265px; height:37px;border:1px solid #0F0}
</style>
<div id="box">
<div id="left">310*310</div>
<div id="right">
<div class="tab">265*37</div>
<div class="tab">265*37</div>
<div class="tab">265*37</div>
<div class="tab">265*37</div>
<div class="tab">265*37</div>
<div class="tab">265*37</div>
<div class="tab">265*37</div>
</div>
</div>
7. div做一個表格
你可以用left的div，使用float:left;
middle的div，使用float:left;margin-left:(填入左邊的div的寬度)px;
right的div，使用float:right;
具體對其位置可以自己用margin來調整下。
下面的第二行記得在第一個div使用clear：both；就好了。第三行同二行。
有時間學習下div，自己會了才是王道。
8. div做表格
你可以這樣寫
<div>
<strong></strong><span></span>//這是一條記錄，你只要循環這里就好
</div>
css:
div{border-top:1px solid #efefef;border-left:1px solid #efefef;}//這是外圍DIV的CSS樣式
div strong,div span{float:left;border-right:1px solid #efefef;display:block;height:50px;border-bottom:1px solid #efefef;}//定義一條記錄的邊框和高度
div strong{width:10%;}//小的寬度
div span{width:40%;}//大的寬度