HTML（5）表格

1.创建基本表格

在html中，最核心的几个标签如下：

table

tr

td

th

表格是由行和列构成的一个二维结构。其中行在html中由tr来实现，列由多个td来构成。

其中td/th是对应到具体有行号和列号确定的唯一的单元格。

例子：

一般而言，每个表格都有一个表头。表头的单元格通常是加粗的，对于这样的单元格，可以使用th来实现。

2.表格标签相关属性

table标签的属性：

width：宽度

height：高度

align：表格本身对齐方式

bgcolor：背景颜色

border：边框

cellspacing：单元格之间的距离

cellpadding：单元格中的内容距离单元格边框的距离

-------------------------------------------------------------------------------------------------------------------------------

关于边框属性，它会同时作用于table本身以及单元格（td/th）。单元格本身没有border属性。

border不管设置多大，单元格的边框都为1。真正变化的是table的边框。

align属性

可以设置表格相对于父元素的对其方式，在当前案例中，父元素是body。

width和height属性

用来设置表格的大小，单位默认为px

bgcolor属性

用来设置表格的背景色。

cellspacing和cellpadding

---------------------------------------------------------------------------------------------------------------------------------------------------------------

tr有如下几个属性：

height

bgcolor

align:有left、center、right之分

valign:有top、middle、bottom之分

td/th的属性

width

height

bgcolor

align

valign

rowspan：合并行

colspan：合并列

 

row：行

col：column的简写，列

对于rowspan和colspan，都需要在第一个即将合并的单元格中来使用这两个属性。

对于rowspan而言，它需要跨行，而对于colspan而言，它在同一个tr中。

注意：

• width、height可以设置百分比或px值，border、cellpadding、cellspacing只能设置px。它们都可以直接设置数字，默认为px。

• border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。

• cellpadding属性来创建单元格内容与其边框之间的空白，而cellspacing属性则用来设置单元格之间的距离。

• colspan和rowspan必须在合并单元格的第一个单元格中设置。

理念：学会查手册，从学习的时候就开始。