表格

1.表格标签

  table 表格
  thead 表格头
  tbody 表格主体
  tfoot 表格尾
  tr 表格行
  th 元素定义表头
  td 元素定义表格单元

2.表格样式重置

  table{border-collapse:collapse;} 单元格间隙合并
  th,td{padding:0;}重置单元格默认填充

3.基本结构

HTML

   <table>
     <tbody>
        <tr><!--行-->
           <th>表格标题</th>
           <th>表格标题</th>
        </tr>
        <tr>
           <td>单元格</td>
           <td>单元格</td>
        </tr>
     </tbody>
 </table>

CSS

  th,td{padding:0;}
  table{boder-collapse:collapse;}
  /*table css reset*/
  th,td{boder:1px solid black; height:50px; width:100px;}
  table{width:500px;}

效果图

注意事项

• 不要给table,th,td以外的表格标签加样式；
• 单元格默认平分table 的宽度
• th里面的内容默认加粗并且左右上下居中显示
• td里面的内容默认上下居中左右居左显示
• table 决定了整个表格的宽度；
• table里面的单元格宽度会被转换成百分比；
• 表格里面的每一列必须有宽度；
• 表格同一竖列继承最大宽度；
• 表格同行继承最大高度；

4.单元格合并

• colspan 属性规定单元格可横跨的列数。
  <td colspan="2"></td>
  /必须把合并后的单元格删除/
  
• rowspan 属性规定单元格可横跨的行数。
  <td rowspan="2"></td>
  /必须把合并后的单元格删除/