HTML基礎【4】:表格標籤
阿新 • • 發佈:2018-12-21
表格標籤
在過去表格標籤用的非常非常的多,絕大多數的網站都是使用表格標籤來製作的,也就是說表格標籤是一個時代的代表
作用:以表格形式將資料顯示出來,當資料量非常大的時候,表格這種展現形式被認為是最為清晰的一種展現形式
格式:
- table定義表格
- tr定義行
- td定義單元格
<!--先定義一個表格, 然後通過tr告訴瀏覽器這個表格中一共有多少行, 然後再通過td告訴瀏覽器這一行中一共有多少個元素(一共有多少列)--> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
表格中的屬性
width:預設情況下表格的寬度是由內容自動計算出來的,可以通過width屬性指定表格的寬度
height:預設情況下表格的高度是由內容自動計算出來的,可以通過height屬性指定表格的高度
cellspacing:外邊距。預設情況下單元格之間有2個畫素的間隙,可以通過cellpadding指定表格之間的間隙
cellpadding:內邊距。預設情況下單元格邊緣距離內容有1個畫素的內邊距,可以通過cellpadding屬性指定單元格邊緣和內容之間的內邊距
align:規定表格相對周圍元素的對齊方式,它的取值有center、left、right
給table設定align屬性,是讓表格在
瀏覽器
給tr設定align屬性,是讓當前行中
所有內容
居左/居右/居中給td設定align屬性,是讓當前單元格中
所有內容
居左/居右/居中該屬性僅僅作為了解,企業開發中用css代替,因為HTML僅僅用於說明語義
如果td中設定了align屬性,tr中也設定了align屬性,那麼單元格中的內容會按照td中設定的來對齊
valign:規定表格相對周圍元素的對齊方式,它的取值有center、left、right
- 給table設定valign屬性,無效
- 給tr設定valign屬性,是讓當前行中
所有內容
居上/居中/居下 - 給td設定valign屬性,是讓當前單元格中
所有內容
- 如果td中設定了valign屬性,tr中也設定了valign屬性,那麼單元格中的內容會按照td中設定的來對齊
bgcolor:規定表格的背景顏色
- 給table設定bgcolor屬性,是給整個表格設定背景顏色
- 給tr設定bgcolor屬性,是給當前行設定背景顏色
- 給td設定bgcolor屬性,是給當前單元格設定背景顏色
- 該屬性僅僅作為了解,企業開發中用css代替,因為HTML僅僅用於說明語義
表格中的其它標籤
- 表單中有兩種型別的單元格,一種是標準單元格td,一種是表頭單元格th
- th標籤:給每一列設定標題,單元格中的內容會自動加粗,居中
- caption標籤:給整個表格設定標題
- 一定要巢狀在talbe標籤內部才有效
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小說排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>關鍵詞</th>
<th>趨勢</th>
<th>今日搜尋</th>
<th>最近七日</th>
<th>相關連結</th>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
![](images/up.jpg)
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">貼吧</a>
<a href="#">圖片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
表格的結構
- thead標籤:用來存放當前列的表頭,如果沒有加css頁面預設將表頭中的高度設定變小
- tbody標籤:一般用來存放頁面中的主體資料,如果不寫會自動加上
- tfoot標籤:用來存放表格的頁尾(腳註或表注),如果沒有加css頁面預設將表頭中的高度設定變小,
一般不會出現
<table>
<caption>表格的標題</caption>
<thead>
<tr>
<th>每一列的標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>資料</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>資料</td>
</tr>
</tfoot>
</table>
- 表格結構的意義主要是用於SEO,便於搜尋引擎指定哪部分的內容是需要抓取的重要內容,一般情況下搜尋引擎會優先抓取tbody中的內容
- 由於有一部分瀏覽器對talbe的這種結構支援不是很好,所以在企業開發中一般都不用嚴格的按照這種結構來編寫