表格標籤

表格標籤

• 在過去表格標籤用的很是很是的多，絕大多數的網站都是使用表格標籤來製做的，也就是說表格標籤是一個時代的表明

• 做用：以表格形式將數據顯示出來，當數據量很是大的時候，表格這種展示形式被認爲是最爲清晰的一種展示形式

• 格式：

  • 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的這種結構支持不是很好，因此在企業開發中通常都不用嚴格的按照這種結構來編寫