HTML表格

HTML表格简介

就是利用代码实现像excel那样的表格,基本结构:

内容 内容 内容
内容 内容 内容

上面的表示是一个2行3列的表格,
说明:
1、tr,table row(表格行);和表示行的开始和结束
2、td,table data cell(表格每一个格子),而和表示单元格的开始和结束。
3、

表示整个表格的开始和结束
所以现在你知道了上面的表格是2行3列了,嘿嘿。
完整代码实现(记得一定自己敲一遍哦):




    
    HTML表格table


    
内容 内容
内容 内容

实现效果:
image.png
注意:标签内的数量是可以不一样的,可以自己去试一下。

表格标题caption,表头单元格th

基本每一个表格都是有一个标题和列的标题的,在html中也一样。
示例:




    
    HTML表格table


    
表格标题
1 2 3
内容 内容 内容
内容 内容

实现效果:
HTML表格_第1张图片

表格语义化

看到文字可能会不知所云,其实本质上就是引入了thead,tbody,tfoot三个标签,让表格在每一部分都分区域,这样的话,在学习到CSS对html进行样式控制的时候更加准确,同时也使得代码更具有逻辑性。
示例:




    
    HTML表格table


    
表格标题
1 2 3
内容 内容 内容
内容 内容
内容汇总 内容汇总

实现效果:
HTML表格_第2张图片
很多时候tfoot是不需要的,我们可以根据实际情况来使用。

合并行rowspan,合并列colspan

有时候一行(或者一列)对应着比较大的内容时就要使用,对多行(或者多列)内容的一个汇总。




    
    HTML表格table


    
表格标题
1 2
内容 内容 内容
内容 内容
内容汇总 内容汇总

实现效果:
HTML表格_第3张图片
说明:rowspan="2",就是直接把这一行当成两行来看就行了,colspan同理。

汇总练习

目标展示:
HTML表格_第4张图片
代码实现(一定要自己手动去敲一遍):




    
    
    HTML表格table


    
学生成绩单
Name Sex Age Math Score
张三 20 96.5
李华 19 97
总分 193.5

说明:

这里使用了CSS的表格样式控制,为了能够凸显表格的每一个格子,更好的理解代码。

你可能感兴趣的:(html5)