1. 程式人生 > >html常用標簽詳解5-表格標簽

html常用標簽詳解5-表格標簽

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-表格標簽