04HTML基礎--表格標籤

表格標籤

• 在過去表格標籤用的非常非常的多, 絕大多數的網站都是使用表格標籤來製作的, 也就是說表格標籤是一個時代的代表
  • http://2004.sina.com.cn
• 作用:以表格形式將資料顯示出來, 當資料量非常大的時候, 表格這種展現形式被認為是最為清晰的一種展現形式
• 格式:
  • table定義表格
  • tr定義行
  • td定義單元格

<!--先定義一個表格, 然後通過tr告訴瀏覽器這個表格中一共有多少行, 然後再通過td告訴瀏覽器這一行中一共有多少個元素

<table>

    <tr>

        <td>需要顯示的內容</td>

        <td></td>

    </tr>

    <tr>

        <

        <td></td>

    </tr>

</table>

表格中的屬性

• border: 預設情況下表格的邊框寬度為0看不到, 通過border屬性給表格指定邊框寬度
• width: 預設情況下表格的寬度是由內容自動計算出來的, 可以通過width屬性指定表格的寬度
• height:預設情況下表格的高度是由內容自動計算出來的, 可以通過height屬性指定表格的高度
• cellspacing: 外邊距. 預設情況下單元格之間有2個畫素的間隙, 可以通過cellpadding指定表格之間的間隙，只能給table使用
• cellpadding: 內邊距. 預設情況下文字與單元格邊緣距離內容有1個畫素的內邊距, 可以通過cellpadding屬性指定單元格邊緣和內容之間的內邊距，只能給table標籤使用
• 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僅僅用於說明語義

例：如果要設定細線表格，可以這麼做：table標籤的bgcolor=black，tr的bgcolor=white；

<table bgcolor=”black” cellspacing=”1px”>

<tr bgcolor=”white”>

<td>1.1</td>

<td>1.2</td>

</tr>

<tr bgcolor=”white”>

<td>2.1</td>

<td>2.2</td>

</tr>

</table>

表格中的其它標籤

• 表單中有兩種型別的單元格, 一種是標準單元格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>

            

        </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的這種結構支援不是很好, 所以在企業開發中一般都不用嚴格的按照這種結構來編寫