学习笔记—表格标签

/ 0评 / 0

表格的应用与创建

表格标签的语法格式


表格标签的语法格式
    行,需要多行就复制多个tr        单元格,里面放置单元格内容。        单元格,相当于一列。    
   

table是表格标签,tr是一行,td是一个单元格

tabel表格标签属性

table表格标签的基础属性

table表格标签的其他属性

代码展示



    

    表格标签


                                                                                                                
1 2 3
a b c

效果展示

Tr标签属性

Tr标签的属性和值

tr标签是table表格标签的行标签,下面介绍tr标签属性

td标签属性

td标签的属性和值

代码展示




    表格标签其他属性


    
                                                                                                                                                                                                                                                        
1 2 3
A B
a c
s d

效果展示

细线表格的做法

普通表格与细线表格

因为在table中的边框设置为1时,单元格的左右两边都有间距,所以最少都是两个像素,显示出来就不是细线表格边框,而细线表格边框是一像素的,下面介绍细线表格一像素做法

代码展示



一般表格与细线表格


以下是一般表格

A B C

以下是细线表格

1 2 3

效果展示

表格的其他标签

表格的其他标签

书写内容是先写thead在写tfoot在写tbody,显示时会划分区域,最上方是thead、往下依次是tbody和tfoot,不会根据html代码中的thead、tbody、tfoot的顺序来绝对显示顺序

如果需要进行复杂的表格搭建,可以在table当中嵌套table

代码展示



    

    其他标签


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
课程表
head-1 head-2 head-3 head-4 head-5
tfoot-1 tfoot-2 tfoot-3 tfoot-4 tfoot-5
tbody-1 tbody-2 tbody-3 tbody-4 tbody-5
tbody-6 tbody-7 tbody-8 tbody-9 tbody-10

效果展示

利用表格标签制作购物图标表格(类似京东)

利用表格标签制作购物图标表格,点击表格内图片,可以打开对应的商品页面,以下是效果图:

代码展示




    京东排版


    
                                                                                                                                                                        

效果展示

发表评论

电子邮件地址不会被公开。 必填项已用*标注