Copyright © 2009-2025 下載吧 (m.jlass.com.cn) All Rights Reserved.
聲明： 本站所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請(qǐng)與本站聯(lián)系處理 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告
時(shí)間：2024-02-03 17:42作者：下載吧人氣：18
繼上一篇postgresql高級(jí)應(yīng)用之行轉(zhuǎn)列&匯總求和之后想更進(jìn)一步做點(diǎn)兒復(fù)雜的(圖表暫且不論哈😂)，當(dāng)然作為報(bào)表，出現(xiàn)最多的無非就是合并單元格了，是的，我已經(jīng)迫不及待啦😎~
首先，我們的腦海中應(yīng)該有一個(gè)對(duì)前端table有一個(gè)大致的了解， 當(dāng)然這對(duì)非前端的同學(xué)十分的不友好，如果您嘗試閲讀以下內(nèi)容存在困難的話(前端html、javascript) 可就此打住哈。。。
enn…,讓我先稍稍解釋下前端 html 的表格格式吧😀
html->table基本結(jié)構(gòu)先給出一個(gè)十分base的html demo.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>demo</title> </head> <body> <!-- 這裏定義了兩個(gè)屬性 border:定義表格邊框 cellpadding:定義單元格大小 --> <table border="3" cellpadding="8"> <thead> <tr> <th>表頭1</th><th>表頭2</th><th>表頭3</th> </tr> </thead> <tbody> <tr> <td>第一行第1個(gè)</td><td>第一行第2個(gè)</td><td>第一行第3個(gè)</td> </tr> <tr> <!-- 使用colspan屬性進(jìn)行橫向合并，橫向被合并的單元格位置需要騰出來 --> <!-- 以下橫向合并兩個(gè)單元格，所以第二個(gè)td標(biāo)簽就不要寫了，否則會(huì)溢出哦~ --> <td colspan="2">橫向合并了兩個(gè)單元格</td><td>第二行第3個(gè)</td> </tr> <tr> <td>第三行第1個(gè)</td><td>第三行第2個(gè)</td><td>第三行第3個(gè)</td> </tr> <tr> <!-- 使用rowspan屬性進(jìn)行縱向合并，縱向合并的(跨越的)單元格位置需要騰出來 --> <!-- 以下縱向合并三個(gè)個(gè)單元格(在本行最後一個(gè)標(biāo)簽)，所以下兩行的最後兩個(gè)td標(biāo)簽就不要寫啦~，否則同樣會(huì)溢出哦~ --> <td>第四行第1個(gè)</td><td>第四行第2個(gè)</td><td rowspan="3">縱向合并了三個(gè)單元格</td> </tr> <tr> <td>第五行第1個(gè)</td><td>第五行第2個(gè)</td> </tr> <tr> <td>第六行第1個(gè)</td><td>第六行第2個(gè)</td> </tr> </tbody> </table> </body> </html>
Copyright © 2009-2025 下載吧 (m.jlass.com.cn) All Rights Reserved.
聲明： 本站所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請(qǐng)與本站聯(lián)系處理 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告
網(wǎng)友評(píng)論