Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Html网页中表格的行与列的合并方法与案例演示
Blogger Information
Blog 3
fans 0
comment 0
visits 15923
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
13589 people have browsed it

HTML表格合并属性

一、列合并

在html表格合并中，如果需要用到多列合并成一列，可以使用表格自带属性“colspan”，该属性表示自设定属性的列开始向右合并多少列，比如需要合并3列，那么属性可以这样设置colspan="3"，需要注意的是不是写完属性就完事了，还需要把填写了属性之后的2列代码注释掉或者删除掉，这个稍后看下面示例代码；

二、行合并

在html中行的合并与列的合并其实都是类似的，唯一有区别的就是所使用的属性不同，行合并我们使用的是“rowspan”属性，用法也是跟上面一样，比如我需要向下合并4行表格，那么属性可以这样设置rowspan="4"，要注意的事项也跟列合并一样，需要注释或删除合并到的表格代码部分。

html表格行、列合并示例

  • 我们以平时常见的工资表作为示例来写一个表格，先看下图实际效果;
    雄讯网络html工资表
  • 上代码，直接复制到本地可直接运行看到效果
    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. </head>
    8. <body>
    9.   <table width="1000" align="center" border="1" cellspacing="0" cellpadding="5" height="200"
    10.   >
    11.     <!-- 表格标题 -->
    12.     <caption style="font-size: 1.5rem; margin-bottom: 10px">
    13.       雄讯网络九月份工资表
    14.     </caption>
    15.     <!-- 表格头部 -->
    16.     <thead>
    17.       <tr>
    18.         <!-- 行合并 向下合并3行-->
    19.         <th rowspan="3">编号</th>
    20.         <!-- 行合并 向下合并3行-->
    21.         <th rowspan="3">姓名</th>
    22.         <!-- 行合并 向下合并3行-->
    23.         <th rowspan="3">基本工资</th>
    24.         <!-- 列合并 向右合并4列-->
    25.         <th colspan="4">加班工资</th>
    26.         <!-- 合并的列要注释或者删除，不然表格会错位变形，一下注释掉代码均为合并后多余的代码 -->
    27.         <!-- <th>加班工资</th>
    28.         <th>加班工资</th>
    29.         <th>加班工资</th> -->
    30.         <th rowspan="3">奖金</th>
    31.         <th colspan="4">扣除金额</th>
    32.         <!-- <th>扣除金额</th>
    33.         <th>扣除金额</th>
    34.         <th>扣除金额</th> -->
    35.         <th rowspan="3">实发工资</th>
    36.         <th rowspan="3">员工签字</th>
    37.       </tr>
    38.       <tr>
    39.         <!-- <th>编号</th> -->
    40.         <!-- <th>姓名</th> -->
    41.         <!-- <th>基本工资</th> -->
    42.         <th colspan="2">平时工资</th>
    43.         <!-- <th>平时工资</th> -->
    44.         <th colspan="2">周末加班</th>
    45.         <!-- <th>周末加班</th> -->
    46.         <!-- <th>奖金</th> -->
    47.         <th rowspan="2">养老保险</th>
    48.         <th rowspan="2">医疗保险</th>
    49.         <th rowspan="2">失业保险</th>
    50.         <th rowspan="2">其他</th>
    51.         <!-- <th>实发工资</th>
    52.         <th>员工签名</th> -->
    53.       </tr>
    54.       <tr>
    55.         <!-- <th>编号</th> -->
    56.         <!-- <th>姓名</th> -->
    57.         <!-- <th>基本工资</th> -->
    58.         <th>时间</th>
    59.         <th>工资</th>
    60.         <th>时间</th>
    61.         <th>工资</th>
    62.         <!-- <th>奖金</th> -->
    63.         <!-- <th>养老保险</th> -->
    64.         <!-- <th>医疗保险</th> -->
    65.         <!-- <th>失业保险</th> -->
    66.         <!-- <th>其他</th> -->
    67.         <!-- <th>实发工资</th>
    68.         <th>员工签名</th> -->
    69.       </tr>
    70.     </thead>
    71.     <!-- 表格主体内容 -->
    72.     <tbody>
    73.       <tr>
    74.         <!-- 整行14列一起合并 -->
    75.         <td colspan="14" align="center">由于是演示，我数据全部做成一样了</td>
    76.       </tr>
    77.       <tr>
    78.         <td>1</td>
    79.         <td>雄雄</td>
    80.         <td>1800</td>
    81.         <td>10</td>
    82.         <td>200</td>
    83.         <td>8</td>
    84.         <td>240</td>
    85.         <td>600</td>
    86.         <td>320</td>
    87.         <td>120</td>
    88.         <td>60</td>
    89.         <td>0</td>
    90.         <td>3310</td>
    91.         <td></td>
    92.       </tr>
    93.       <tr>
    94.         <td>2</td>
    95.         <td>雄雄</td>
    96.         <td>1800</td>
    97.         <td>10</td>
    98.         <td>200</td>
    99.         <td>8</td>
    100.         <td>240</td>
    101.         <td>600</td>
    102.         <td>320</td>
    103.         <td>120</td>
    104.         <td>60</td>
    105.         <td>0</td>
    106.         <td>3310</td>
    107.         <td></td>
    108.       </tr>
    109.       <tr>
    110.         <td>3</td>
    111.         <td>雄雄</td>
    112.         <td>1800</td>
    113.         <td>10</td>
    114.         <td>200</td>
    115.         <td>8</td>
    116.         <td>240</td>
    117.         <td>600</td>
    118.         <td>320</td>
    119.         <td>120</td>
    120.         <td>60</td>
    121.         <td>0</td>
    122.         <td>3310</td>
    123.         <td></td>
    124.       </tr>
    125.       <tr>
    126.         <td>4</td>
    127.         <td>雄雄</td>
    128.         <td>1800</td>
    129.         <td>10</td>
    130.         <td>200</td>
    131.         <td>8</td>
    132.         <td>240</td>
    133.         <td>600</td>
    134.         <td>320</td>
    135.         <td>120</td>
    136.         <td>60</td>
    137.         <td>0</td>
    138.         <td>3310</td>
    139.         <td></td>
    140.       </tr>
    141.       <tr>
    142.         <td>5</td>
    143.         <td>雄雄</td>
    144.         <td>1800</td>
    145.         <td>10</td>
    146.         <td>200</td>
    147.         <td>8</td>
    148.         <td>240</td>
    149.         <td>600</td>
    150.         <td>320</td>
    151.         <td>120</td>
    152.         <td>60</td>
    153.         <td>0</td>
    154.         <td>3310</td>
    155.         <td></td>
    156.       </tr>
    157.     </tbody>
    158.   </table>
    159. </body>
    160. </html>

    结语：

    表格在我们日常工作中是比较常见且常用的，所以html表格的制作掌握是必须的，行合并与列合并更是重中之重，本文分别通过“rowspan”和“colspan”两个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