HTML（5）表格

1.创建基本表格

在html中&＃xff0c;最核心的几个标签如下&＃xff1a;

table

tr

td

th

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

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

例子&＃xff1a;

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

2.表格标签相关属性

table标签的属性&＃xff1a;

width&＃xff1a;宽度

height&＃xff1a;高度

align&＃xff1a;表格本身对齐方式

bgcolor&＃xff1a;背景颜色

border&＃xff1a;边框

cellspacing&＃xff1a;单元格之间的距离

cellpadding&＃xff1a;单元格中的内容距离单元格边框的距离

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

关于边框属性&＃xff0c;它会同时作用于table本身以及单元格&＃xff08;td/th&＃xff09;。单元格本身没有border属性。

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

align属性

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

width和height属性

用来设置表格的大小&＃xff0c;单位默认为px

bgcolor属性

用来设置表格的背景色。

cellspacing和cellpadding

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

tr有如下几个属性&＃xff1a;

height

bgcolor

align:有left、center、right之分

valign:有top、middle、bottom之分

td/th的属性

width

height

bgcolor

align

valign

rowspan&＃xff1a;合并行

colspan&＃xff1a;合并列

row&＃xff1a;行

col&＃xff1a;column的简写&＃xff0c;列

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

对于rowspan而言&＃xff0c;它需要跨行&＃xff0c;而对于colspan而言&＃xff0c;它在同一个tr中。

注意&＃xff1a;

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

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

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

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

理念&＃xff1a;学会查手册&＃xff0c;从学习的时候就开始。