2、基于表格实现课程表 - HTML

首页 > 博客列表 > 2、基于表格实现课程表

博主信息

博文 5

粉丝 0

访问量 4181

专题推荐

更多>

1、表格常用标签以及释义

<table></table>
- 定义表格的标签
<caption></caption>
- 表格的标题
<thead></thead>
- <thead> 标签用于组合 HTML 表格的表头内容。
- <thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。
- <thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
<tbody></tbody>
- <tbody> 标签用于组合 HTML 表格的主体内容。
<tfoot>
- <tfoot> 标签用于组合 HTML 表格的页脚内容。
<th></th>
- 表头单元格，具有居中、加粗的效果
<tr></tr>
- 定义行
<td></td>
- 标准单元格

注：

<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。

2、行和列的合并

①、水平方向

属性名：colspan，默认会往右侧合并

注意：当前单元格同行右侧的<td>，需要删除否则会被挤出去。

例如：colspan=3，则需要删除右侧的3个<td>，

②、垂直方向

属性名：rowspan，默认会往下方进行合并

注意：当前单元格下行的<td>需要删除

例如：rowspan=3，当前行下方的3个<tr>中都需要删除一个<td>

3、常用属性

border
- 边框
cellspacing=”0”
- 表格的边框间距为0
cellpadding=”5”
- 表格的padding间距
width
align

4、表格使用课程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
    <style>
        th{
            background-color: lightgrey;
        }
        td{
            text-align: center;
        }
        .time{
            background-color: lightblue;
        }
        tfoot:nth-of-type(1){
            background-color: lightgrey;
        }
    </style>
</head>
<body>
    <table border="1px" cellspacing="0px" cellpadding="0px" width="400px">
        <caption style="margin-bottom: 5px;"><strong>课程表</strong></caption>
        <thead>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4" class="time">上午</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
        </tbody>
        <tr>
            <td colspan="6">
                中午休息
            </td>
        </tr>
        <tbody>
            <tr>
                <td rowspan="3" class="time">下午</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>体育</td>
                <td>数学</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="5">每天下午15:30-17:30在校写完作业才能回家</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：代码附上运行效果图

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1、HTML基础：文档描述和文档结构

2022-03-21 19:25:42