简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML表格标签及合并行列使用
Blogger Information
Blog 4
fans 0
comment 0
visits 3011
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表格标签及合并行列使用
worldexecuteme
Original
1315 people have browsed it

HTML的表格结构

  1. 标题：caption
  2. 表头：thead
  3. 表格主体：tbody
  4. 表格页脚：tfoot

常用属性

html中的属性的的结构是名值对结构，值一般放在双引号和单引号中。

  • border=”1” :当以表格外边框
  • cellspacing:定义表格之间的间距
  • cellpanding：定义表格内容，内边距
  • rowspan：跨行合并
  • colspan：跨列合并

表格行列合并

  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>Document</title>
  8. </head>
  9. <body>
  10.     <table border="1" cellpandding cellspacing="0">
  11.         <caption>手机产品管理</caption>
  12.         <thead>
  13.             <tr>
  14.                 <th>id</th>
  15.                 <th>产品名称</th>
  16.                 <th>产品数量</th>
  17.                 <th>产品售价</th>
  18.                 <th>产品类别</th>
  19.             </tr>
  20.         </thead>
  21.         <tbody>
  22.             <tr>
  23.                 <td>0001</td>
  24.                 <td>RedMi K40</td>
  25.                 <td>20</td>
  26.                 <td>2400</td>
  27.                 <td rowspan="4">手机</td>
  28.             </tr>
  29.             <tr>
  30.                 <td>0002</td>
  31.                 <td>RedMi K40游戏增强版</td>
  32.                 <td>30</td>
  33.                 <td>2200</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>0003</td>
  37.                 <td>Mi 10</td>
  38.                 <td>30</td>
  39.                 <td>3200</td>
  40.             </tr>
  41.             <tr>
  42.                 <td>0004</td>
  43.                 <td>Mi 11</td>
  44.                 <td>30</td>
  45.                 <td>4100</td>
  46.             </tr>
  47.         </tbody>
  48.         <tfoot>
  49.             <tr style="background-color: aqua;">
  50.                 <td>合计</td>
  51.                 <td colspan="2" align="center">总价：5000000</td>
  52.                 <td colspan="2" align="center">总数：500</td>
  53.             </tr>
  54.         </tfoot>
  55.     </table>
  56. </body>
  57. </html>

浏览器运行结果

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！