htm表格使用心得

什么时候需要table

当需要展示表格数据时,我们就使用<table>来展示

表格用于展示表格式数据,表格的作用不在于外观,外观是css的工作。

排版和列表不是表格做的事情,应该各尽其职,使用列表或者DIV实现表格,是不合适方法。

我们把表格中每一小块数据叫做单元格。

我们需要在表格数据和单元格之间添加补白,使得单元格数据更易阅读。

表格单元的确包含了补白和一个边框,不过没有边界。

表格单元不存在边界,它只有边框四周的空间而已,而这个空间是为整个表格设置的(border-spacing)。


htm表格使用心得         表格单元不能单独设置边框间距

注意:tr元素没有border样式,对tr设置border样式无任何效果。

所以边框间距就是table和td/th的border的间距。
 

压缩边框,除border-spacing外还有border-collapse属性(不但可以消除边框间距,并且两个相邻的边框合并为一个边框)

两者的区别:

htm表格使用心得border-spacing会合并变粗,因为2个边框重合了。


htm表格使用心得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来布局表单,浪费时间。

相关推荐