表格標(biāo)簽

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

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

表格中的屬性

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

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

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

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

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

• align: 規(guī)定表格相對(duì)周?chē)氐膶?duì)齊方式, 它的取值有center、left、right

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

  ?

• valign: 規(guī)定表格相對(duì)周?chē)氐膶?duì)齊方式, 它的取值有center、left、right

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

  ?

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

  • 給table設(shè)置bgcolor屬性, 是給整個(gè)表格設(shè)置背景顏色
  • 給tr設(shè)置bgcolor屬性, 是給當(dāng)前行設(shè)置背景顏色
  • 給td設(shè)置bgcolor屬性, 是給當(dāng)前單元格設(shè)置背景顏色
  • 即table標(biāo)簽和tr標(biāo)簽以及td標(biāo)簽都支持bgcolor屬性
  • 該屬性僅僅作為了解, 企業(yè)開(kāi)發(fā)中用css代替, 因?yàn)镠TML僅僅用于說(shuō)明語(yǔ)義

?

表格中的其它標(biāo)簽

• 表單中有兩種類型的單元格, 一種是標(biāo)準(zhǔn)單元格td, 一種是表頭單元格th

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

• caption標(biāo)簽:給整個(gè)表格設(shè)置標(biāo)題. 只要將標(biāo)題寫(xiě)在caption標(biāo)簽中, 那么標(biāo)題就會(huì)自動(dòng)相對(duì)于表格的寬度居中

  • 一定要嵌套在talbe標(biāo)簽內(nèi)部才有效，一定要緊跟在table標(biāo)簽后面

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

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

• thead標(biāo)簽:用來(lái)存放當(dāng)前列的表頭, 如果沒(méi)有加css頁(yè)面默認(rèn)將表頭中的高度設(shè)置變小

• tbody標(biāo)簽:一般用來(lái)存放頁(yè)面中的主體數(shù)據(jù), 如果不寫(xiě)會(huì)自動(dòng)加上

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

• 注意點(diǎn):
  - 如果我們沒(méi)有編寫(xiě)tbody, 系統(tǒng)會(huì)系統(tǒng)給我們添加tbody
  - 如果指定了thead和tfoot, 那么在修改整個(gè)表格的高度時(shí), thead和tfoot有自己默認(rèn)的高度, 不會(huì)隨著表格的高度變化而變化

<table><caption>表格的標(biāo)題</caption><thead><tr><th>每一列的標(biāo)題</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)容, 一般情況下搜索引擎會(huì)優(yōu)先抓取tbody中的內(nèi)容
• 由于有一部分瀏覽器對(duì)talbe的這種結(jié)構(gòu)支持不是很好, 所以在企業(yè)開(kāi)發(fā)中一般都不用嚴(yán)格的按照這種結(jié)構(gòu)來(lái)編寫(xiě)

單元格合并

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

注意點(diǎn):
1.由于把某一個(gè)單元格當(dāng)做了多個(gè)單元格來(lái)看到, 所以就會(huì)多出一些單元格, 所以需要?jiǎng)h掉一些單元格才能正常顯示
2.一定要記住單元格合并永遠(yuǎn)都是向后或者向下合并, 而不能向前或者向上合并

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

補(bǔ)充：WebStorm使用技巧

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

快速合并和展開(kāi)代碼(合并和展開(kāi)的是某一個(gè)標(biāo)簽)
合并: Ctrl + -
展開(kāi): Ctrl + +

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

快速新啟一行
shift + enter

轉(zhuǎn)載于:https://www.cnblogs.com/KnightKitt/p/6372297.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。