創建兩行三列表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1"> <tr> <td>2018年</td> <td>2019年</td> <td>2020年</td> </tr> <tr> <td>8000</td> <td>10000</td> <td>120000</td> </tr> </table> </body> </html>
表格
th 表頭，內容居中，加粗顯示
<caption></caption> 表格標題，居中顯示
表格作為整體被解析，完全解析完才會被顯示出來
表格結構標簽可以優化顯示，加載一部分顯示一部分
thead 表格的頭（表頭）
tbody 表格的主體（數據）
tfoot 表格的腳（腳注）
表格屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="rows"> <caption>前端工程師平均工資</caption> <thead> <tr> <th>城市</th> <th>2018年</th> <th>2018年</th> <th>2019年</th> <th>2020年</th> </tr> <tr> <th>城市</th> <th>上半年</th> <th>下半年</th> <th>2019年</th> <th>2020年</th> </tr> </thead> <tbody> <tr> <td>北京</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>120000</td> </tr> <tr> <td>上海</td> <td>6000</td> <td>7000</td> <td>8000</td> <td>100000</td> </tr> </tbody> <tfoot> <tr> <td>合計</td> <td>7000</td> <td>8000</td> <td>9000</td> <td>110000</td> </tr> </tfoot> </table> </body> </html>
tr標簽屬性
td和th標簽屬性
thead / tbody / tfoot 標簽屬性
跨列屬性 colspan
跨行屬性 rowspan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all"> <caption>前端工程師平均工資</caption> <thead> <tr bgcolor="#d8e4bc"> <th rowspan="2">城市</th> <th colspan="2">2018年</th> <th rowspan="2">2019年</th> <th rowspan="2">2020年</th> </tr> <tr bgcolor="#d8e4bc"> <th>上半年</th> <th>下半年</th> </tr> </thead> <tbody align="center" valign="middle"> <tr> <td bgcolor="#b8cce4">北京</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>12000</td> </tr> <tr> <td bgcolor="#b8cce4">上海</td> <td>6000</td> <td>7000</td> <td>8000</td> <td>10000</td> </tr> </tbody> <tfoot> <tr align="center"> <td bgcolor="#b8cce4">合計</td> <td>7000</td> <td>8000</td> <td>9000</td> <td>11000</td> </tr> </tfoot> </table> </body> </html>
表格嵌套：
嵌入的必須是完整的表格結構
放到td標簽中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all"> <caption>前端工程師平均工資</caption> <thead> <tr bgcolor="#d8e4bc"> <th>城市</th> <th>2018年</th> <th>2019年</th> <th>2020年</th> </tr> </thead> <tbody align="center" valign="middle"> <tr> <td bgcolor="#b8cce4">北京</td> <td> <table border="1" cellspacing="0" frame="void"> <tr> <td>上半年</td> <td>下半年</td> </tr> <tr> <td>8000</td> <td>9000</td> </tr> </table> </td> <td>10000</td> <td>12000</td> </tr> </tbody> </table> </body> </html>
