HTML学习笔记—表格
表格在web2.0的时代就已经被淘汰了,但是这并不意味着表格已经被淘汰了因为他可以更加清晰的排列数据。1、表格的基本结构table标签(代表着其中包含的是一个表格)tr标签(代表着其中的内容是一个行的内容)td标签(代表着其中的内容是一个列的内容)(注意嗷,tr标签中包含td标签也就是说第一行包括第一列,第二列…)举个栗子
小明 小李 小张 小红
运行结果就是 小明 小李
!!!!!!小张 小红
2、完整结构 cartion—表格标题标签,定义表格的标题,表格有且只能有一个标题标签,类似于作文不能有两个大标题一样。在默认的情况下,其位于表格的最上方。
th—表头单元格,顾名思义,它代表着表格的头部,也就是说它就是表格的第一行,但是并不等于td对应效果的第一行,它的作用是第一行对应这一列的标题,会粗体居中。具体效果可以对应中学考试的成绩单的科目栏。
小明 小李 小张 小红
运行结果:
小明 小李
小张 小红
3—语义化
html讲究明确,也就是说该是啥就是啥现在的叫法还是有些笼统,为了更加明确代码内容,所以引入3个标签。
thead标签:代表着表头的内容,表头的内容也就是说代表着第一行的内容,即上面代码内容的第一个tr或者说th标签中的内容。
tbody标签:代表着表格的身体内容,也就是说,除了第一行和最后一行的内容之外的所有内容。
tfeet标签:代表着表格的脚步,也就是说表格的最后一行,一般来说大部分表格的最后一行都是统计类的内容。有了这些标签可以使的代码的可读性更好,后期处理更加方便,语义也更加明确。
举个栗子:
| 姓名 | 语文 | 数学 | 英语 |
|---|---|---|---|
| 小明 | 50 | 50 | 50 |
| 小张 | 50 | 50 | 50 |
| 小李 | 90 | 90 | 90 |
| 总分 | 150 | 150 | 180 |
注意此处只写出了body标签内的内容!
运行结果:
姓名 语文 数学 英语
小明 50 50 50
小张 50 50 50
小李 90 90 90
这是一个完整且语义化完全的表格代码。
4—合并行和合并列 rowspan合并行标签,代表着将N行表格合并。 使用方法:
姓名 小明 喜欢水果 苹果 香蕉
运行结果:
姓名!!!!!小明
!!!!!!!苹果
喜欢水果
!!!!!!!香蕉
(感叹号是为了更加准确的表示,不知道为啥不显示空格)colspan合并列标签:用法与合并行标签类似。



