关于前端:05-HTML基础表格制作一张上课时间表

20次阅读

共计 1334 个字符，预计需要花费 4 分钟才能阅读完成。

如果不设置 css 款式，成果如下：

设置了 CSS 款式之后，成果如下：

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /* 为表格设置合并边框模型 */
            border-collapse: collapse; 
            /* 设置边框宽度 / 款式 / 色彩（三个都是可选的）*/
            border: 2px solid rgb(200,200,200);
            /* 字母间距 */
            letter-spacing: 2px;
            /* rem 是 CSS3 新增的一个属性，设置的是绝对大小，适宜最新版本的浏览器。*/
            font-size: 0.8rem;
        }
        td, th {border: 1px solid rgb(190,190,190);
            /* 高低是 10，左右是 20 */
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col span="2">
            <col style="background-color: #97DB9A;">
            <col>
            <col style="background-color: #97DB9A;">
            <col style="background-color: #dcc48e;border:4px solid #c1437a">
            <col style="width:42px">
            <col>
        </colgroup>
        <tr>
            <th>&nbsp;</th>
            <th>Mon</th>
            <th>Tues</th>
            <th>Wed</th>
            <th>Thurs</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
        <tr>
            <th>1st period</th>
            <td>English</td>
            <td></td>
            <td></td>
            <td>German</td>
            <td>Dutch</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>2st period</th>
            <td>English</td>
            <td>English</td>
            <td></td>
            <td>German</td>
            <td>Dutch</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>3st period</th>
            <td></td>
            <td>German</td>
            <td></td>
            <td>German</td>
            <td>Dutch</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>4st period</th>
            <td></td>
            <td>English</td>
            <td></td>
            <td>English</td>
            <td>Dutch</td>
            <td></td>
            <td></td>
        </tr>

    </table>
</body>
</html>

其中，每个 <col> 会制订每列的款式，对于第三列咱们没有采取任何款式，咱们仍要加一个空的<col>，colspan,rowspan,span 能够设置列和行的跨度。

正文完