HTML5 之 表格

表格

<!-- 加一点 CSS 边框样式 -->
<style type="text/css">
    table,td,th {
        border: aqua 1px solid;
        /* 使边框线重叠 */
        border-collapse: collapse;
    }
    td,th {
        border: aqua 1px solid;
    }
</style>
<!-- 表格 -->
<table>
    <!-- tr 定义每一行 -->
    <tr>
        <!-- th 定义表头 -->
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <!-- td 定义每一个表格 -->
        <td>大数据男孩</td>
        <td>18</td>
    </tr>
</table>

跨格子

• colspan=”2”: column 列跨两格
• rowspan=”2”: row 行跨两格

<style type="text/css">
    table,td,th {
        border: aqua 1px solid;
        /* 使边框线重叠 */
        border-collapse: collapse;
    }
    td,th {
        border: aqua 1px solid;
    }
</style>
<table>
    <tr>
        <!-- 横跨两个 -->
        <th colspan="2">姓名</th>
        <!-- 竖跨两个 -->
        <th rowspan="2">年龄</th>
    </tr>
    <tr>
        <td>大数据男孩</td>
        <td>18</td>
    </tr>
</table>

高级完整版 表格

结构

<table>
        <!-- 标题 -->
    <caption>信息</caption>
    <thead>
        <!-- 表头 -->
    </thead>
    <tbody>
        <!-- 表主体 -->
    </tbody>
    <tfoot>
        <!-- 表尾 -->
    </tfoot>
</table>

<style type="text/css">
    table,td,th {
        border: aqua 1px solid;
        /* 使边框线重叠 */
        border-collapse: collapse;
    }
    td,th {
        border: aqua 1px solid;
    }
</style>
<table>
    <!-- 标题 -->
    <caption>信息</caption>
    <!-- 表头 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <!-- 表主体 -->
    <tbody>
    <tr>
        <td>大数据男孩</td>
        <td>18</td>
    </tr>
    </tbody>
    <!-- 表尾 -->
    <tfoot>
        <tr>
            <td colspan="2">以上内容纯属虚构</td>
        </tr>
    </tfoot>
</table>