分类分类
2024-02-03 17:42作者：下载吧
继上一篇postgresql高级应用之行转列&汇总求和之后想更进一步做点儿复杂的(圖表暫且不論哈😂)，当然作为報表，出現最多的無非就是合并單元格了，是的，我已經迫不及待啦😎~
首先，我們的腦海中應該有一個對前端table有一個大致的了解， 當然這對非前端的同學十分的不友好，如果您嘗試閲讀以下内容存在困難的話(前端html、javascript) 可就此打住哈。。。
enn…,讓我先稍稍解釋下前端 html 的表格格式吧😀
html->table基本結構先給出一個十分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標簽就不要寫了，否則會溢出哦~ --> <td colspan="2">橫向合并了兩個單元格</td><td>第二行第3個</td> </tr> <tr> <td>第三行第1個</td><td>第三行第2個</td><td>第三行第3個</td> </tr> <tr> <!-- 使用rowspan屬性進行縱向合并，縱向合并的(跨越的)單元格位置需要騰出來 --> <!-- 以下縱向合并三個個單元格(在本行最後一個標簽)，所以下兩行的最後兩個td標簽就不要寫啦~，否則同樣會溢出哦~ --> <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>
相关文章