postgresql高級應(yīng)用之合并單元格的思路詳解

時間：2024-02-03 17:42作者：下載吧人氣：23

1.寫在前面✍

繼上一篇postgresql高級應(yīng)用之行轉(zhuǎn)列&匯總求和之后想更進一步做點兒復(fù)雜的(圖表暫且不論哈😂)，當(dāng)然作為報表，出現(xiàn)最多的無非就是合并單元格了，是的，我已經(jīng)迫不及待啦😎~

2.思考

首先，我們的腦海中應(yīng)該有一個對前端table有一個大致的了解，當(dāng)然這對非前端的同學(xué)十分的不友好，如果您嘗試閲讀以下內(nèi)容存在困難的話(前端html、javascript) 可就此打住哈。。。
enn…,讓我先稍稍解釋下前端 html 的表格格式吧😀

2.1 前端`html`->`table`基本結(jié)構(gòu)

先給出一個十分base的html demo.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>demo</title>
</head>
<body>
  <!-- 這裏定義了兩個屬性 border:定義表格邊框 cellpadding:定義單元格大小 -->
  <table border="3"  cellpadding="8">
	<thead>
		<tr>
			<th>表頭1</th><th>表頭2</th><th>表頭3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>第一行第1個</td><td>第一行第2個</td><td>第一行第3個</td>
		</tr>
		<tr>
			<!-- 使用colspan屬性進行橫向合并，橫向被合并的單元格位置需要騰出來 -->
			<!-- 以下橫向合并兩個單元格，所以第二個td標(biāo)簽就不要寫了，否則會溢出哦~ -->
			<td colspan="2">橫向合并了兩個單元格</td><td>第二行第3個</td>
		</tr>
		<tr>
			<td>第三行第1個</td><td>第三行第2個</td><td>第三行第3個</td>
		</tr>
		<tr>
			<!-- 使用rowspan屬性進行縱向合并，縱向合并的(跨越的)單元格位置需要騰出來 -->
			<!-- 以下縱向合并三個個單元格(在本行最後一個標(biāo)簽)，所以下兩行的最後兩個td標(biāo)簽就不要寫啦~，否則同樣會溢出哦~ -->
			<td>第四行第1個</td><td>第四行第2個</td><td rowspan="3">縱向合并了三個單元格</td>
		</tr>
		<tr>
			<td>第五行第1個</td><td>第五行第2個</td>
		</tr>
		<tr>
			<td>第六行第1個</td><td>第六行第2個</td>
		</tr>
	</tbody>
  </table>
</body>
</html>

標(biāo)簽MySQL,技術(shù)文檔,數(shù)據(jù)庫,PostgreSQL

軟件下載吧

postgresql高級應(yīng)用之合并單元格的思路詳解

1.寫在前面✍

2.思考

2.1 前端`html`->`table`基本結(jié)構(gòu)

相關(guān)推薦

相關(guān)下載

網(wǎng)友評論

熱門閱覽

最新排行

軟件下載吧

postgresql高級應(yīng)用之合并單元格的思路詳解

1.寫在前面✍

2.思考

2.1 前端html->table基本結(jié)構(gòu)

相關(guān)推薦

相關(guān)下載

網(wǎng)友評論

熱門閱覽

最新排行

2.1 前端`html`->`table`基本結(jié)構(gòu)