如何用DIV+CSS制作表格_IT百科

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" " http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<head>

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

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

ul { margin-left:1px; margin-top:1px; width:505px;}

li { float:left; height:23px; border:1px solid #cfdae8; width:100px; margin-left:-1px; margin-top:-1px;}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

<style>

{

padding:0px;

margin: 0px;

}

div{

margin: 30px 0px 0px 30px;

width: 100px;

height: 100px;

border: 1px solid #ccc;

border-right:none;

border-bottom: none;

}

ul{

float: left;

}

ul li{

list-style: none;

width: 24px;

height: 24px;

border-right:1px solid #ccc;

border-bottom: 1px solid #ccc;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</body>

效果如下：

HTML在CSS中设置背景后，无法设置表格背景颜色是因为css中代码书写错误的原因。

css中设置表格背景颜色的代码为background-color，正确书写方式为：

tableB {

background-color:#FFFFFF;

}

定义上下左右线条

<tr>

</tr>

<tr>

</tr>

</table>

一、只对表格table标签设置边框 - TOP

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

2、对应html代码片段

<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>wwwdivcss5comtd><td>CSS学习td>tr><tr><td>CSS5td><td>wwwcss5comcntd><td>CSS切图td>tr>table>div>

二、对td设置边框 - TOP

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

2、对应html源代码片段

<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>wwwdivcss5comtd><td>CSS学习td>tr><tr><td>CSS5td><td>wwwcss5comcntd><td>CSS切图td>tr>table>

三、对table和td技巧性设置表格边框 - TOP

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

2、对应html源代码片段：

<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>wwwdivcss5comtd><td>CSS学习td>tr><tr><td>CSS5td><td>wwwcss5comcntd><td>CSS切图td>tr>table>

四、对table和td设置背景，实现完美表格边框 - TOP

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1

使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化 *** 作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。

借助DW软件设置表格单元之间间距

或

直接对

标签内cellspacing="1"即可，得到：

<tablewidth="400"border="0"cellspacing="1"cellpadding="0">

3）、设置table td背景为白色

2、css代码：

3、对应html源代码：

<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>wwwdivcss5comtd><td>CSS学习td>tr><tr><td>CSS5td><td>wwwcss5comcntd><td>CSS切图td>tr>table>div>

五、css table表格边框实现总结 - TOP

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<head>

/不要使用标签名作为类名/

/table{text-align:center;width:100%;height:100%;border-width:thin;border-style:solid;border-color:#AA9FFF;border-collapse:separate;}/

tbClass {

text-align:center;

width:100%;height:100%;

/首先对大表格加上左边和底边/

/我自作主张加上了底边框，可以删掉去/

/听说FF下不支持缩写，请你自己把下面的写法拆分出来/

border-left:2px #AA9FFF solid; / 左边框 /

border-bottom:2px #AA9FFF solid; /底边框/

}

tbClass td {/单元格的上边和右边/

border-top:2px #AA9FFF solid;

border-right:2px #AA9FFF solid;

}

tbClass td {/测试用，为了看到效果，你可以把这个删掉去/

/width:100px; height:80px;/

}

/专门为“盒子那行写的类”/

boxCell td { height:101px; padding:0; margin:0}

</style>

</head>

<body>

<php

for($i=1;$i<=1000;$i++){

if($i%5==0){

echo "<td>$i</td>";

echo "</tr>

</tr>

";/////注意！这里使用了一个boxCell的CSS类，不会那么多冗余代码

echo "<tr>";

}else{

echo "<td>$i</td>";

}

</table>

</body>

</html>

//////最后说明；

1。如果乱码，或无显示，请注意你php文件的编码格式，或在浏览器下选择GBK32编码

2。这种专业问题，如果到Csdn 里发帖，十分钟之内就有人回答了

3。百度的BUG：回复后再修改，就不能保持代码的缩进了 -_-!即不能tab缩进，要换成4个空格

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/12177720.html

如何用DIV+CSS制作表格

发表评论

评论列表（0条）