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>等。

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

先看下效果:

然后看下代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

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

首先是頁面整體配置:

然后是head部分

接下來是tbody部分

接下來說下合并單元格

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

合并單元格方式：跨行合并:rowspan="合并單元格的個數"跨列合并:colspam="合并單元格的個數"
目標單元格
合并單元格的步驟
跨行合并跨列合并

綜上顯示:

目標單元格:

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

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

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

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

最后，刪除多余的單元格

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

對應代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

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

<body>

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

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

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

先看樣式:

然后進行單元格合并:

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

先看下代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

我們看下全部代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

在線咨詢

上一篇：十款Chrome 擴展工具，提高你的開發效率
下一篇：如何使用FTP軟件連接WordPress網站

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

、什么是合并單元格？

二、怎么合并？

三、兩個屬性的用法

復雜表格的設計要點

1. 清晰的層次結構

2. 一致的對齊

3. 合理的分隔

4. 簡潔的標注

表格實例與HTML代碼

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

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

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

最佳實踐

您的項目需求