表格的基本内容总结

关于表格的基本内容：

一、table的属性：

    1.border属性:

     表格的边框

     默认值：0 无边框

     取值： 1 或者正整数（2 3）

     注意：只有table的边框是10px，th和td的边框还是1px

   

    2.宽高属性：

     width  单位 px 可以省略

     height  单位 px 可以省略

    3.cellpadding属性：

作用：定义单元格中内容和边框之间的间距,单位是像素，可以省略

    4.cellspacing属性

    作用：单元格和单元格之间的间距,默认值为2，单位是像素，可以省略

cellspacing='0',单元格之间的距离为0

    5. 改变边框的颜色（两种方法）

       a. borderColor：改变边框的颜色（写在table的开始标签里即可）

          borderColor="#ffa500" ，直接写在table的开始标签里

       b. 给table和th、td设置边框（这时需在style里面单独写样式）

          注意：不能只设置边框的颜色

          这时需在style里面单独写样式

          table {

           margin: 50px auto;

           border: 1px solid #ffa500;

          }

         /* 群组选择器 */

          th,

          td {

           border: 1px solid #ffa500;

          }

    6. 表格的标题

       表格的标题，写在body里，紧跟在table开始标签之后，只有在table里有效

       <caption>标题</caption>

       默认水平居中

二、th/td单元格属性：

    1.宽高属性：

    width 单位 px 可以省略

    height 单位 px 可以省略

    2. align水平对齐属性

    作用：单元格水平方向的对齐方式

    取值：

       left左对齐

       center 居中对齐

       right 右对齐

    3. valign垂直对齐属性

    作用：单元格垂直方向的对齐方式

    取值

      top顶对齐

      middle居中对齐

      bottom底部对齐

三、合并单元格

1.rowspan(跨行合并)

    语法：<td rowspan="2"> 电话 </td>

    2.colspan(跨列合并)

语法：<td colspan="2"> 电话 </td>

    操作步骤

    1.确定是合并行还是合并列

    2.找到目标单元格，添加合并属性及合并单元格的数量如：<td rowspan="2"> 电话 </td>

3.删除多余单元格

四、表格的特性

1.未规定宽度的表格，单元格适应内容（单元格的宽高由内容撑开）

  2.同一行的单元格，高度只会识别一个，取最大值

  3.同一列的单元格，宽度只会识别一个，取最大值

  4.表格table中的单元格th和td标签中间可以包含任何html标签及表格

五、border-collapse 属性设置表格的边框是否被合并为一个单一的边框

    border-collapse：collapse；表格实现1px的边框

    separate：边框独立（默认值）

    collapse：相邻边框被合并  相邻的边框合并为单一的边框