正因爲有太多 隨意 稱呼的 教法, 所以 感到很困惑, 如, 很多人把th叫標題. 那人家 caption怎麼想, th只是一個跟td一樣的角色, 只是對他進行加粗 加黑了而已, 用於某些單元格的內容 具有 "總起, 總領, 總結, 總計 "之類的語義時...
在html中寫table的時候,要注意它的結構, 和所包含的 標籤層次.
要得到 一個 空的 單元格, 直接寫 <td></td>就好了, 或許可以加 這個"字符實體" , 表示實實在在的一個實體..
- thead, tbody tfoot
從名字上就可以看出, 這三者 是有 明確的 "語義"的! 是從 表格 各部分的 作用上 來區分 表格的 : thead是用來表示表格的頭部的, 主要用來存放 表格的表頭的, 如 一些表格 的"字段名"fields. tbody 是表格的正文, 是用來存放真正的數據的; tfoot是表格的腳部, 主要是用來對錶格做 總結性 的統計, 備註等.
由於thead, tbody, tfoot是從語義 上來劃分 表格結構的, 所以對大的表格, 是要這樣 分段 分部分寫的, 對於一些小的表格 倒沒有這麼去區分
- 看一下一個 結構完整的 表格的外觀
結構:
-
位於表格(邊框線) 之外的 ,居於 表格 上方居中的 , 叫標題, caption 相當於word文檔的標題. 文章的題目... 用來說明表格的作用,描述等等. 用標籤
<caption> 表格標題 </caption>來表示. -
第一行的內容, 叫表頭, 也叫fields, 用來表示表格中數據 的 類別, 字段的. 如name, age, sex等
-
後面是正文, 最後的行可以 叫tfoot , 也可以不叫什麼...
- th和td:
-
th, 叫 t heading 是t - heading的 縮寫, 就叫表頭, th怎麼顯示不同, 借鑑標籤 h1, h2,h3.., 用字體加粗來表示
-
th主要是用來 [在thead中], 表達字段 fields, 表頭, 或其他總結等 需要加粗/ 強調的 地方. 但是, th並不只是用來表達 表頭字段的, (也就是 它不只是用在第一行/ 第一列的 ), 它可以用在任何地方!!
一方面, 可以把它看成是一種對單元格 td的 加粗 版, 更多的是 一種格式, 一個格式強調, 另一方面, 當然也帶有 語義的 成分, 語義上: 凡是你覺得 具有 總起， 總領， 說明性的, 綱領性的文字, 都可以用這個 th
垂直表頭的例子:
最重要的是, 要清楚, 在 tr標籤中, 在一個行中, 隨便你怎樣寫, 只有 兩種標籤: <th> 和 <td>. 要表示 單元格, 只有用 th 和td標籤!
- 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
-
caption標籤, 一定要放在 table標籤內部 纔有效, 纔有意義, 否則, 在table之外, 單獨的一個caption標籤, 就相當於一個 span而已
-
教程說 caption標籤一定要緊接着 table標籤放置, 但是在firefox和ie中測試, 只要 caption標籤放在table內部, 無論哪裏都可以.
-
如果設置了table的style border, 這個caption 是 居於table的 border 邊框線外部的 在邊框線之外的! 你可以把 caption看成是input元素的 label 標籤一樣...
-
也不像教程上說的 thead, tbody, tfoot 三個標籤一定要同時出現...
- 用style css來改變 caption的對齊方式和 位置:
- 在jquery的方法函數 中, properties的Map中, 凡是 不是關鍵字 的, 不是函數名的, 等 , 像 屬性名, 樣式名, 設置的值, 等, 都最好是加上 引號! 否則, js parser會認爲出錯, 而不執行.
- caption { text-align: left; caption-side : top/bottom/left/right}