HTML表格
阿新 • • 發佈：2020-07-23
一、基本語法
<table> <!-- 表格開始 --> <caption>..</caption><!-- 標題 --> <tr><!-- 行標籤 --> <th></th><!-- 表格頭內容居中 --> <td></td><!-- 單元格 --> ... </tr> <tr> <td></td> ...</tr> </table><!-- 表格結束 -->
二、帶結構的表格
格劃分三部分:表頭、主體、腳註
- thead:表格的頭(放表格的表頭)
- tbody:表格的主體(放資料本體)
- tfoot:表格的腳(放表格的腳註)
注意：thead、tbody、tfoot內容位置的變化不會隨著程式碼位置的變化而變化
例1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格2</title> 6 </head> 7 <body> 8 <!-- 建立2行3列的表格 --> 9 <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" > 10 <caption>前端工程師平均工資</caption> 11 <thead> 12 <tr> 13<th>城市</th> 14 <th>2014年</th> 15 <th>2014年</th> 16 <th>2015年</th> 17 <th>2016年</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>上海</td> 23 <td>8000</td> 24 <td>9000</td> 25 <td>10000</td> 26 <td>12000</td> 27 </tr> 28 </tbody> 29 <tfoot> 30 <tr> 31 <td>合計</td> 32 <td>8000</td> 33 <td>9000</td> 34 <td>10000</td> 35 <td>12000</td> 36 </tr> 37 </tfoot> 38 </table> 39 40 </body> 41 </html>
它的效果圖是這樣的：
我們調整一下程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格2</title> 6 </head> 7 <body> 8 <!-- 建立2行3列的表格 --> 9 <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" > 10 <caption>前端工程師平均工資</caption> 11 <tbody> 12 <tr> 13 <td>上海</td> 14 <td>8000</td> 15 <td>9000</td> 16 <td>10000</td> 17 <td>12000</td> 18 </tr> 19 </tbody> 20 <thead> 21 <tr> 22 <th>城市</th> 23 <th>2014年</th> 24 <th>2014年</th> 25 <th>2015年</th> 26 <th>2016年</th> 27 </tr> 28 </thead> 29 30 <tfoot> 31 <tr> 32 <td>合計</td> 33 <td>8000</td> 34 <td>9000</td> 35 <td>10000</td> 36 <td>12000</td> 37 </tr> 38 </tfoot> 39 </table> 40 41 </body> 42 </html>
它的效果圖還是和前面一樣。
三、<table>表格屬性
| 屬性 | 值 | 描述 |
| Width | Pixels、% | 規定表格的寬度 |
| align | Left、center、right | 表格相對周圍元素的對齊方式。 |
| border | pixels | 規定表格邊框的寬度。 |
| Bgcolor |
rgb(x,x,x)、#xxxxxx、 Colorname |
表格的背最顏色。 |
| Cellpadding | Pixels、% | 單元邊沿與其內容之間的空白。 |
| cellspacing | Pixels、% | 單元格之間的空白。 |
| frame | 屬性值 | 規定外側邊框的哪個部分是可見的 |
| rules | 屬性值 | 規定內側邊櫃的哪個部分是可見的 |
| 屬性 | 值 | 描述 |
| frame | void | 不顯示外側邊框 |
| above | 顯示上部的外側邊框 | |
| below | 顯示下部的外側邊框 | |
| hsides | 顯示上部和下部的外側邊框 | |
vsides |
顯示左邊和右邊的外側邊框 | |
| Ihs | 顯示左邊的外側邊框 |
|
| rhs | 顯示右邊的外側邊框 | |
| box | 在所有四個邊上顯示外側邊框 |
|
| border | 在所有四個邊上顯示外側邊框 | |
| rules | none | 沒有線條 |
| groups | 位於行組和列組之間的線條 | |
rows |
位於行之間的線條 | |
| cols | 位於列之間的線條 | |
| all | 位於行和列之間的線條 |
四、<td>和<th>標籤屬性
| 屬性 | 值 | 描述 |
| align | Left, center,right,justify, char | 單元格內容的水平對齊 |
| valign | top,middle,bottom,baseline | 單元格內容的垂直對齊 |
| bgcolor | rgb(x,x,x),#xxxxxx,colorname | 單元格的背景顏色 |
| width | %,pixels | 單元格寬度 |
| height | %,pixels | 單元格高度 |
五、跨行跨列
跨行屬性 rowspan
跨列屬性colspan
程式碼演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格2</title> 6 </head> 7 <body> 8 <!-- 建立2行3列的表格 --> 9 <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center"> 10 <caption>前端工程師平均工資</caption> 11 <thead> 12 <tr bgcolor="#d8e4bc"> 13 <th rowspan="2">城市</th> 14 <th colspan="2">2014年</th> 15 <th rowspan="2">2015年</th> 16 <th rowspan="2">2016年</th> 17 </tr> 18 <tr bgcolor="#d8e4bc"> 19 <th>上半年</th> 20 <th>下半年</th> 21 </tr> 22 </thead> 23 <tbody align="center" valign="middle"> 24 <tr> 25 <td bgcolor="#b8cce4">北京</td> 26 <td>800</td> 27 <td>900</td> 28 <td>1000</td> 29 <td>1200</td> 30 </tr> 31 <tr> 32 <td bgcolor="#b8cce4">上海</td> 33 <td>800</td> 34 <td>900</td> 35 <td>1000</td> 36 <td>1200</td> 37 </tr> 38 </tbody> 39 <tfoot> 40 <tr align="center" valign="middle"> 41 <td bgcolor="#b8cce4">合計</td> 42 <td>800</td> 43 <td>900</td> 44 <td>1000</td> 45 <td>1200</td> 46 </tr> 47 </tfoot> 48 </table> 49 50 </body> 51 </html>
效果圖
六、表格巢狀
可以在原來的表格裡巢狀表格
但巢狀的表格必須有完整的結構，要放到<td> 標籤裡
演示程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 </head> 7 <body> 8 <!-- 建立2行3列的表格 --> 9 <table border="1" cellspacing="0"> 10 <tr> 11 <td>2014年</td> 12 <td>2015年</td> 13 <td>2016年</td> 14 </tr> 15 <tr> 16 <td> 17 <table border="1" cellspacing="0"> 18 <tr> 19 <td>上半年</td> 20 <td>下半年</td> 21 </tr> 22 <tr> 23 <td>800</td> 24 <td>900</td> 25 </tr> 26 </table> 27 </td> 28 <td>1000</td> 29 <td>1200</td> 30 </tr> 31 </table> 32 33 </body> 34 </html>
效果圖
七、
1.儘量少的使用表格巢狀
2.儘量少的使用表格跨行跨列