使用div作为表创建相同的东西
我开始更深入地研究CSS,并决定将我的网站的html转换为主要由表格组成的div.
我正在尝试用divs和这个测试页面上的表完成同样的事情.但是我遇到了一些问题:
- 无法创建列
- 垂直文本对齐
我走了多远:
码:
<style type="text/css">
body {
background-color:#000;
}
/* TABLE CSS */
td {
font-family: Tahoma;
font-size: 12px;
}
.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
margin-left:auto;
margin-right:auto;
background-color: #000000;
padding: 1px;
width:400px;
}
.topic {
background-color:#3C0;
font-weight: bold;
height: 23px;
color:#FFF;
text-align:center;
}
.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
height:12px;
line-height:21px;
padding:0px;
}
.row:Hover {
background-color: #252525;
}
/* DIV CSS */
div.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
align:center;
background-color: #000000;
padding: 1px;
width:400px;
}
div.topic {
background-color:#3C0;
font-family: Tahoma;
font-size: 12px;
height: 23px;
font-color:#FFF;
text-align:center;
}
div.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
padding:6px;
font-family: Tahoma;
font-size:12px;
}
div.row:Hover {
background-color: #252525;
}
</style>
<body>
<table class="line">
<tbody>
<tr>
<td class="topic" colspan="3">Table</td>
</tr>
<tr class="row">
<td width="20%" align="left">Test</td>
<td width="20%" align="center">1</td>
</tr>
<tr class="row">
<td align="left">Test</td>
<td align="center">2</td>
</tr>
</tbody>
</table>
<p>
<div class="line">
<div class="topic">Div</div>
<div class="row">Test</div><div class="row">1</div>
<div class="row">Test</div><div class="row">2</div>
</div>
</p>
很高兴看到您将tables 转换为divs,但请确保您只在必要时执行此操作.
如果页面上的数据是表格式的,那么将它放入table元素中是有意义的.
Div用于布局和结构,table用于显示表格数据.
我的一个同事曾经花了很多年的时间来建立一个跟随桌面结构的div的论坛.这都是因为他被告知"桌子不好,使用div和CSS".重要的是要记住这只是指布局结构.
如果您的结构有行和列,那么使用表.表仍然是有用的有用HTML元素,并且远未被弃用.