時間:2024-02-03 17:42作者:下載吧人氣:18
繼上一篇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>
網友評論