整合營銷服務商

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

          免費咨詢熱線:

          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>


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


          主站蜘蛛池模板: 欲色aV无码一区二区人妻| 亚洲av鲁丝一区二区三区| 视频在线一区二区三区| 性色A码一区二区三区天美传媒 | 无码日韩人妻AV一区免费l| 一区二区三区四区精品视频| 视频一区视频二区在线观看| 亚洲av无码一区二区三区人妖| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 人妻互换精品一区二区| 久久伊人精品一区二区三区| 久久精品视频一区二区三区| 国产精品 一区 在线| 无码毛片一区二区三区视频免费播放| 日韩一区二区a片免费观看| 一本一道波多野结衣一区| 老熟妇仑乱一区二区视頻| 亚洲一区二区中文| 日本成人一区二区三区| 国产AV午夜精品一区二区入口| 伊人激情AV一区二区三区| 亚洲综合av永久无码精品一区二区| 国产A∨国片精品一区二区| 美女AV一区二区三区| 丝袜美腿高跟呻吟高潮一区| 国产福利电影一区二区三区,亚洲国模精品一区 | 国产av一区最新精品| 在线观看一区二区精品视频| 日韩成人一区ftp在线播放| 国产人妖视频一区二区破除| 一区二区三区免费视频播放器| 国产vr一区二区在线观看| 精品国产亚洲一区二区三区| 少妇人妻精品一区二区三区| 精品国产一区二区三区香蕉| 黑巨人与欧美精品一区| 视频一区二区三区人妻系列| 国产伦精品一区二区三区| 精品一区二区三区在线观看l| 亚洲AV无码一区二区三区久久精品| 日韩成人一区ftp在线播放|