html中 table的結構 完全搞清 caption th thead等

正由於有太多 隨意 稱呼的 教法, 因此 感到很困惑, 如, 不少人把th叫標題. 那人家 caption怎麼想, th只是一個跟td同樣的角色, 只是對他進行加粗 加黑了而已, 用於某些單元格的內容 具備 "總起, 總領, 總結, 總計 "之類的語義時...

在html中寫table的時候,要注意它的結構, 和所包含的 標籤層次.

要獲得 一個 空的 單元格, 直接寫 <td></td>就行了, 或許能夠加   這個"字符實體" , 表示實實在在的一個實體..

1. thead, tbody tfoot
   從名字上就能夠看出, 這三者 是有 明確的 "語義"的! 是從 表格 各部分的 做用上 來區分 表格的 : thead是用來表示表格的頭部的, 主要用來存放 表格的表頭的, 如 一些表格 的"字段名"fields. tbody 是表格的正文, 是用來存放真正的數據的; tfoot是表格的腳部, 主要是用來對錶格作 總結性 的統計, 備註等.

因爲thead, tbody, tfoot是從語義 上來劃分 表格結構的, 因此對大的表格, 是要這樣 分段 分部分寫的, 對於一些小的表格 倒沒有這麼去區分

1. 看一下一個 結構完整的 表格的外觀
   

結構:

• 位於表格(邊框線) 以外的 ,居於 表格 上方居中的 , 叫標題, caption 至關於word文檔的標題. 文章的題目... 用來講明表格的做用,描述等等. 用標籤 <caption> 表格標題 </caption>來表示.

• 第一行的內容, 叫表頭, 也叫fields, 用來表示表格中數據 的 類別, 字段的. 如name, age, sex等

• 後面是正文, 最後的行能夠 叫tfoot , 也能夠不叫什麼...

1. th和td:

• th, 叫 t heading 是t - heading的 縮寫, 就叫表頭, th怎麼顯示不一樣, 借鑑標籤 h1, h2,h3.., 用字體加粗來表示

• th主要是用來 [在thead中], 表達字段 fields, 表頭, 或其餘總結等 須要加粗/ 強調的 地方. 可是, th並不僅是用來表達 表頭字段的, (也就是 它不僅是用在第一行/ 第一列的 ), 它能夠用在任何地方!!
  一方面, 能夠把它當作是一種對單元格 td的 加粗 版, 更多的是 一種格式, 一個格式強調, 另外一方面, 固然也帶有 語義的 成分, 語義上:　凡是你以爲　具備　總起，　總領，　說明性的, 綱領性的文字, 均可以用這個 th

垂直表頭的例子:

最重要的是, 要清楚, 在 tr標籤中, 在一個行中, 隨便你怎樣寫, 只有 兩種標籤: <th> 和 <td>. 要表示 單元格, 只有用 th 和td標籤!

1. th和 thead的區別
   這兩個標籤實際上是徹底不一樣的, 只是它們的前面兩個字母相同而已, 一個是用來表示單元格的, 一個是用來表示表格的 head部分的. 不能認爲 th所在的行 就是 thead. th下面的行就是 tbody. thead中 一樣能夠包含 含有 th的 行tr

總之, 完整的 table組成的標籤結構是:

• 先由thead, tbody, tfoot 三大部分 對table進行 結構 劃分, 而這三大部分 老是 由 "行" <tr> ....</tr> 組成的
• 而後caption, caption標籤要緊挨着 table標籤纔有效
• 而後是 各個tr, tr中 再由 th,或td 組成...

=================================================== ==

關於caption

1. caption標籤, 必定要放在 table標籤內部 纔有效, 纔有意義, 不然, 在table以外, 單獨的一個caption標籤, 就至關於一個 span而已

2. 教程說 caption標籤必定要緊接着 table標籤放置, 可是在firefox和ie中測試, 只要 caption標籤放在table內部, 不管哪裏均可以.

3. 若是設置了table的style border, 這個caption 是 居於table的 border 邊框線外部的 在邊框線以外的! 你能夠把 caption當作是input元素的 label 標籤同樣...
   

4. 也不像教程上說的 thead, tbody, tfoot 三個標籤必定要同時出現...

5. 用style css來改變 caption的對齊方式和 位置:

• 在jquery的方法函數 中, properties的Map中, 凡是 不是關鍵字 的, 不是函數名的, 等 , 像 屬性名, 樣式名, 設置的值, 等, 都最好是加上 引號! 不然, js parser會認爲出錯, 而不執行.
• caption { text-align: left; caption-side : top/bottom/left/right}