前端学习(十二) 表格元素(html)

<table>表示二维数据,但是不应该做布局使用

<caption></caption>:表示表格的标题

<colgroup></colgroup>:表示表格的一组列表

-span:表示列数,示例:<colgroup span=2 width=50></colgroup>,表示两列,没列50像素

<col>,定义列上所有公共单元格的公共语义

-span:表示列数

<colgroup>

    <col width=50>

    <col span=2 width=100>

</colgroup>

表示第一列宽度50像素,第二第三列100像素

<tbody></tbody>,表示一系列行数据,子元素只能是<tr>,可以出现多个

<thead></thead>,定义表格列头的行

<tfoot></tfoot>,定义表格列简介的行

<tr></tr>,表格的行

<td></td>,表格中的单元格

-colspan:跨了多少列

-rowspan:跨了多少行

-headers:表示和这个单元格相关的th的id

<th></th>:单元格标题

-colspan:跨了多少列

-rowspan:跨了多少行

-headers:表示和这个单元格相关的th的id

-scope:row,col,rougroup,colgroup,auto

视频练习,课表

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>表格元素</title>
    <link rel="stylesheet" type="text/css" id="style">
</head>
<body>
<table border="2">
    <caption>课程表</caption>
    <colgroup>
        <col span="1" width="50">
        <col span="1" width="200">
        <col span="6" width="100">
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="3" scope="rowgroup">上午</th>
            <th scope="row">08:00~10:00</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <th scope="row">08:00~10:00</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <th scope="row">08:00~10:00</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <th rowspan="3" scope="rowgroup">下午</th>
            <th scope="row">08:00~10:00</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <th scope="row">08:00~10:00</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <th scope="row">08:00~10:00</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
    </tbody>
</table>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80719607