1.表格的基本标记——table、tr、td
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）
行：表格中的水平间隔；
列：表格中的垂直间隔；
单元格：表格中行与列相交所产生的区域。
步骤1.简单的分析图片，然后创建表格，这里应该创建一个五行六列的表格
<!Doctype HTML> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
步骤2.创建完表格，然后就根据要求去插入文字，做一个简单的排版。
table标签中的border属性表示边框外围的粗细值 solid属性可以控制边框的颜色 background-color可以改变单元格的颜色。
示例代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> table { border: 3px solid #ccc; border-collapse: collapse; margin: 0 auto; text-align: center; } td { border: 3px solid #ccc; height: 100px; } .a { background-color:greenyellow; } .b { background-color:greenyellow; } </style> </head> <body> <table> <tr> <td></td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> <tr class="a"> <td>第一二节</td> <td></td> <td>人工智能与应用<br />徐国清<br />G计算机1903</td> <td>企业网站综合实训<br />付显<br />G计算机1903</td> <td>信息安全<br />华隆<br />G计算机1903</td> <td></td> </tr> <tr> <td>第三四节</td> <td>形势与政策9<br />赵国峰<br />G计算机1903</td> <td></td> <td></td> <td>前端框架技术<br />岳小兵<br />G计算机1903</td> <td>计算机网络基础<br />任海留洋<br />G计算机1903</td> </tr> <tr class="b"> <td>第五六节</td> <td>企业网站综合实训<br />付显<br />G计算机1903</td> <td></td> <td></td> <td>影视编辑与合成<br />庞士昱<br />G计算机1903</td> <td></td> </tr> <tr> <td>第七八节</td> <td></td> <td></td> <td></td> <td></td> <td>影视编辑与合成<br />庞士昱<br />G计算机1903</td> </tr> </table> </body> </html>
效果图如下：
