<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>课程表</title> <style> table{/*设置外部相关属性,不要设置内部属性*/ width: 500px; height: 300px; border: 3px black solid; margin: 100px auto; /*padding: 20px;*/ border-collapse: collapse;/*合并边框属性 ，使边框之间没有间距*/ } td,th{/*设置内部相关属性,不要设置外部属性*/ border: 1px black solid; padding: 0px 22px; /*padding: 20px;*/ /*margin: 20px;*/ } .td1{ background: #A9A9A9; font-weight: bold; } th{ background: brown; font-size:20px; color: aliceblue; } </style> </head> <body> <table><!--table是块状元素的--> <tr><!--使用th会使12345加粗并居中--> <th colspan="6">课程表</th><!--和并列即是合并的是将6列合为1列使用colspan--> <!--<th>2</th> <th>3</th> <th>4</th> <th>5</th>--> </tr> <tr> <td class="td1"></td> <td class="td1">周一</td> <td class="td1">周二</td> <td class="td1">周三</td> <td class="td1">周四</td> <td class="td1">周五</td> </tr> <tr> <td rowspan="2" class="td1">上午</td><!--合并行使用rowspan，这是合并两行--> <td>数学</td> <td>语文</td> <td>外语</td> <td>体育</td> <td>历史</td> </tr> <tr> <td>数学</td> <td>语文</td> <td>外语</td> <td>体育</td> <td>历史</td> </tr> <tr> <td rowspan="2" class="td1">下午</td><!--合并行使用rowspan--> <td>数学</td> <td>语文</td> <td>外语</td> <td>体育</td> <td>历史</td> </tr> <tr> <td>数学</td> <td>语文</td> <td>外语</td> <td>体育</td> <td>历史</td> </tr> </table> </body> </html>
结果：
原文：https://www.cnblogs.com/lsm-boke/p/10631944.html