search

博客列表 >table标签用法

table标签用法

go0
go0原创
2021年12月23日 16:56:17852浏览

使用table标签制作课程表

基本结构

  1. <table>
  2.     <caption>标题</caption>
  3.     <thead>表格第一行/表头</thead>
  4.     <tbody></tbody>
  5.     <tfooter></tfooter>
  6. </table>

水平合并单元格

使用的是colspan=“3”这样的属性，column是列，列的合并，所以是水平的。

垂直合并单元格

使用的是rowspan=”3”。下面是做课程表的例子。

课程表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <table width="800" border="1" align="center">
  11.       <caption>
  12.         学习日程表
  13.       </caption>
  14.       <thead align="center" bgcolor="#f8edd1">
  15.         <tr>
  16.           <th>时间</th>
  17.           <th>周1</th>
  18.           <th>周2</th>
  19.           <th>周3</th>
  20.           <th>周4</th>
  21.           <th>周5</th>
  22.           <th>周6</th>
  23.           <th>周7</th>
  24.         </tr>
  25.       </thead>
  26.       <tbody align="center">
  27.         <tr>
  28.           <td>8:20-10:00</td>
  29.           <td></td>
  30.           <td></td>
  31.           <td></td>
  32.           <td></td>
  33.           <td rowspan="2">C++</td>
  34.           <td></td>
  35.           <td></td>
  36.         </tr>
  37.         <tr>
  38.           <td>10:20-12:00</td>
  39.           <td></td>
  40.           <td></td>
  41.           <td></td>
  42.           <td></td>
  43.           <td></td>
  44.           <td></td>
  45.         </tr>
  46.         <tr>
  47.           <td colspan="8" bgcolor="silver" align="center">午饭，午觉</td>
  48.         </tr>
  49.         <tr>
  50.           <td>14:20-16:00</td>
  51.           <td></td>
  52.           <td rowspan="2" bgcolor="#983">Java</td>
  53.           <td></td>
  54.           <td></td>
  55.           <td></td>
  56.           <td></td>
  57.           <td></td>
  58.         </tr>
  59.         <tr>
  60.           <td>16:20-18:00</td>
  61.           <td>1</td>
  62.           <td>2</td>
  63.           <td>3</td>
  64.           <td>4</td>
  65.           <td>5</td>
  66.           <td>6</td>
  67.         </tr>
  68.         <tr align="center">
  69.           <td colspan="8" bgcolor="#c0c0c0">晚饭，打篮球</td>
  70.         </tr>
  71.         <tr>
  72.           <td>19:30-21:30</td>
  73.           <td bgcolor="b8dea3">学习PHP</td>
  74.           <td bgcolor="b8dea3">学习PHP</td>
  75.           <td bgcolor="b8dea3">学习PHP</td>
  76.           <td bgcolor="b8dea3">学习PHP</td>
  77.           <td bgcolor="b8dea3">学习PHP</td>
  78.           <td>shopping</td>
  79.           <td>shopping</td>
  80.         </tr>
  81.         <tr>
  82.           <td colspan="8" bgcolor="silver" align="center">玩游戏，睡觉</td>
  83.         </tr>
  84.       </tbody>
  85.       <tfoot>
  86.         <tr>
  87.           <td colspan="8" align="center" bgcolor="black">
  88.             <font color="white">漫 漫 长 夜</font>
  89.           </td>
  90.         </tr>
  91.       </tfoot>
  92.     </table>
  93.   </body>
  94. </html>

课程表

上一条：html 做的课程表 及用户提交表单下一条：课程表和用户注册
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多