方法一：大致思想为细线设置表格border="0" cellspacing="1" cellpadding="0" bgcolor="#000"（边距为0，单元格之间的间隙为1，内容间隙为0，背景色调为黑色)，然后在行标签tr加入背景色白色，由此实现细线表格 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- table>tr*9>tb*8九行八列 --> <!-- 跨行合并单元格colspan --> <!-- cellspacing单元格与单元格之间的间距，cellpadding单元格内的文本内容与单元格边框之间的间距 --> <table border="0" width="760" align="center" cellspacing="1" cellpadding="0" bgcolor="#000"> <!--标题标签 --> <caption>课程表</caption> <tr bgcolor="#fff"> <th>日期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期天</th> </tr> <tr bgcolor="#fff" > <!-- &nbsp;html标签中的实体字符，代表一个空格 &emsp代表两个空格 --> <!-- rowspan合并列，4代表合并四列，需将另外三个标签（td）删除 --> <!-- colsoan="8"合并八行，删除其他八个td --> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <!-- rowspan合并列，4代表合并四列，需将另外三列标签删除 --> <td rowspan="4">上午</td> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="#fff"> <td colspan="8">&nbsp;</td> </tr> </table> </body> </html>

方法二：大致思想为给table添加class名，如何添加样式：border-collapse属性,表格的边框合并为一个边框(边框叠放)，border: 1px solid #000（让边线为1px）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .mytab{ width: 760px; margin: 0 auto; border-collapse属性,表格的边框合并为一个边框(边框叠放) border-collapse: collapse; } .mytab td,.mytab th{ padding-left: 5px; border: 1px solid #000; } </style> </head> <body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- table>tr*9>tb*8九行八列 --> <!-- 跨行合并单元格colspan --> <table class="mytab"> <!--标题标签 --> <caption>课程表</caption> <tr> <th>日期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期天</th> </tr> <tr> <!-- &nbsp;html标签中的实体字符，代表一个空格 &emsp代表两个空格 --> <!-- rowspan合并列，4代表合并四列，需将另外三个标签（td）删除 --> <!-- colsoan="8"合并八行，删除其他八个td --> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- rowspan合并列，4代表合并四列，需将另外三列标签删除 --> <td rowspan="4">上午</td> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>&nbsp;</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8">&nbsp;</td> </tr> </table> </body> </html> </body> </html>

代码演示：

202012291609228894163866