web前端学习笔记(五)——表格

HTML表格结构

表格的作用及应用场景:呈现数据或统计信息

表格的html基本结构包括:表格区

、表格行、单元格,多个形成
。3个基本表亲是表格的基本构成结构,缺一不可且嵌套关系不可改变。多个形成

表格结构的扩展

web前端学习笔记(五)——表格_第1张图片

如果使用

、、,必须一起使用。且顺序是。

CSS表格样式

表格的个性:表格类的元素是比较特殊的一类元素,他们有自己独特的displaty模式

样式应用技巧:

1.所有表格类的元素都可以看做是box,使用盒模型来设置

2. 基于表格元素之间固定的嵌套关系,使用盒模型时注意以下几点:

web前端学习笔记(五)——表格_第2张图片

表格边框设置

默认情况下,表格

和单元格
都有边框的设置。通过border-collapse属性将两者边框进行合并。

单元格

的特性

可以把

看作是个box进行设置,其display模式为table-cell。对宽高的设置敏感且会自动分配,以施佩玉的纵狂傲。完美呈现vertical-align属性效果,实现
中的内容元素垂直居中。

web前端学习笔记(五)——表格_第3张图片

实例:漂亮的数据表格





	




Main mode Area of workplace
Central London Rest of Inner London Outer London All London Rest of Great Britain Great Britain
All modes 33 24 20 25 15 17
Car and van 48 32 25 29 20 20
Motorbike,moped,scooter 36 29 27 31 19 21
Bicycle 33 24 20 25 15 17
Bus and coach 48 32 25 29 20 20
National Rail 36 29 27 31 19 21
Underground 33 24 20 25 15 17
walk 33 24 20 25 15 17

效果图:

web前端学习笔记(五)——表格_第4张图片

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