亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 3
粉絲 0
評(píng)論 0
訪問(wèn)量 18908
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Html網(wǎng)頁(yè)中表格的行與列的合并方法與案例演示
笑納百川
原創(chuàng)
15521人瀏覽過(guò)

HTML表格合并屬性

一、列合并

在html表格合并中，如果需要用到多列合并成一列，可以使用表格自帶屬性“colspan”，該屬性表示自設(shè)定屬性的列開(kāi)始向右合并多少列，比如需要合并3列，那么屬性可以這樣設(shè)置colspan="3"，需要注意的是不是寫(xiě)完屬性就完事了，還需要把填寫(xiě)了屬性之后的2列代碼注釋掉或者刪除掉，這個(gè)稍后看下面示例代碼；

二、行合并

在html中行的合并與列的合并其實(shí)都是類(lèi)似的，唯一有區(qū)別的就是所使用的屬性不同，行合并我們使用的是“rowspan”屬性，用法也是跟上面一樣，比如我需要向下合并4行表格，那么屬性可以這樣設(shè)置rowspan="4"，要注意的事項(xiàng)也跟列合并一樣，需要注釋或刪除合并到的表格代碼部分。

html表格行、列合并示例

  • 我們以平時(shí)常見(jiàn)的工資表作為示例來(lái)寫(xiě)一個(gè)表格，先看下圖實(shí)際效果;
    雄訊網(wǎng)絡(luò)html工資表
  • 上代碼，直接復(fù)制到本地可直接運(yùn)行看到效果
    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.     <!-- 表格標(biāo)題 -->
    12.     <caption style="font-size: 1.5rem; margin-bottom: 10px">
    13.       雄訊網(wǎng)絡(luò)九月份工資表
    14.     </caption>
    15.     <!-- 表格頭部 -->
    16.     <thead>
    17.       <tr>
    18.         <!-- 行合并 向下合并3行-->
    19.         <th rowspan="3">編號(hào)</th>
    20.         <!-- 行合并 向下合并3行-->
    21.         <th rowspan="3">姓名</th>
    22.         <!-- 行合并 向下合并3行-->
    23.         <th rowspan="3">基本工資</th>
    24.         <!-- 列合并 向右合并4列-->
    25.         <th colspan="4">加班工資</th>
    26.         <!-- 合并的列要注釋或者刪除，不然表格會(huì)錯(cuò)位變形，一下注釋掉代碼均為合并后多余的代碼 -->
    27.         <!-- <th>加班工資</th>
    28.         <th>加班工資</th>
    29.         <th>加班工資</th> -->
    30.         <th rowspan="3">獎(jiǎng)金</th>
    31.         <th colspan="4">扣除金額</th>
    32.         <!-- <th>扣除金額</th>
    33.         <th>扣除金額</th>
    34.         <th>扣除金額</th> -->
    35.         <th rowspan="3">實(shí)發(fā)工資</th>
    36.         <th rowspan="3">員工簽字</th>
    37.       </tr>
    38.       <tr>
    39.         <!-- <th>編號(hào)</th> -->
    40.         <!-- <th>姓名</th> -->
    41.         <!-- <th>基本工資</th> -->
    42.         <th colspan="2">平時(shí)工資</th>
    43.         <!-- <th>平時(shí)工資</th> -->
    44.         <th colspan="2">周末加班</th>
    45.         <!-- <th>周末加班</th> -->
    46.         <!-- <th>獎(jiǎng)金</th> -->
    47.         <th rowspan="2">養(yǎng)老保險(xiǎn)</th>
    48.         <th rowspan="2">醫(yī)療保險(xiǎn)</th>
    49.         <th rowspan="2">失業(yè)保險(xiǎn)</th>
    50.         <th rowspan="2">其他</th>
    51.         <!-- <th>實(shí)發(fā)工資</th>
    52.         <th>員工簽名</th> -->
    53.       </tr>
    54.       <tr>
    55.         <!-- <th>編號(hào)</th> -->
    56.         <!-- <th>姓名</th> -->
    57.         <!-- <th>基本工資</th> -->
    58.         <th>時(shí)間</th>
    59.         <th>工資</th>
    60.         <th>時(shí)間</th>
    61.         <th>工資</th>
    62.         <!-- <th>獎(jiǎng)金</th> -->
    63.         <!-- <th>養(yǎng)老保險(xiǎn)</th> -->
    64.         <!-- <th>醫(yī)療保險(xiǎn)</th> -->
    65.         <!-- <th>失業(yè)保險(xiǎn)</th> -->
    66.         <!-- <th>其他</th> -->
    67.         <!-- <th>實(shí)發(fā)工資</th>
    68.         <th>員工簽名</th> -->
    69.       </tr>
    70.     </thead>
    71.     <!-- 表格主體內(nèi)容 -->
    72.     <tbody>
    73.       <tr>
    74.         <!-- 整行14列一起合并 -->
    75.         <td colspan="14" align="center">由于是演示，我數(shù)據(jù)全部做成一樣了</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>

    結(jié)語(yǔ)：

    表格在我們?nèi)粘９ぷ髦惺潜容^常見(jiàn)且常用的，所以html表格的制作掌握是必須的，行合并與列合并更是重中之重，本文分別通過(guò)“rowspan”和“colspan”兩個(gè)html表格屬性講述了對(duì)表格進(jìn)行行、列合并的講解與實(shí)操！
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：表格做得相當(dāng)專(zhuān)業(yè)
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)