表格標簽

• 在過去表格標簽用的非常非常的多, 絕大多數(shù)的網(wǎng)站都是使用表格標簽來制作的, 也就是說表格標簽是一個時代的代表
  • http://2004.sina.com.cn
• 作用:以表格形式將數(shù)據(jù)顯示出來, 當數(shù)據(jù)量非常大的時候, 表格這種展現(xiàn)形式被認為是最為清晰的一種展現(xiàn)形式
• 格式:
  • table定義表格
  • tr定義行
  • td定義單元格

<!--先定義一個表格, 然后通過tr告訴瀏覽器這個表格中一共有多少行, 然后再通過td告訴瀏覽器這一行中一共有多少個元素(一共有多少列)-->
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表格中的屬性

• border: 默認情況下表格的邊框?qū)挾葹?看不到, 通過border屬性給表格指定邊框?qū)挾?/p>

• width: 默認情況下表格的寬度是由內(nèi)容自動計算出來的, 可以通過width屬性指定表格的寬度

• height:默認情況下表格的高度是由內(nèi)容自動計算出來的, 可以通過height屬性指定表格的高度

• cellspacing: 外邊距. 默認情況下單元格之間有2個像素的間隙, 可以通過cellpadding指定表格之間的間隙

• cellpadding: 內(nèi)邊距. 默認情況下單元格邊緣距離內(nèi)容有1個像素的內(nèi)邊距, 可以通過cellpadding屬性指定單元格邊緣和內(nèi)容之間的內(nèi)邊距

• align: 規(guī)定表格相對周圍元素的對齊方式, 它的取值有center、left、right

  • 給table設(shè)置align屬性, 是讓表格在瀏覽器中居左/居右/居中
  • 給tr設(shè)置align屬性, 是讓當前行中所有內(nèi)容居左/居右/居中
  • 給td設(shè)置align屬性,是讓當前單元格中所有內(nèi)容居左/居右/居中
  • 該屬性僅僅作為了解, 企業(yè)開發(fā)中用css代替, 因為HTML僅僅用于說明語義
  • 如果td中設(shè)置了align屬性, tr中也設(shè)置了align屬性, 那么單元格中的內(nèi)容會按照td中設(shè)置的來對齊

• valign: 規(guī)定表格相對周圍元素的對齊方式, 它的取值有center、left、right

  • 給table設(shè)置valign屬性, 無效
  • 給tr設(shè)置valign屬性, 是讓當前行中所有內(nèi)容居上/居中/居下
  • 給td設(shè)置valign屬性,是讓當前單元格中所有內(nèi)容居上/居中/居下
  • 如果td中設(shè)置了valign屬性, tr中也設(shè)置了valign屬性, 那么單元格中的內(nèi)容會按照td中設(shè)置的來對齊

• bgcolor:規(guī)定表格的背景顏色

  • 給table設(shè)置bgcolor屬性, 是給整個表格設(shè)置背景顏色
  • 給tr設(shè)置bgcolor屬性, 是給當前行設(shè)置背景顏色
  • 給td設(shè)置bgcolor屬性, 是給當前單元格設(shè)置背景顏色

  • 該屬性僅僅作為了解, 企業(yè)開發(fā)中用css代替, 因為HTML僅僅用于說明語義

    
    

表格中的其它標簽

• 表單中有兩種類型的單元格, 一種是標準單元格td, 一種是表頭單元格th

• th標簽: 給每一列設(shè)置標題, 單元格中的內(nèi)容會自動加粗，居中

• caption標簽:給整個表格設(shè)置標題

  • 一定要嵌套在talbe標簽內(nèi)部才有效

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小說排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>關(guān)鍵詞</th>
        <th>趨勢</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相關(guān)鏈接</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>

表格的結(jié)構(gòu)

• thead標簽:用來存放當前列的表頭, 如果沒有加css頁面默認將表頭中的高度設(shè)置變小

• tbody標簽:一般用來存放頁面中的主體數(shù)據(jù), 如果不寫會自動加上

• tfoot標簽:用來存放表格的頁腳（腳注或表注), 如果沒有加css頁面默認將表頭中的高度設(shè)置變小, 一般不會出現(xiàn)

<table>
    <caption>表格的標題</caption>
    <thead>
        <tr>
            <th>每一列的標題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tfoot>
</table>

• 表格結(jié)構(gòu)的意義主要是用于SEO, 便于搜索引擎指定哪部分的內(nèi)容是需要抓取的重要內(nèi)容, 一般情況下搜索引擎會優(yōu)先抓取tbody中的內(nèi)容
• 由于有一部分瀏覽器對talbe的這種結(jié)構(gòu)支持不是很好, 所以在企業(yè)開發(fā)中一般都不用嚴格的按照這種結(jié)構(gòu)來編寫

學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038