需求
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>day02/05-表格-基本布局.html</title> </head> <body> <!-- 标签：table 嵌套 tr，tr 嵌套 td ／th。 tr table row 表格的行 td table data cell 表格数据单元格 th table header cell 表格头部单元格 table标签属性 border：规定表格边框的宽度,如果只设置这个属性会有两条边框线组成 一条是table的边框线，一条是每个td的边框线 style="border-collapse: collapse;" 设置2条边框线折叠 width：规定表格的宽度, width="60%"这里父标签是body，所以占body的60% align: center 让表格在父标签中居中 table的完整组成分成3部分（了解），这些标签可有可无 thead表格头部表格头部内容 tbody表格主体主要内容区域 tfoot表格底部汇总信息区域 --> <table border="1px" style="border-collapse: collapse;" width="60%" align="center"> <thead> <!-- 表头行 --> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <!-- 数据第一行 --> <tr> <td>张三</td> <td>99</td> <td>100</td> <td>199</td> </tr> <!-- 数据第二行 --> <tr> <td>李四</td> <td>98</td> <td>100</td> <td>198</td> </tr> </tbody> <tfoot> <!-- 数据第三行(总结行) --> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </tfoot> </table> </body> </html>
