03-html表格

表格标签

标签	作用
< table >	定义表格
< th >	定义表格的表头
< tr >	定义表格的行
< td >	定义表格单元
< caption >	定义表格标题
< colgroup >	定义表格列的组
< col >	定义用于表格列的属性
< thead >	定义表格的页眉
< tbody >	定义表格的主体
< tfoot >	定义表格的页脚

---

table标签

在 HTML5 中，table标签中仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。

属性	值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) / #xxxxxx / colorname	规定表格的背景颜色。
border	1 / “”	规定表格单元是否拥有边框。
cellpadding	pixels	规定单元边沿与其内容之间的空白。
cellspacing	pixels	规定单元格之间的空白。
frame	void、above、below、hsides、lhs、rhs、vsides、box、border	规定外侧边框的哪个部分是可见的。
rules	none、groups、rows、cols、all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	pixels	规定表格的宽度。
height	pixels	规定表格的高度。

---

合并单元格

• 跨行合并：rowspan
• 跨列合并：colspan

实例

若3×3的表格合并单元格实现下图：

实现代码：

<table width="200" height="100" cellspacing="0">

  <!-- 第一行 -->
        <tr>
            <td></td>
             <td colspan="2"></td> <!-- 合并第一行的第2、3个单元格 -->
        </tr>

        <!-- 第二行 -->
        <tr>
             <td rowspan="2"></td> <!--合并第二三行的第一个单元格 -->
            <td></td>
            <td></td>
        </tr>

        <!-- 第三行 -->
        <tr>
           <!-- 注意这里只有两个td标签 -->
            <td></td>
            <td></td>
        </tr>

    </table>