html常用標簽詳解5-表格標簽
阿新 • • 發佈:2019-02-24
sta enter 單元格邊框 spa 行數 code nbsp 展現 常用
表格標簽(如果有不對的,請大家多多指正。謝謝!)
1、總的表格標簽概覽
<table><!--表格標簽start--> <caption></caption><!--表格標題--> <thead><!--表格頭--> <tr><!--表頭行--> <th></th><!--表頭單元格--> </tr> </thead> <tbody><!--表格體--> <tr><!--表格體行--> <td></td><!--表格體單元格--> </tr> </tbody> <tfoot><!--表格腳--> <tr> <td></td> </tr> </tfoot> </table><!--表格標簽end-->
2、table
屬性:
width="300"-----整個表格的寬度
height="200"-----整個表格的高度
border="1"-----整個表格的邊框寬度
cellspacing="0"-----表格中每個單元格的間距
align="center"-----整個表格在網頁中的位置
當沒有css屬性控制的時候,頁面上展現的表格是:整個表格為邊框色,cellspacing為每個單元格之間的距離,td的背景色為白色
table{
border:1px solid #ccc;
border-collapse:collapse;合並相鄰邊框
}
<style> table{ border: 1px solid red; /* 合並單元格邊框 */ border-collapse: collapse; } </style>
<table border="5" width="300" height="500" cellspacing="0" align="center"><!--表格標簽start--> <caption>表格標題</caption><!--表格標題--> <thead><!--表格頭--> <tr><!--表頭行--> <th>誰</th><!--表頭單元格--> <th>地點</th> <th>幹什麽</th> </tr> </thead> <tbody><!--表格體--> <tr><!--表格體行--> <td>夏紅</td><!--表格體單元格--> <td>廁所</td> <td>吃飯</td> </tr> <tr><!--表格體行--> <td>王妃</td><!--表格體單元格--> <td>蛋糕房</td> <td>放屁</td> </tr> </tbody> <tfoot><!--表格腳--> <tr> <td>僅僅娛樂</td> </tr> </tfoot> </table><!--表格標簽end-->
3、thead 、tfoot 、tbody
可寫可不寫,這裏只是格式上區分而已,但是tbody是不寫瀏覽器也會加上的。
4、tr、td
tr和td都是指的行,但是td具有表格標題行的含義,而tr就是普通的行含義
屬性:合並行
rowspan="2"----合並的總行數
5、td
單元格
屬性:合並單元格
colspan="2"----合並的總列數
html常用標簽詳解5-表格標簽