学习笔记—表格标签

表格的应用与创建

表格标签的语法格式


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

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

tabel表格标签属性

table表格标签的基础属性

  • width属性:定义表格的宽度,宽度有两种情况:一种是精确值,比如500,不会随着浏览器的缩减或增大而改变表格大小;二种是百分比,例如50%,会随着浏览器的缩减或增大而改变表格大小
  • border属性:规定围绕表格的边框宽度
  • cellspacing属性:规定单元格之间的距离(间距)

  • cellpadding属性:规定单元格边沿与其内容之间的空白

table表格标签的其他属性

  • align属性:规定表格相对周围元素的对齐方式,分别有left、center、right三个值,主要针对整个表格

  • bgcolor属性:规定表格的背景颜色

代码展示



    

    表格标签


                                                                                                                
1 2 3
a b c

效果展示

Tr标签属性

Tr标签的属性和值

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

  • align属性:定义表格行的内容水平对齐方式,分别有left、center、right三个值,主要针对表格内容

  • valign属性:规定表格行中内容的垂直对齐方式,分别有top(顶端)、middle(居中)、bottom(底端)、baseline(基线,针对大小不同的字体统一于底部进行对齐),主要针对表格内容

  • width属性:规定表格单元格的宽度

  • height属性:规定表格单元格的高度

  • colspan属性:规定单元格可横跨的列数

  • rowspan属性:规定单元格可横跨的行数

td标签属性

td标签的属性和值

  • width规定表格单元格的宽度

  • height规定表格单元格的高度

  • colspan规定单元格可横跨的列数

  • rowspan规定单元格可横跨的行数

代码展示




    表格标签其他属性


    
                                                                                                                                                                                                                                                        
1 2 3
A B
a c
s d

效果展示

细线表格的做法

普通表格与细线表格

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

代码展示



一般表格与细线表格


以下是一般表格

A B C

以下是细线表格

1 2 3

效果展示

表格的其他标签

表格的其他标签

  • th> 标签定义 HTML 表格中的表头单元格,就是表头,相当于标题的作用

  • 第二、

    标签定义表格的标题,并不包含在表格当中

  • 标签用于组合 HTML 表格的表头内容

  • 标签用于组合 HTML 表格的主体内容

  • 标签用于组合 HTML 表格的页脚内容

书写内容是先写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

效果展示

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

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

代码展示




    京东排版


    
                                                                                                                                                                        

效果展示

发表评论

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