Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 在html文档里编写一个简易的表格
Blogger Information
Blog 3
fans 0
comment 0
visits 2617
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
在html文档里编写一个简易的表格
华强
Original
1619 people have browsed it

今日学习知识

  • html里的标签是元素的功能。
  • 属性是元素的特征。
  • 布局元素：由页眉，页体，页脚三部分组成。
  • 列表元素：<ul><li></li></ul>为无序列表。
    <ol><li></li></ol>为有序列表，一般开发时每行列表都会加上<a>标签来添加一个超链接。
  • 图文列表：同理在上面的标签里面再加入一个<img>标签并把属性设置成图片的地址。
  • 以及如何制作一个表格。

下面是我写的表格代码以及成品图

  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. </head>
  9. <body>
  10.     <br>
  11.     <br>
  12.     <br>
  13.     <br>
  14.         <table border="1" cellspacing="0" cellpadding="0" width="80%">
  15.         <!-- 标题 -->
  16.         <caption>
  17.             商品信息表
  18.         </caption>
  19.         <!-- 表头 -->
  20.         <thead bgcolor="burlywood">
  21.             <tr>
  22.                 <th>id</th>
  23.                 <th>品类</th>
  24.                 <th>商品</th>
  25.                 <th>数量</th>
  26.                 <th>单价</th>
  27.                 <th>总计</th>
  28.             </tr>
  29.         </thead>
  30.         <!-- 表体 -->
  31.         <tbody align="center">
  32.             <tr bgcolor="aquamarine">
  33.                 <td>1</td>
  34.                 <td rowspan="2">水果</td>
  35.                 <td>香蕉</td>
  36.                 <td>2</td>
  37.                 <td>5元</td>
  38.                 <td>10元</td>
  39.             </tr>
  40.             <tr bgcolor="aquamarine">
  41.                 <td>2</td>
  42.                 <!-- <td>水果</td> -->
  43.                 <td>草莓</td>
  44.                 <td>5</td>
  45.                 <td>2元</td>
  46.                 <td>10元</td>
  47.             </tr>
  48.             <tr bgcolor="darkkhaki">
  49.                 <td>3</td>
  50.                 <td rowspan="2">日用品</td>
  51.                 <td>牙刷</td>
  52.                 <td>4</td>
  53.                 <td>6元</td>
  54.                 <td>24元</td>
  55.             </tr>
  56.             <tr bgcolor="darkkhaki">
  57.                 <td>4</td>
  58.                 <!-- <td>日用品</td> -->
  59.                 <td>牙膏</td>
  60.                 <td>8</td>
  61.                 <td>10元</td>
  62.                 <td>80元</td>
  63.             </tr>
  65.         </tbody>
  66.         <tbody align="center">
  67.             <tr>
  68.                 <td bgcolor="darkorchid">5</td>
  69.                 <td colspan="4" bgcolor="darkgrey"></td>
  70.                 <td bgcolor="darkorchid">124元</td>
  71.             </tr>
  72.         </tbody>
  73.         <!-- 表尾部 -->
  74.         <tfoot bgcolor="burlywood">
  75.             <tr>
  76.                 <th colspan="6">
  77.                     表格制作于2021年6月29日
  78.                 </th>
  79.             </tr>
  80.         </tfoot>
  81.         </table>
  82. </body>
  83. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：在代码69行填上内容的话(总金额)，会更加完美
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