整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html開發筆記20-合并單元格-列和行

          、什么是合并單元格?

          一個表格中分為 行 和 列 ,有時候你經常在網頁中看到類似這樣的表格,有時候是合并了列,有時候是合并了行。那么這個是怎么做的?也是通過下面的方法實現的。

          二、怎么合并?

          向單元格添加屬性即可實現,合并 列 和 行的屬性不一樣

          1、合并列的屬性:clospan="2" //要合并幾列數字就是幾

          2、合并行的屬性:rowspan="2" //同理,要合并幾行數字就是幾

          3、合并后的單元格(行或列)必然會自動多出來一個,需要手動刪掉。

          4、重點:合并單元格只和 td 標簽有關系:

          (1)合并列:是左右合并,在左側的 td 標簽中添加 colspan="2" 要合并的 td 的數量。

          (2)合并行:是上下合并,在上面的 td 標簽中添加 rowspan="2" 要合并的td的數量。

          (3)合并完后刪除多余的 td 標簽。

          三、兩個屬性的用法

          1、合并 列 的用法:

          (1)首先確定你要合并的單元格在第幾行第幾列,然后找到它,從他的td標簽中添加屬性。

          例如要合并第4行的,第4和第5列:

          
          <tr>
              <td>第三節</td>
              <td>html</td>
              <td>css</td>
              <td colspan="2">php</td> <!-- 合并 列 的用法-->
              <td>php</td>
            </tr>

          2、合并 行 的用法:

          例如下面:合并第3行和第4行的第1列。

          完整代碼:↓

          數據密集型文檔和網頁中,復雜表格結構是必不可少的。它們幫助用戶理解大量的信息和數據關系。本文將詳細介紹復雜表格的設計要點,提供實用的例子,并展示如何使用HTML代碼來創建這些表格。

          復雜表格的設計要點

          1. 清晰的層次結構

          復雜表格應該有明確的層次結構,以便用戶可以輕松地從總體到細節地閱讀信息。這通常通過使用標題行和列來實現。

          2. 一致的對齊

          數據應該根據其類型進行對齊,例如,數字通常右對齊以便于比較,而文本則左對齊。

          3. 合理的分隔

          使用邊框和底色來區分不同的行和列,以增強可讀性。

          4. 簡潔的標注

          對于包含復雜數據的表格,應該提供清晰的標注和腳注,以便用戶理解數據的來源和含義。

          表格實例與HTML代碼

          實例 1: 帶有合并單元格的表格

          這個表格顯示了一個團隊成員在上半年和下半年的表現評估。

          <table border="1">
            <thead>
              <tr>
                <th rowspan="2">成員</th>
                <th colspan="2">上半年</th>
                <th colspan="2">下半年</th>
              </tr>
              <tr>
                <th>項目1</th>
                <th>項目2</th>
                <th>項目1</th>
                <th>項目2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Alice</td>
                <td>良好</td>
                <td>優秀</td>
                <td>優秀</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>Bob</td>
                <td>合格</td>
                <td>良好</td>
                <td>良好</td>
                <td>優秀</td>
              </tr>
            </tbody>
          </table>
          

          實例 2: 帶有子標題的復雜表格

          這個表格顯示了一個公司季度財務報告的簡化版本。

          <table border="1">
            <thead>
              <tr>
                <th></th>
                <th>Q1</th>
                <th></th>
                <th>Q2</th>
                <th></th>
                <th>Q3</th>
                <th></th>
                <th>Q4</th>
                <th></th>
              </tr>
              <tr>
                <th>財務報告</th>
                <th>收入</th>
                <th>支出</th>
                <th>收入</th>
                <th>支出</th>
                <th>收入</th>
                <th>支出</th>
                <th>收入</th>
                <th>支出</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2020年</td>
                <td>50</td>
                <td>30</td>
                <td>70</td>
                <td>40</td>
                <td>60</td>
                <td>50</td>
                <td>80</td>
                <td>60</td>
              </tr>
              <tr>
                <td>2021年</td>
                <td>55</td>
                <td>35</td>
                <td>75</td>
                <td>45</td>
                <td>65</td>
                <td>55</td>
                <td>85</td>
                <td>65</td>
              </tr>
            </tbody>
          </table>
          

          實例 3: 具有行跨度的表格

          這個表格展示了不同設備對于特定功能的支持程度。

          <table border="1">
            <thead>
              <tr>
                <th>功能</th>
                <th>支持的設備</th>
                <th>兼容性</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">視頻播放</td>
                <td>手機</td>
                <td>高</td>
              </tr>
              <tr>
                <td>平板</td>
                <td>高</td>
              </tr>
              <tr>
                <td>電腦</td>
                <td>中</td>
              </tr>
              <tr>
                <td rowspan="2">音頻播放</td>
                <td>手機</td>
                <td>高</td>
              </tr>
              <tr>
                <td>智能音箱</td>
                <td>高</td>
              </tr>
              <tr>
                <td rowspan="2">文檔編輯</td>
                <td>電腦</td>
                <td>高</td>
              </tr>
              <tr>
                <td>平板</td>
                <td>中</td>
              </tr>
            </tbody>
          </table>
          

          最佳實踐

          • 簡化設計:避免使用過多的裝飾性元素,如陰影或漸變。
          • 數據可比性:確保相似性質的數據在表格中是可比較的。
          • 注釋和說明:在表格下方提供必要的注釋和數據來源說明。
          • 測試:在不同的設備和屏幕尺寸上測試表格的顯示效果。

          復雜表格結構是展示和理解多維數據的強大工具。通過遵循上述設計原則和實例,你可以創建清晰、有效的表格來提高你的數據呈現能力。

          天我們說下HTML的表格結構標簽,包含<thead></thead>、<tbody></tbody>等。

          1. <thead></thead> 用于定義表格的頭部,<thead>內部必須包含<tr>標簽,一般是位于第一行。頭部區域
          2. <tbody></tbody>用于定義表格的主體,主要用于放數據本體。主題區域。
          3. 以上兩個標簽都是放在<table></table>標簽中

          先看下效果:

          然后看下代碼:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Document</title>

          </head>

          <body>

          <table align="center" width="500" height="250" border="1">

          <thead>

          <tr>

          <th>id</th>

          <th>name</th>

          <th>sex</th>

          <th>圖片</th>

          </tr>

          </thead>

          <tbody>

          <tr>

          <td>1</td>

          <td>李世民</td>

          <td></td>

          <td><img src="HTML5.jpeg" width="200" height="150"></td>

          </tr>

          <tr>

          <td>2</td>

          <td>秦始皇</td>

          <td></td>

          </tr>

          <tr>

          <td>3</td>

          <td>武則天</td>

          <td></td>

          </tr>

          </tbody>

          </table>

          </body>

          </html>


          在<body>中,我們看到層次分明的三個部分

          首先是頁面整體配置:

          然后是head部分

          接下來是tbody部分


          接下來說下合并單元格

          特殊情況下,可以把多個單元格合并為一個單元格,只需要了解簡單合并單元格就可以了。

          1. 合并單元格方式:跨行合并:rowspan="合并單元格的個數"跨列合并:colspam="合并單元格的個數"
          2. 目標單元格
          3. 合并單元格的步驟
          4. 跨行合并跨列合并

          綜上顯示:

          目標單元格:

          跨行:最上側單元格為目標單元格,寫合并代碼

          跨列:最左側單元格為目標單元格,寫合并代碼


          首先,需要先確定是跨行還是跨列合并

          其次,找到目標單元格,寫上合并方式=合并的單元格數量,比如 <td colspan="2"></td>

          最后,刪除多余的單元格


          先創建一個3x3的單元格,代碼如下:

          對應代碼:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Document</title>

          </head>

          <h1>今天我們學習合并單元格</h1>

          <body>

          <h3>首先,我們先創建一個3x3的單元格</h3>

          <table align="left" width="500" height="250" border="1" cellspacing="0">

          <thead>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          </thead>

          <tbody>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          </tbody>


          </table>

          </body>

          </html>

          按照上面的代碼試了一下,發現不行,重新寫了測試代碼

          先看樣式:

          然后進行單元格合并:

          為啥我的是這樣呢,是準備合并第一行的第二列和第三列數據

          先看下代碼:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Document</title>

          </head>

          <body>

          <table width=500 height=200 border="1" cellspacing="0">

          <tr>

          <td></td>

          <td colspan="2"></td>

          <!--需要刪除合并后多余的表格-->>

          <td></td>

          </tr>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          </table>

          </body>

          </html>

          發現是還沒有刪除第三行的代碼,格子給擠出去了。現在看就好了

          我們看下全部代碼:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Document</title>

          </head>

          <body>

          <table width=500 height=200 border="1" cellspacing="0">

          <tr>

          <td></td>

          <td colspan="2"></td>

          <!--需要刪除合并后多余的表格-->>

          </tr>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          <tr>

          <td></td>

          <td></td>

          <td></td>

          </tr>

          </table>

          </body>

          </html>


          好的,今天就先到這里,大家下周再見


          主站蜘蛛池模板: 国产成人无码aa精品一区| 无码人妻AV免费一区二区三区| 亚洲AV无码一区二区三区国产| 亚洲国产一区视频| 一区二区三区电影在线观看| 福利一区福利二区| 日韩电影一区二区| 中文字幕精品一区二区2021年| 精品黑人一区二区三区| 国产一区二区电影在线观看| 中文字幕一区在线播放| 日韩一区二区超清视频| 日韩伦理一区二区| 亚洲熟妇av一区二区三区漫画| 国产伦精品一区二区三区四区| 国产小仙女视频一区二区三区| 韩日午夜在线资源一区二区 | 老熟妇仑乱视频一区二区| 亚洲国产视频一区| 日韩一区二区久久久久久| 亲子乱av一区区三区40岁| 午夜福利国产一区二区| 亚洲福利一区二区| 国产成人精品久久一区二区三区av | 久久精品免费一区二区喷潮| 无码人妻一区二区三区免费视频 | 成人区精品人妻一区二区不卡 | 精品一区二区三区在线播放| 日韩精品成人一区二区三区| 日韩A无码AV一区二区三区| 一区二区视频在线观看| 色一情一乱一伦一区二区三区| 综合一区自拍亚洲综合图区| 国产亚洲情侣一区二区无| 日本高清一区二区三区| 精品国产一区二区三区香蕉| 亚洲欧洲一区二区三区| 国内精自品线一区91| 精品亚洲A∨无码一区二区三区| 国产精品伦一区二区三级视频 | 国产色综合一区二区三区|