有没有好的思路实现下图的表格?

作者站长头像
站长
· 阅读数 7

如图,不采用div一个个格子画的话,有没有什么优雅的实现方式有没有好的思路实现下图的表格?

回复
1个回答
avatar
test
2024-06-28

html画一个:举个例子

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>html中表格</title>
 </head>
 <body>
 <table border="1" width="800" align="center" cellpadding="10" cellspacing="0">
 <!--    标题-->
     <caption><h2>某小学一年级(三班)课程表</h2></caption>
 <!--    表头-->
     <thead>
     <tr bgcolor="#90ee90">
         <th>星期</th>
         <th>星期一</th>
         <th>星期二</th>
         <th>星期三</th>
         <th>星期四</th>
         <th>星期五</th>
     </tr>
     </thead>
     
 <!--    主体-->
     <tbody align="center">
     <tr>
         <td rowspan="3" bgcolor="#f5deb3">上午<br>8:00 - 11:30</td>
         <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>语文</td>
         <td>数学</td>
         <td>美术</td>
         <td>体育</td>
         <td>音乐</td>
     </tr>

     <tr>
         <td rowspan="2" bgcolor="#e0ffff">下午<br>13:30 - 15:30</td>
         <td>语文</td>
         <td>数学</td>
         <td>美术</td>
         <td>体育</td>
         <td>音乐</td>
     </tr>
     <tr>
 
         <td>语文</td>
         <td>数学</td>
         <td>美术</td>
         <td>体育</td>
         <td>音乐</td>
     </tr>
     </tbody>
 
     <tfoot align="center">
     <tr bgcolor="#d3d3d3">
         <td>备注:</td>
         <td colspan="5">周未家长应该多些时间陪同孩子学习</td>
     </tr>
     </tfoot>
 </table>
 </body>
 </html>

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容