如果不设置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能够设置列和行的跨度。