15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页设计中表格的制作?

网页设计中表格的制作?

时间:2024-02-15 02:35:02 | 来源:网站运营

时间:2024-02-15 02:35:02 来源:网站运营

网页设计中表格的制作?:谢邀。

使用普通的<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>&nbsp;</td><td>&nbsp;</td><td>中文</td><td>&nbsp;</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; }

关键词:中表,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭