Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 自主练习3_细说表格（直播跟练版）
Blogger Information
Blog 7
fans 0
comment 0
visits 2659
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
自主练习3_细说表格（直播跟练版）
柏拉图
Original
681 people have browsed it

表格的属性和标签如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>细说表格</title>
  9. </head>
  11. <body>
  13.     <table border="1" style="background-color: lightsalmon;">
  14.         <!-- 标题（可选） -->
  15.         <caption style="background-color: lightblue;">
  16.             购物车
  17.         </caption>
  19.         <!-- 表头 -->
  20.         <thead>
  21.             <tr>
  22.                 <th>分类</th>
  23.                 <th>ID</th>
  24.                 <th>品名</th>
  25.                 <th>单价</th>
  26.                 <th>数量</th>
  27.                 <th>金额</th>
  28.             </tr>
  29.         </thead>
  31.         <!-- 表体（必选），浏览器自动生成,一个表格可以有多个tbody,但是只能有一个thead -->
  32.         <tbody>
  33.             <!-- 先写tr，创建一个新行（单元格的容器） -->
  34.             <tr>
  35.                 <!-- td:单元格，数据存放的地方 -->
  36.                 <!-- yd,th都是单元格，th有预置样式：加粗和居中 -->
  38.                 <!-- 前三行的第一列，需要做个跨行的合并 -->
  39.                 <!-- 跨行合并： -->
  40.                 <!-- 合并属性 rowspan/colspan,必须写到td,th中 -->
  42.                 <td rowspan="3">数码</td>
  43.                 <th>5010</th>
  44.                 <td>电脑</td>
  45.                 <td>9000</td>
  46.                 <td>2</td>
  47.                 <td>18000</td>
  48.             </tr>
  50.             <tr>
  51.                 <!-- <td>数码</td> -->
  52.                 <th>5012</th>
  53.                 <td>手机</td>
  54.                 <td>5000</td>
  55.                 <td>4</td>
  56.                 <td>20000</td>
  57.             </tr>
  59.             <tr>
  60.                 <!-- <td>数码</td> -->
  61.                 <th>5013</th>
  62.                 <td>相机</td>
  63.                 <td>50000</td>
  64.                 <td>4</td>
  65.                 <td>20000</td>
  66.             </tr>
  68.             <tr>
  69.                 <td rowspan="2">服装</td>
  70.                 <th>3030</th>
  71.                 <td>男装</td>
  72.                 <td>500</td>
  73.                 <td>2</td>
  74.                 <td>1000</td>
  75.             </tr>
  77.             <tr>
  78.                 <!-- <td>服装</td> -->
  79.                 <th>3030</th>
  80.                 <td>女装</td>
  81.                 <td>300</td>
  82.                 <td>5</td>
  83.                 <td>6000</td>
  84.             </tr>
  86.         </tbody>
  88.         <!-- 表尾 -->
  89.         <tfoot>
  90.             <tr>
  91.                 <!-- 水平方向合并/列合并：colspan -->
  92.                 <th colspan="4">总计：</th>
  93.                 <th>15</th>
  94.                 <th>74000</th>
  95.             </tr>
  96.         </tfoot>
  97.     </table>
  98.     <br />
  99.     <button>结算</button>
  101. </body>
  103. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：要是加上运行结果图就好了，记得在https://www.php.cn/member/courses/work.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