html中 table的结构彻底搞清 caption th thead等

最新推荐文章于 2024-09-20 16:09:38 发布

Lerch_Wang

最新推荐文章于 2024-09-20 16:09:38 发布

阅读量2.9k

点赞数

分类专栏：前端学习

原文链接：https://www.cnblogs.com/bkylee/p/5918219.html

版权

14 篇文章 0 订阅

订阅专栏

在html中写table的时候,要注意它的结构, 和所包含的标签层次.

要得到一个空的单元格, 直接写 <td></td>就好了, 或许可以加   这个"字符实体" , 表示实实在在的一个实体..

thead, tbody tfoot
从名字上就可以看出, 这三者是有明确的 "语义"的! 是从表格各部分的作用上来区分表格的 : thead是用来表示表格的头部的, 主要用来存放表格的表头的, 如一些表格的"字段名"fields. tbody 是表格的正文, 是用来存放真正的数据的; tfoot是表格的脚部, 主要是用来对表格做总结性的统计, 备注等.

结构:

位于表格(边框线) 之外的 ,居于表格上方居中的 , 叫标题, caption 相当于word文档的标题. 文章的题目... 用来说明表格的作用,描述等等. 用标签 <caption> 表格标题 </caption>来表示.
第一行的内容, 叫表头, 也叫fields, 用来表示表格中数据的类别, 字段的. 如name, age, sex等
后面是正文, 最后的行可以叫tfoot , 也可以不叫什么...

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组成的标签结构是:

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

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}