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

完整代碼：↓

挑戰30天在頭條寫日記#

HTML是一種用于創建網頁結構和內容的標記語言，其中包含了許多標簽，可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法，并通過示例展示如何創建表格。

1. <tr>標簽的作用： <tr>標簽代表HTML表格中的一行（行數據），它可以包含一個或多個<td>元素作為單元格。

2. <td>標簽的作用： <td>標簽用于定義表格中的一個單元格（列數據），可以包含文本、圖像、鏈接等內容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標簽時，首先需要創建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標簽，如下所示：

htmlCopy code<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設置邊框、背景顏色等。以下是一個簡單的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例應用： 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>廣州</td>
  </tr>
</table>

</body>
</html>

6. 書籍參考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 總結： 通過本文的介紹，我們了解了HTML中<tr>和<td>標簽的基本用法，以及如何創建簡單的表格和添加樣式。使用這些標簽，我們可以輕松地創建具有結構和內容的網頁表格，提升頁面的可讀性和可視性。

天我們說下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>

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

我們看下全部代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

在線咨詢

上一篇：碎片時間學編程「112]：轉義 HTML
下一篇：使用 HTML5 Canvas 和 JavaScript 開發動畫氣泡：分步教程

您的項目需求

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

整合營銷服務商

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

、什么是合并單元格？

二、怎么合并？

三、兩個屬性的用法

您的項目需求

、什么是合并單元格？

二、怎么合并？

三、兩個屬性的用法