谁帮我用div+css做一个table 谁帮我用div+css做一个table,4列,多行的 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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=utf-8" /><title>无标题文档</title><style>ul{list-style:none;width:372px;overflow:hidden;padding:0;margin:0;border-top:1px solid #000;border-left:1px solid #000}ul li{display:block;border-right:1px solid #000;border-bottom:1px solid #000;float:left;width:92px;}</style></head><body><ul class="table"><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>这样的? 要实现table干嘛不用table而用div,还要增加更多不必要的代码,这不是多此一举吗更何况table的兼容性比其他的元素都要好 <div style="width:100%"> <div style="position:relative"><div style="width:25%;float:left;">栏目频道</div><div style="width:25%;float:left;">栏目频道</div><div style="width:25%;float:left;">栏目频道</div><div style="width:25%;float:left;">栏目频道</div></div>..重复.<div style="position:relative"><div style="width:25%;float:left;">栏目频道</div><div style="width:25%;float:left;">栏目频道</div><div style="width:25%;float:left;">栏目频道</div><div style="width:25%;float:left;">栏目频道</div></div></div> 如果只是少量的文字,还是用TABLE的好,DIV+CSS 可行,但代码多,没必要为1K的文字,再费力写出1K的代码,且一旦有一点不小心,整个"表格"就会散了,或是走形了,速度上也不见得会快出多少的,不过如果是布局就另当别论了. 我看有不少人走入了误区谁说DIV就比TABLE好的?各得其所才是正确的。 楼主如果要简洁一点的这里的这个不知合不合意,看一下吧SOURCE:看一下效果效果这是我自己搞的,真的很麻烦,后悔没用表格,但都做出来了,也不想删了.一个痛苦的纪念吧.在FF中会有一点变化,最好试试<style type="text/css">#NCtable{width:59.5em}#NCtable,#NCtable ul{float:left;margin:0;padding:0}#NCtable #Bleft{border-width:0 0 0 1px;margin-left:120px}#NCtable li{font-size:1.4em;border-width:0 1px 1px 0;text-align:center;padding:3px}#NCtable li.Title{font-size:1em;font-weight:700;border-top-width:1px;background-color:#eee;padding:0.8em 3px}#NCtable li,#NCtable #Bleft,#NCtable li.Title{border:solid #999}</style><div id="NCtable"><ul id="Bleft"><li class="Title">Valeur</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>100</li><li>1,000</li><li>10,000</li><li>100,000,000</li></ul><ul style="background-color:#FFC"><li class="Title">Simp.</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><ul style="background-color:#6CF"><li class="Title">Trad.</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><ul style="background-color:#FFC"><li class="Title">Maj. Simp.</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><ul style="background-color:#6CF"><li class="Title">Maj. Trad.</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><ul style="background-color:#FFC"><li class="Title">Pinyin - N° de ton.</li><li>líng - ling2</li><li>yī - yi1</li><li>èr - er4</li><li>sān - san1</li><li>sì - si4</li><li>wǔ - wu3</li><li>liù - liu4</li><li>qī - qi1</li><li>bā - ba1</li><li>jiǔ - jiu3</li><li>shí - shi2</li><li>bǎi - bai3</li><li>qiān - qian1</li><li>wàn - wan4</li><li>yì - yi4</li></ul></div> 上面是我能做的代码最少的了,为了能使它代码少,接近<TABLE>花了一些时间.但还是不太理想. 求助,我发现不了问题。总是跑不动。 如果禁止网页中的拖拽? 我估计没人碰到过这个问题 求高手 三层菜单的代码。 可否知道一个页面的输入框的值是否被用户修改过?急急急急急急 帮忙看一下这段代码出了什么问题? 请各位大虾帮忙看一段JavaScript代码~~~ 100求一个 跟随滚动条上下移动图成的函数(第一个写的完全的一百分全给) 初学canvas画圆,为什么不圆呢? javascript 中的 <!-- --> 表示什么意思?我知道他不是注释 javascript小问题,不能在小的问题了,就是不会
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul{list-style:none;width:372px;overflow:hidden;padding:0;margin:0;border-top:1px solid #000;border-left:1px solid #000}
ul li{display:block;border-right:1px solid #000;border-bottom:1px solid #000;float:left;width:92px;}
</style>
</head><body>
<ul class="table">
<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>这样的?
更何况table的兼容性比其他的元素都要好
<div style="position:relative">
<div style="width:25%;float:left;">栏目频道</div>
<div style="width:25%;float:left;">栏目频道</div>
<div style="width:25%;float:left;">栏目频道</div>
<div style="width:25%;float:left;">栏目频道</div>
</div>
.
.
重复
.
<div style="position:relative">
<div style="width:25%;float:left;">栏目频道</div>
<div style="width:25%;float:left;">栏目频道</div>
<div style="width:25%;float:left;">栏目频道</div>
<div style="width:25%;float:left;">栏目频道</div>
</div>
</div>
谁说DIV就比TABLE好的?各得其所才是正确的。
SOURCE:看一下效果效果
这是我自己搞的,真的很麻烦,后悔没用表格,但都做出来了,也不想删了.一个痛苦的纪念吧.在FF中会有一点变化,最好试试
<style type="text/css">#NCtable{width:59.5em}#NCtable,#NCtable ul{float:left;margin:0;padding:0}#NCtable #Bleft{border-width:0 0 0 1px;margin-left:120px}#NCtable li{font-size:1.4em;border-width:0 1px 1px 0;text-align:center;padding:3px}#NCtable li.Title{font-size:1em;font-weight:700;border-top-width:1px;background-color:#eee;padding:0.8em 3px}#NCtable li,#NCtable #Bleft,#NCtable li.Title{border:solid #999}</style>
<div id="NCtable"><ul id="Bleft"><li class="Title">Valeur</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>100</li><li>1,000</li><li>10,000</li><li>100,000,000</li></ul><ul style="background-color:#FFC"><li class="Title">Simp.</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><ul style="background-color:#6CF"><li class="Title">Trad.</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><ul style="background-color:#FFC"><li class="Title">Maj. Simp.</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><ul style="background-color:#6CF"><li class="Title">Maj. Trad.</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><ul style="background-color:#FFC"><li class="Title">Pinyin - N° de ton.</li><li>líng - ling2</li><li>yī - yi1</li><li>èr - er4</li><li>sān - san1</li><li>sì - si4</li><li>wǔ - wu3</li><li>liù - liu4</li><li>qī - qi1</li><li>bā - ba1</li><li>jiǔ - jiu3</li><li>shí - shi2</li><li>bǎi - bai3</li><li>qiān - qian1</li><li>wàn - wan4</li><li>yì - yi4</li></ul></div>