htm表格使用心得
什么时候需要table
当需要展示表格数据时,我们就使用<table>来展示
表格用于展示表格式数据,表格的作用不在于外观,外观是css的工作。
排版和列表不是表格做的事情,应该各尽其职,使用列表或者DIV实现表格,是不合适方法。
我们把表格中每一小块数据叫做单元格。
我们需要在表格数据和单元格之间添加补白,使得单元格数据更易阅读。
表格单元的确包含了补白和一个边框,不过没有边界。
表格单元不存在边界,它只有边框四周的空间而已,而这个空间是为整个表格设置的(border-spacing)。
表格单元不能单独设置边框间距。
注意:tr元素没有border样式,对tr设置border样式无任何效果。
所以边框间距就是table和td/th的border的间距。
压缩边框,除border-spacing外还有border-collapse属性(不但可以消除边框间距,并且两个相邻的边框合并为一个边框)
两者的区别:
border-spacing会合并变粗,因为2个边框重合了。
border-collapse会压缩边框,一条边框的效果。
注意:table除了使用rowspan colspan 其他所有都用CSS样式控制,不建议使用表格自己的样式属性。
如<table width="100px">
table如果不设置高宽,它的大小随着内容的变化而变化,所以只有margin-left:100px有效果,margin-right:100px不起效果
<style type="text/css"> table { margin-left:100px; margin-right:100px; border:thin solid gray; caption-side:top; border-collapse:collapse; } td, th { border:thin solid gray; padding:5px; } th { background-color:#D90000 } caption { font-style:italic; padding-top:10px; } .dubbocolor { background-color:#C8FFFF } table table { margin:0px; } table table th { background:none; } </style> <table> <caption> 课程表 </caption> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <td>语文</td> <td>英语</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> <tr class="dubbocolor"> <td rowspan="2">化学</td> <td>地理</td> <td>体育</td> <td>数学</td> <td>数学</td> </tr> <tr class="dubbocolor"> <td>英语</td> <td>数学</td> <td>数学</td> <td><table> <tr> <th> 上半节 </th> <td> 自修 </td> </tr> <tr> <th> 下半节 </th> <td> 政治 </td> </tr> </table></td> </tr> <tr> <td>语文</td> <td>英语</td> <td colspan="2">数学</td> <td>英语</td> </tr> </table>
本文讲解了html table基础原理,实际开发中,网上会有很多现成的css 表格模板,直接拿来用就可以了,完全没有必要再重复造轮子。
百度搜 CSS样式表格 就能搜出一堆非常精美的表格模板。
由于大多数时候,表单在布局上都是表格形式的,所以我们用表格来布局表单。
没有必要用DIV+CSS来布局表单,浪费时间。
相关推荐
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...