1. 程式人生 > >html-3,table 表格標簽 tr th td caption thead tbody tfoot 的簡單使用

html-3,table 表格標簽 tr th td caption thead tbody tfoot 的簡單使用

大哥 rowspan eight body 他會 寬度 標題 cap 順序

 1 <!--
 2     table  border=‘1‘ style="border-collapse:collapse;"
 3             border  表格的像素寬度
 4             border-collapse:collapse 為表格設置合並邊框模型
 5             tr  表格行 一個tr包含多個th 或td
 6                 th  表示居中加粗
 7                 td  表格描述(默認正常顯示)
 8                 
 9             caption 標題獨占一行 在表格外面
10 thead tbody tfoot 無論順序是怎麽寫的 他會自動按這個順序展示 11 --> 12 13 <!DOCTYPE html> 14 <html lang="en"> 15 <head> 16 <meta charset="UTF-8"> 17 <title>表格標簽與表單標簽</title> 18 </head> 19 <body> 20 21 <table border="2" style="border-collapse:collapse"
width="150" height="50"> 22 <tr> 23 <td>id</td> 24 <td>name</td> 25 <td>age</td> 26 <td rowspan="2">占兩行</td> 27 <td>空列</td> 28 </tr> 29 <tr> 30
<td>1</td> 31 <td>wang</td> 32 <td>18</td> 33 <td colspan="2">占兩列</td> 34 </tr> 35 </table> 36 37 <!-- 38 caption 標題獨占一行 在表格外面 39 thead tbody tfoot 無論順序是怎麽寫的 他會自動按這個順序展示 40 --> 41 <table border="2"> 42 <caption>人物介紹</caption> 43 44 <tfoot> 45 <tr> 46 <th>三妹</th> 47 <td>15</td> 48 <td></td> 49 <td rowspan="3" >占三行</td> 50 </tr> 51 </tfoot> 52 53 <thead> 54 <tr> 55 <th>大哥</th> 56 <td>18</td> 57 <td></td> 58 </tr> 59 </thead> 60 61 <tbody> 62 <tr> 63 <th>老二</th> 64 <td>17</td> 65 <td></td> 66 </tr> 67 </tbody> 68 </table> 69 70 </body> 71 </html>

html-3,table 表格標簽 tr th td caption thead tbody tfoot 的簡單使用