Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 20200929作业-表格行列合并涉及属性以及案例
Blogger Information
Blog 11
fans 0
comment 0
visits 10895
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
20200929作业-表格行列合并涉及属性以及案例
山下之石
Original
669 people have browsed it

表格中的行与列合同涉及哪些属性并完成案例

1 涉及属性

涉及两个属性

  • colspan
  • rowspan

行列合并案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格行列合并案例</title>
  7.     <link rel="stylesheet" href="css/style3.css" />
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       width="600"
  13.       height="200"
  14.       cellspacing="0"
  15.       cellpadding="5"
  16.       align="center"
  17.     >
  18.       <caption style="font-size: 1.5rem; margin-bottom: 10px">
  19.         商品信息表
  20.       </caption>
  21.       <!-- 表头 -->
  22.       <thead>
  23.         <tr bgcolor="lightblue" align="left">
  24.             <th colspan="7">高档白酒</th>
  25.         </tr>
  26.         <tr bgcolor="lightblue">
  27.           <th colspan=2>商品分类以及序号</th>
  28.           <th>品名</th>
  29.           <th>单价</th>
  30.           <th>单位</th>
  31.           <th>数量</th>
  32.           <th>金额</th>
  33.         </tr>
  34.       </thead>
  35.       <!-- 主体1 -->
  36.       <tbody>
  37.         <tr>
  38.           <td rowspan=3>酒类</td>
  39.           <td>A101</td>
  40.           <td>茅台</td>
  41.           <td>3500</td>
  42.           <td>瓶</td>
  43.           <td>1</td>
  44.           <td>3500</td>
  45.         </tr>
  46.         <tr>
  47.           <td>A102</td>
  48.           <td>五粮液</td>
  49.           <td>1300</td>
  50.           <td>瓶</td>
  51.           <td>2</td>
  52.           <td>2600</td>
  53.         </tr>
  54.         <tr>
  55.           <td>A103</td>
  56.           <td>古井贡</td>
  57.           <td>350</td>
  58.           <td>瓶</td>
  59.           <td>1</td>
  60.           <td>350</td>
  61.         </tr>
  63.         <tr bgcolor="lightblue" align="left">
  64.             <th colspan="7">食品百货</th>
  65.         </tr>
  67.         <tr>
  68.             <td rowspan=3>食品</td>
  69.             <td>B201</td>
  70.             <td>猪肉</td>
  71.             <td>30</td>
  72.             <td>斤</td>
  73.             <td>10</td>
  74.             <td>300</td>
  75.           </tr>
  76.           <tr>
  77.             <td>B303</td>
  78.             <td>牛肉</td>
  79.             <td>50</td>
  80.             <td>斤</td>
  81.             <td>5</td>
  82.             <td>250</td>
  83.           </tr>
  84.           <tr>
  85.             <td>C404</td>
  86.             <td>巧克力</td>
  87.             <td>50</td>
  88.             <td>盒</td>
  89.             <td>2</td>
  90.             <td>100</td>
  91.           </tr>
  93.       </tbody>
  96.   </body>
  97. </html>

2 案例效果：

table行列合并案例

Correcting teacher：天蓬老师天蓬老师

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