一個表格中分為 行 和 列 ,有時候你經常在網頁中看到類似這樣的表格,有時候是合并了列,有時候是合并了行。那么這個是怎么做的?也是通過下面的方法實現的。
向單元格添加屬性即可實現,合并 列 和 行的屬性不一樣
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代碼來創建這些表格。
復雜表格應該有明確的層次結構,以便用戶可以輕松地從總體到細節地閱讀信息。這通常通過使用標題行和列來實現。
數據應該根據其類型進行對齊,例如,數字通常右對齊以便于比較,而文本則左對齊。
使用邊框和底色來區分不同的行和列,以增強可讀性。
對于包含復雜數據的表格,應該提供清晰的標注和腳注,以便用戶理解數據的來源和含義。
這個表格顯示了一個團隊成員在上半年和下半年的表現評估。
<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>
這個表格顯示了一個公司季度財務報告的簡化版本。
<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>
這個表格展示了不同設備對于特定功能的支持程度。
<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>等。
先看下效果:
然后看下代碼:
<!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部分
接下來說下合并單元格
特殊情況下,可以把多個單元格合并為一個單元格,只需要了解簡單合并單元格就可以了。
綜上顯示:
目標單元格:
跨行:最上側單元格為目標單元格,寫合并代碼
跨列:最左側單元格為目標單元格,寫合并代碼
首先,需要先確定是跨行還是跨列合并
其次,找到目標單元格,寫上合并方式=合并的單元格數量,比如 <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>
好的,今天就先到這里,大家下周再見
*請認真填寫需求信息,我們會在24小時內與您取得聯系。