前端表格知识 页眉 主题 页脚 设计让表格更语义化

我们用一下内容简单介绍一下表格
caption>课程表</caption> cellspacing 规定单元格之间的空白
<!-- 表格标题 -->
thead 表格页眉
tbody 表格的主体
tfoot 表格的页脚
优点：告诉表格的显示顺序 表格结构 不会被代码打乱
row 是行 如果需要跨列 则rowspan
col 是列 如果是跨行 则为colspan
我们所有的表格内容都需要写在table中
<table>
<thead>
<tr>
<th colspan="2">时间</th>
<!-- 单元格跨列数 -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">上午</td>
            <!-- 跨行合并 -->
            <td>1</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>2</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>3</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>4</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
        <tr>
            <td colspan="7">休息</td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <!-- 跨行合并 -->
            <td>1</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>2</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>3</td>
            <td>语文</td>
            <td>思想品德</td>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="7" style="color: red;">家教HTML基础课表案例</td>
        </tr>
    </tfoot>

</table>