Table表格

• 普通表格
  

<table border="1" cellpadding="10" cellspacing="0">
<caption>学生统计表</caption>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>19</td>
    <td>女</td>
  </tr>
</table>

css:

<style>
  table {   
    caption-side: bottom;/*IE8+支持 表格标题位置默认是top即第一张图片标题所在位置，第二张标题是bottom*/
  }  
</style>

解析：
border=”1”是边框线粗细；
cellpadding=”10” 单元格边框和文字内容之间的距离；
cellspacing=”0” 单元格和单元格之间的距离为0，就是无缝隙；也可以不设置cellspacing，直接给table表格添加样式（IE8+支持）border-collapse: collapse;是单边框，border-collapse: separate;是默认的双边框；
table的其他属性：
bgcolor=”#ccc” 整个表格的背景颜色；
frame=”void” 不显示外边框；
frame=”above” 只显示顶部边框
frame=”below”只显示底部边框
frame=”hsides”只显示顶部和底部边框
frame=”vsides”只显示左右两侧边框
frame=”lhs”只显示左侧边框
frame=”rhs”只显示右侧边框
例如：只显示顶部边框、只显示左侧边框

• 单元格属性–行合并：
  

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <td rowspan="2">姓名</td> <!-- 行合并 -->
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <!-- <td>张三</td> 被合并掉了，所以要注释掉-->
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>19</td>
    <td>女</td>
  </tr>
</table>

解析：
rowspan=”2”行合并，就是第一行的一个单元格和第二行的一个单元格（ 同列）合并。合并几行就写数字几。

• 单元格属性-列合并
  

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
      <td colspan="2">姓名</td><!-- 行合并 -->
      <!-- <td>年龄</td> 被合并掉了，所以要注释掉-->
      <td>性别</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>19</td>
      <td>女</td>
    </tr>
  </table>

解析：
colspan=”2”列合并，就是第一列的一个单元格和第二列的一个单元格（ 同列）合并。合并几列就写数字几。