html表格

在Html中 <table> 标签表示一个表格，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）

表格属性：

• border ：设置表格边框
• width ：设置表格宽度
• align ：设置表格对齐
• cellpadding ：设置单元格间距
• cellspacing ：设置像素间隙

实例

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男/td>
    </tr>
</table>

td跨行、跨列属性

rowspan 属性定义单元格应该纵跨的行数

<!-- 单元格跨两列 -->
<table border="1">
    <tr>
        <th>名字</th>
        <td>编号</td>
    </tr>
    <tr>
    <th rowspan="2">李四</th>
        <td>123456</td>
    </tr>
    <tr>
        <td>75891561</td>
    </tr>
</table>

colspan 属性定义单元格应该横跨的列数

<!-- 单元格横跨两格 -->
<table border="1">
    <tr>
        <th>名字</th>
        <th colspan="2">王五</th>
    </tr>
    <tr>
        <td>编号</td>
        <td>123456</td>
        <td>456789</td>
    </tr>
</table>

完整表格展示

一个完整table表格一般包含<thead> 、<tbody> 、和 <tfoot> 元素结合，用来规定表格的各个部分（表头、主体、页脚）。

• <thead> 标签用于组合 HTML 表格的表头内容
• <tbody> 标签用于组合 HTML 表格的主体内
• <tfoot> 标签用于组合 HTML 表格的页脚内容

实例

<!-- 完整表格实例 -->
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" >
    <thead>
        <tr align="center">
            <td>姓名</td>
            <td>年龄</td>
        </tr>
    </thead>
    <tbody>
        <tr align="center">
        <td>杨六</td>
        <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr align="center">
        <td colspan="2">底部</td>
        </tr>
    </tfoot>
</table>