If you do not set the CSS style, the effect is as follows:

With the CSS styles set, the effect looks like this:

The source code is as follows:

<! 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; /* Set border width/style/color (optional) */ border: 2px solid (200,200,200); /* spacing */ letter-spacing: 2px; /* REM is a new property in CSS3 that sets the relative size for the latest version of the browser. * / font - size: 0.8 rem; } TD, th {border: 1px solid (190,190,190); /* PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; } </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>

For the third column, we do not take any style, we still need to add an empty , colspan,rowspan,span to set the span of columns and rows.