189
2023-12-14 09:13
admin谢邀。
使用普通的<table>标签完成就可以，如果你认为有必要的话外面嵌套一层<div>标签。
表格背景和边框写在CSS里引用即可。
表格的内容应该是数据库的查询结果，需要用到php之类的，就比较复杂了。
举例来说以上的表格代码（静态，只写前两行）。
HTML：
<table width="928">
<tbody>
<!-- 标题行 -->
<tr>
<td width="15%"><strong>名称</strong></td>
<td width="35%"><strong>地址</strong></td>
<td width="10%"><strong>分类</strong></td>
<td width="10%"><strong>特色</strong></td>
<td width="10%"><strong>免费</strong></td>
<td width="10%"><strong>语种</strong></td>
<td width="10%"><strong>其他</strong></td>
</tr>
<!-- 第一行 -->
<tr class="alt">
<td>iH5</td>
<td><a href="http://www.ih5.cn/" target="_blank" rel="nofollow">www.ih5.cn</a><span class="hu-external"></span></td>
<td>H5工具</td>
<td> </td>
<td> </td>
<td>中文</td>
<td> </td>
</tr>
</tbody>
</table>标题行没有加背景，而下面的行颜色相互变换。这个变换的部分就写在CSS里。
所以表格继承到的属性有（写在CSS里）：
/* 整张表的属性 */
.table { font-size: 0.875em; margin-bottom: 1.5em; width: 100%; text-align: center; }
/* 带背景的行 */
.table tr.alt { background: #f1f1f1; }
/* 整张表的行属性 */
.table td { border-bottom: 1px solid #f1f1f1; text-align: center; padding: 5px; vertical-align: middle; }
/* 整张表的列属性 */
.table th { font-weight: 600; text-align: center; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; padding: 10px 5px; }顶一下
(0)
0%
踩一下
(0)
0%
- 相关评论
- 我要评论
-