所在的位置: html >> html市场 >> WEB前端第4节表格table

WEB前端第4节表格table

北京中科白癜风医院刘云涛 https://jbk.familydoctor.com.cn/bjbdfyy_ys_1515/
学习表格前,有几个问题需要我们思考一下:表格是用来干什么的?表格的基本构成是什么?上图便是一个简单的表格。表格的作用存在即是合理。表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然div布局也可以做到,但是总没有表格来得方便。1.创建表格在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法:上面的语法结构中包含了基本的三对html标签,分别是table、tr、td,他们是创建表格的基本标签,缺一不可,下面是对它们进行具体的解释:table用来定义一个表格标签。tr标签用于定义表格中的行,必须嵌套在table标签中。td用于定义表格中的单元格,biubiu嵌套在tr/tr标签中。字母td指表格数据(tabledata),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。总结:表格的主要目的是用来显示特殊数据的一个完整的表格有表格标签(table)、行标签(tr)、单元格标签(td)组成,没有列的标签tr/tr中只能嵌套td/td类的单元格td/td标签,他就像一个容器,可以容纳所有的元素2.表格属性表格有部分属性我们不常用,这里重点记住cellspacing、cellpadding。我们经常有个说法,是三参为0,平时开发的我们这三个参数:border、cellpadding、cellspacing为0。3.表头单元格标签th作用:一般表头单元格位于表格的第一行或第一列,并且文本加粗居中。语法:只需用表头标签th/th替换相应单元格标签td/td即可。例子:4.表格标题caption定义和用法:注意:caption元素定义表格标题,通常这个标题会被居中且显示于表格之上。caption标签必须紧随table标签。这个标签只存在表格里面才有意义。5.合并单元格5.1合并单元格的2种方式跨行合并:rowspan=合并单元格的个数跨列合并:colspan=合并单元格的个数5.2合并单元格顺序先上后下先左后右5.3合并单元格三部曲先确定是跨行还是跨列合并根据先上后下先左后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量比如:tdcolspan=3/td删除多余的单元格单元格6.表格总结表格提供了HTML中定义表格式数据的方法。表格中由行中的单元格组成。表格中没有列元素,列的个数取决于行的单元格个数。表格不要纠结于外观,那是CSS的作用。表格的学习要求:能手写表格结构,并且能简单合并单元格。7.拓展对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注,这样更好的分清表格结构。thead/thead:用于定义表格的头部。用来放标题之类的东西。thead内部必须拥有tr标签!tbody/tbody:用于定义表格的主体。放数据本体。tfoot/tfoot放表格的脚注之类。以上标签都是放到table标签中。


转载请注明:http://www.aierlanlan.com/rzdk/6638.html