表格標簽

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

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

表格中的屬性

• border: 默認情況下表格的邊框寬度為0看不到, 通過border屬性給表格指定邊框寬度

• 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屬性, 是給當前單元格設置背景顏色
  • 即table標簽和tr標簽以及td標簽都支持bgcolor屬性
  • 該屬性僅僅作為了解, 企業開發中用css代替, 因為HTML僅僅用于說明語義

?

表格中的其它標簽

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

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

• caption標簽:給整個表格設置標題. 只要將標題寫在caption標簽中, 那么標題就會自動相對于表格的寬度居中

  • 一定要嵌套在talbe標簽內部才有效，一定要緊跟在table標簽后面

<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><img src="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頁面默認將表頭中的高度設置變小, 一般不會出現

• 注意點:
  - 如果我們沒有編寫tbody, 系統會系統給我們添加tbody
  - 如果指定了thead和tfoot, 那么在修改整個表格的高度時, thead和tfoot有自己默認的高度, 不會隨著表格的高度變化而變化

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

單元格合并

• 水平方向上的單元格合并
  可以給td標簽添加一個colspan屬性, 來指定把某一個單元格當做多個單元格來看待(水平方向)
  例如:
  <td colspan="2"></td>
  含義: 把當前單元格當做兩個單元格來看待

注意點:
1.由于把某一個單元格當做了多個單元格來看到, 所以就會多出一些單元格, 所以需要刪掉一些單元格才能正常顯示
2.一定要記住單元格合并永遠都是向后或者向下合并, 而不能向前或者向上合并

• 垂直方向上的單元格合并
  可以給td標簽設置一個rowspan屬性, 來指定把某一個單元格當做多個單元格來看待(垂直方向)
  例如:
  <td rowspan="2"></td>
  含義: 把當前單元格當做兩個單元格來看待

補充：WebStorm使用技巧

快速移動選中的代碼, 上下移動
往上移動 Ctrl + shift + ↑(方向鍵上)
往下移動 Ctrl + shift + ↓(方向鍵下)

快速合并和展開代碼(合并和展開的是某一個標簽)
合并: Ctrl + -
展開: Ctrl + +

快速合并和展開代碼(合并和展開選中的所有標簽)
合并: Ctrl + shift + -
展開: Ctrl + shift + +

快速新啟一行
shift + enter

轉載于:https://www.cnblogs.com/KnightKitt/p/6372297.html

總結

以上是生活随笔為你收集整理的玩转HTML5+跨平台开发[4] HTML表格标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。