|
| HTML表格使用从入门到精通 |
| |
| [作者:不详 转贴自:不详 点击数: 字体:【大 中 小】 更新时间:2006-3-2 10:13:54] |
制作带有立体感的表格
在页面中适当的加入带有立体感的表格元素,会给你的页面添光加彩。
〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">
<tr>
<td>A</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC">
<tr>
<td>B</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">
<tr>
<td>C</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table〉
小技巧:效果图中的凸凹效果,完全是由bordercoloer的颜色来控制的,它的颜色浅一些,有会有凸出的效果,它的颜色深一点,就会有凹陷的效果。
隐藏表格的分隔线
在处理表格时有时会有这样的需求,某几列、或行的内容属于同一主题,为了排列整齐将它们放在不同的行上,但是不想让表格的分隔线显示出来,有什么办法吗,其实很简单。
隐藏水平分隔线
〈table border rules=cols cellspacing=0 align=left>
隐藏竖直分隔线
〈table border rules=rows cellspacing=0 align=left>
隐藏全部分隔线
〈table border rules=none cellspacing=0 align=left>
表格内容分行下载
表格内有一些载入较慢的元素(如计数器、大图片等等)时,往往会延迟整个表格的显示。这是由IE的显示特性决定的,只有当表格内所有元素全部载入后,整个表格才得以显示。“上有政策,下有对策”,我们可以使用标签把表格内容拆开,放在几个竖向相连的大表格中,把关键内容放在上面的表格中,让它们先显示,这样用户就不会因为失去耐心而关闭窗口了。
站长注:在使用上面代码学习时注意把“>”和“<”变为“>”和“<”。
页次:2/2 1篇/页 首页 上一页 下一页 尾页 合计 2 篇 Go: |
| |
上一篇:优秀网页的6个好习惯,网页制作学习
下一篇:两台SQL Server数据同步解决方案 |
winner 打印本页 关闭窗口 |
|
|