HTML基础学习（三）-CSDN博客

本文链接：https://blog.csdn.net/qq_43326818/article/details/88633694

表格基础

表格基本标签
使用元素添加表头
使用格跨行和跨列

高级表格特性和可访性

caption元素定义表格标题
复杂表格的结构

表格基础

表格基本标签:
< table>< /table>, < tr>< /tr>,< td>< /td>
使用< th>元素添加表头,其使用于，< td>是一样的，只不过是其是的内容加粗和居中。
单元跨行和跨列： < td rowspan="number">< /td>其作为属性，表示的是将这一列合并number行;< td colspan="number> < /td>表示将这一行合并number列。
PS:这里一般合并的时候是对于特殊的位置，所以一般采用的是< th>进行合并

高级表格特性和可访问性:

使用caption可以添加表题目，也就是使用标签< caption>< /caption>
复杂表结构：表的布局，使用标签及其顺序: < table>< /table>,< thead>< thead>,< tbody> < /tbody>,< tfoot>< /tfoot>

实例

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        </head>
    <body>
        <table border="1">
            <caption>课程表</caption>
            <tr>
                <th colspan="2"></th>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <tr>
                <th rowspan="2">上午</th>
                <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>
                <th colspan="7">午休时间12点到2点</th>
            </tr>
            <tr>
                <th rowspan="2">下午</th>
                <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>
                </table>
                </body>
                </html>

结果：可在浏览器上查看