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}