search

博客列表 >0704表格的使用 和列表导航图片链接

0704表格的使用 和列表导航图片链接

杨雨辰
杨雨辰原创
2022年07月21日 23:11:31378浏览

表格的使用 colspan rowspan合并表格

  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" />
  8.     <title>课程表</title>
  9.   </head>
  10.   <body>
  11.     <table border="1" width="600" cellpadding="1">
  12.       <caption>
  13.         课程表
  14.       </caption>
  15.       <br />
  17.       <th colspan="2">课程时间</th>
  18.       <th>科目</th>
  19.       <th>科目</th>
  20.       <th>科目</th>
  21.       <th>科目</th>
  22.       <th>科目</th>
  23.       <th>科目</th>
  25.       <tr>
  26.         <td colspan="2" rowspan="3">上午</td>
  27.         <td>XX课</td>
  28.         <td>XX课</td>
  29.         <td>XX课</td>
  30.         <td>XX课</td>
  31.         <td>XX课</td>
  32.         <td>XX课</td>
  33.         <!-- <td>课</td> -->
  34.       </tr>
  35.       <tr>
  36.         <td>XX课</td>
  37.         <td>XX课</td>
  38.         <td>XX课</td>
  39.         <td>XX课</td>
  40.         <td>XX课</td>
  41.         <td>XX课</td>
  42.         <!-- <td>课</td> -->
  43.         <!-- <td>课</td> -->
  44.       </tr>
  45.       <tr>
  46.         <td>XX课</td>
  47.         <td>XX课</td>
  48.         <td>XX课</td>
  49.         <td>XX课</td>
  50.         <td>XX课</td>
  51.         <td>XX课</td>
  52.         <!-- <td>课</td> -->
  53.         <!-- <td>课</td> -->
  54.       </tr>
  55.       <tr>
  56.         <td colspan="8" bgcolor="yellow">午休时间</td>
  57.         <!-- <td>课</td>
  58.           <td>课</td>
  59.           <td>课</td>
  60.           <td>课</td>
  61.           <td>课</td>
  62.           <td>课</td>
  63.           <td>课</td> -->
  64.       </tr>
  65.       <tr>
  66.         <td colspan="2" rowspan="3" style="content">下午</td>
  67.         <td>XX课</td>
  68.         <td>XX课</td>
  69.         <td>XX课</td>
  70.         <td>XX课</td>
  71.         <td>XX课</td>
  72.         <td>XX课</td>
  73.         <!-- <td>课</td> -->
  74.       </tr>
  75.       <tr>
  76.         <td>XX课</td>
  77.         <td>XX课</td>
  78.         <td>XX课</td>
  79.         <td>课</td>
  80.         <td>课</td>
  81.         <td>课</td>
  82.         <!-- <td>课</td> -->
  83.         <!-- <td>课</td> -->
  84.       </tr>
  85.       <tr>
  86.         <td>课</td>
  87.         <td>课</td>
  88.         <td>课</td>
  89.         <td>课</td>
  90.         <td>课</td>
  91.         <td>课</td>
  92.         <!-- <td>课</td> -->
  93.         <!-- <td>课</td> -->
  94.       </tr>
  95.     </table>
  96.   </body>
  97. </html>

课程表

导航列表跳转链接

  1.  <ul>
  2.       <li>
  3.         <a href="http://baidu.com"
  4.           ><img
  5.             src="https://files.codelife.cc/itab/search/baidu.svg"
  6.             alt="11"
  7.           />跳转百度</a
  8.         >
  9.       </li>
  10.       <li>
  11.         <a href="http://baidu.com"
  12.           ><img
  13.             src="https://files.codelife.cc/itab/search/baidu.svg"
  14.             alt="22"
  15.           />跳转百度</a
  16.         >
  17.       </li>
  18.       <li>
  19.         <a href="http://baidu.com"
  20.           ><img
  21.             src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1658509200&t=55600cf5fe91a0811929ff0ad79fad3b"
  22.             alt="22"
  23.           />跳转百度</a
  24.         >
  25.       </li>
  26.     </ul>
上一条：Js常用数据类型与分支循环实例演示下一条：js函数类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议