如果不设置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可以设置列和行的跨度。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。