Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

HTML中的table标签制作表格

情自阑珊(lipeng) 2019-11-08 20:24:00 阅读数:9 评论数:0 点赞数:0 收藏数:0

HTML中有一个重要的标签table,常用于构建表格,如果你要用HTML做一张课表,那么它的table标签就可以大显身手了。下面分享出一份某小学生课表的完整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>

代码运行结果如下图所示:

 

版权声明
本文为[情自阑珊(lipeng)]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/wanna-lipeng/p/11823071.html