HTML(二) -- 表格设计

目录

1.  基本格式:

表格常用属性:

2.  表格标签


为什么使用表格?

  • 简单通用、结构稳定
  • 数据显示的非常的规整、可读性非常好

1.  基本格式:

自定义表格
列 1 列 2 列 3
行 1,列 1 行 1,列 2 行 1,列 3
行 2,列 1 行 2,列 2 行 2,列 3

结果展示:

HTML(二) -- 表格设计_第1张图片

表格常用属性:

属性名 属性值 描述
align left、center、right 表格的水平对齐方式,默认为left左对齐
valign top、middle、bottom 规定表格行中内容的垂直对齐方式。
border pixels 规定表格单元是否有边框,默认为” ”,表示没有边框
cellpadding pixels、% 单元格内文字与边框的距离
cellspacing pixels、% 补白,表格中单元格之间的距离,默认为2
width 像素值或百分比 规定表格的宽度
height 像素值或百分比 规定表格的高度
bgcolor rgb(x,x,x)、#xxxxxx、colorname 表格的背景颜色

 2.  表格标签

2.1  标签

用来 定义一个表格。

2.2  

标签

用来定义  表格头部。(头部通常包含一行或多行表格标题定义,以帮助描述表格的内容。 )

2.3  

标签

用来定义  表格主题。(这是表格中包含数据的部分,每个单元格包含了一个数据项。)

2.4  

标签

用来定义 表格一行内容。

2.5  

标签

用来定义 表格首行的内容。

HTML(二) -- 表格设计_第2张图片

 2.6  

标签(可以记作:单元格标签

用来定义 表格的每一个单元格的内容。 

HTML(二) -- 表格设计_第3张图片

3.  表格的合并

HTML(二) -- 表格设计_第4张图片示例演示:

姓名 年龄 联系方式
张三 20 电话: 010-12345678
李四 22 电话1: 010-66666666
电话2: 010-66666666

结果展示:

HTML(二) -- 表格设计_第5张图片

 继续学习之路:

HTML(一) -- 基本标签

HTML(二) -- 表格设计

HTML(三) -- 表单设计

HTML(四) -- 多媒体设计

 如果对你有帮助,请帮我点一下赞,我才有动力继续创作,谢谢!

你可能感兴趣的:(#,HTML,html5)