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