Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 导航组件和表格元素
Blogger Information
Blog 19
fans 0
comment 0
visits 8297
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
导航组件和表格元素
Wu.Ang
Original
321 people have browsed it

导航组件和表格元素

导航组件

列表

ul>li : 无序列表

ol>li : 有序列表

dl>dt+dd : 自定义列表

链接

<a href="" target="_blank"></a>

href=”” 链接地址,如果链接无法识别自动下载

target=”_blank”新标签页打开链接,默认_self当前页面跳转

图片

<img src="" alt="">

src图片路径
alt图片备注

表格

  1. <table>
  2.     <!-- 标题 -->
  3.     <caption></caption>
  4.     <thead>
  5.         <tr>
  6.           <th></th>
  7.         </tr>
  8.     </thead>
  9.     <tbody>
  10.         <tr>
  11.           <td></td>
  12.         </tr>
  13.     </tbody>
  14.     <tfoot>
  15.         <tr>
  16.             <td></td>
  17.         </tr>
  18.     </tfoot> 
  19. </table>

跨行合并表格 rowspan=”x”

跨列合并表格 colspan=”x”

导航组件

列表

ul>li : 无序列表

ol>li : 有序列表

dl>dt+dd : 自定义列表

链接

<a href="" target="_blank"></a>

href=”” 链接地址,如果链接无法识别自动下载

target=”_blank”新标签页打开链接,默认_self当前页面跳转

图片

<img src="" alt="">

src图片路径
alt图片备注

导航组件

导航组件

表格

  1. <table>
  2.     <!-- 标题 -->
  3.     <caption></caption>
  4.     <thead>
  5.         <tr>
  6.           <th></th>
  7.         </tr>
  8.     </thead>
  9.     <tbody>
  10.         <tr>
  11.           <td></td>
  12.         </tr>
  13.     </tbody>
  14.     <tfoot>
  15.         <tr>
  16.             <td></td>
  17.         </tr>
  18.     </tfoot> 
  19. </table>

跨行合并表格 rowspan=”x”

跨列合并表格 colspan=”x”

border-collapse: collapse;去除重复边框

课程表

课程表

  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>课程表</title>
  8.     <style>
  9.         table{
  10.             width: 600px;
  11.             height: 500px;
  12.             border: 1px solid black;
  13.             text-align:center;
  14.             /* 去除边框重复 */
  15.             border-collapse: collapse;
  16.         }
  17.         th{
  18.             width: 100px;
  19.             height: 30px;
  20.             border: 1px solid black;
  21.         }
  22.         td{
  23.             border: 1px solid black;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <table>
  29.         <!-- 标题 -->
  30.         <caption><h3>课程表</h3></caption>
  31.         <!-- 表头 -->
  32.         <thead>
  33.             <tr>
  34.                 <th> </th>
  35.                 <th>节次</th>
  36.                 <th>星期一</th>
  37.                 <th>星期二</th>
  38.                 <th>星期三</th>
  39.                 <th>星期四</th>
  40.                 <th>星期五</th>
  41.             </tr>
  42.         </thead>
  43.         <!-- 内容 -->
  44.         <tbody>
  45.             <tr>
  46.                 <!-- rowspan 跨行合并表格 -->
  47.                 <td rowspan="4">上午</td>
  48.                 <td>第1节</td>
  49.                 <td></td>
  50.                 <td></td>
  51.                 <td></td>
  52.                 <td></td>
  53.                 <td></td>
  54.             </tr>
  55.             <tr>
  56.                 <td>第2节</td>
  57.                 <td></td>
  58.                 <td></td>
  59.                 <td></td>
  60.                 <td></td>
  61.                 <td></td>
  62.             </tr>
  63.             <tr>
  64.                 <td>第3节</td>
  65.                 <td></td>
  66.                 <td></td>
  67.                 <td></td>
  68.                 <td></td>
  69.                 <td></td>
  70.             </tr>
  71.             <tr>
  72.                 <td>第4节</td>
  73.                 <td></td>
  74.                 <td></td>
  75.                 <td></td>
  76.                 <td></td>
  77.                 <td></td>
  78.             </tr>
  79.             <tr>
  80.                 <!-- colspan:跨列合并表格 -->
  81.                 <td colspan="7">午休</td>
  82.             </tr>
  83.             <tr>
  84.                 <td rowspan="4">下午</td>
  85.                 <td>第5节</td>
  86.                 <td></td>
  87.                 <td></td>
  88.                 <td></td>
  89.                 <td></td>
  90.                 <td></td>
  91.             </tr>
  92.             <tr>
  93.                 <td>第6节</td>
  94.                 <td></td>
  95.                 <td></td>
  96.                 <td></td>
  97.                 <td></td>
  98.                 <td></td>
  99.             </tr>
  100.             <tr>
  101.                 <td>第7节</td>
  102.                 <td></td>
  103.                 <td></td>
  104.                 <td></td>
  105.                 <td></td>
  106.                 <td></td>
  107.             </tr>
  108.             <tr>
  109.                 <td>第8节</td>
  110.                 <td></td>
  111.                 <td></td>
  112.                 <td></td>
  113.                 <td></td>
  114.                 <td></td>
  115.             </tr>
  116.         </tbody>
  117.     </table>
  118. </body>
  119. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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