HTML之表格标签

1.什么是表格?

表格最重要的目的是显示表格类数据,比如就业薪资表,财务报表,学生信息表,座次表等。其实表格在网页开发中使用非常的广泛,它跟前面所学的列表一样,都是由一些固定的标签搭配起来使用,只是它的标签稍多了一些。

基本结构标签:

:定义表格

:定义表格的行

:定义表格中的表头内容

:定义表格中的主体内容

:定义表格中的表注内容(脚注)

(包裹在tr中),文字会加粗居中显示

表格相关属性:
1、align="center"
2、border="1"/""边框
3、cellpadding = "1" 单元格边和内容之间的距离
4、cellspacing="2"单元格与单元格之间的距离
5、width="100" height="500"表格的宽度和高度

3.表格合并行列

跨行与跨列的属性在td标签中进行:

colspan : 跨列合并(横向),一个单元格占一行内多个单元格的位置 跨n列,就把下面的n-1个td删除

rowspan : 跨行合并(纵向),一个单元格占一列内多个单元格的位置 跨n行,在把它下面n-1 个 tr的td删除

4.制作课程表





    
    
    
    起名困难户标题



    
:定义表格中的单元格

:定义表格中的表头单元格

:定义表格标题

 2.怎么使用表格?

基本语法:


    

        

    

注意:表头单元格标签

课程表
项目 上课 休息
星期 星期一 星期二 星期三 星期四 星期五 星期六 星期七
上午 语文 数学 英语 英语 物理 计算机 休息
数学 数学 地理 历史 化学 计算机
化学 语文 体育 计算机 英语 计算机
政治 英语 体育 历史 地理 计算机
下午 语文 数学 英语 物理 计算机 英语 休息
数学 数学 地理 历史 化学 计算机

HTML之表格标签_第1张图片

 5.最后

注意:列的个数要一致 如果一个格子中没有内容,请尽量使用 ( 空格)补齐

建议:如果要完成跨行跨列,先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。

你可能感兴趣的:(html,前端)