Community Learn Tools Library Leisure
search
English
Home > List of blog posts > table标签用法
Blogger Information
Blog 18
fans 0
comment 2
visits 10427
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
table标签用法
go0
Original
851 people have browsed it

使用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>

课程表

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post