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来布局表单，浪费时间。