大概在年以前,也就是web1.0时代,表格就是我们的一种布局方式。
在web2.0时代,网页重构的浪潮中,表格布局被DIV+CSS布局所代替。
但是不代表表格无用,表格应该回归到它应该做的事情上,那就是用于排列二维数据。
以前有一个极端的现象,程序员们都觉得用表格来布局了很low,然后大家都尽量的避免使用表格,导致在排列数据的时候也放弃使用表格,转而使用div,结果发现使用div来排列数据简直太崩溃了,非常的恼火,远不如表格简单。最后大家得出结论,还是要正确的看待表格的作用。
表格就非常适合用来做这种行和列的数据排放,就和Excel表格一样的作用。
因为我们不可能拿表格来做非常复杂的事情,它也的确不太适合,所以我们只需要掌握表格的基本结构,比如能够做一点简单的表格即可。
下面我们来认识一下表格的基本标签,也就只有几个,并不复杂。
1、table
单词就是表格的意思,说明这里是表格。
2、caption
表格标题,基本上没什么用处,可以不用理会。
3、thead
表格表头,也就是表格的头部。
4、tbody
表格表身,也就是表格的主体内容。
5、tfoot
表格表尾,也就是表格的结尾。
在实际应用中,表头和表尾可以省略,只使用表身即可。
6、tr
表格一般是用行和列构成的,tr表示行。
7、th、td
表格一般是用行和列构成的,th、td表示列。
th主要表示表头的单元格,有文字默认样式,字体加粗,并且居中。
td主要表示主体的单元格。
表格是由行和列构成的二维表,内容必须放在表格的单元格中。
表格的作用是存放二维的数据。
连续的单元格可以合并,列上面的单元格合并,使用colspan=“单元格的个数”,行上面的单元格合并,使用rowspan=“单元格的个数”。
我们只要掌握了上面这几点就可以完成一些常规的布局了。