(4)表格的html标签,html标签之表格标签

HTML表格组成:

由

或	标签：标签中；

其语法如下：

1行1列的内容	1行2列的内容

…

2行1列的内容2行2列的内容

…

…

里面,它不能单独使用,相当于

、	标示行中的一个列,需要嵌套在

table标签属性:

1)border标签属性：设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；

例：

border标签属性

table{

border: 15px solid #000;

}

th,td{

border: 1px solid #000;

}

姓名	年龄	性别
张三	19	男

2)width标签属性：设定表格的宽度；不建议通过width标签属性设置表格宽度，建议向table标签添加width样式属性进行设置。

px :设置以像素计的宽度(例：width="100px")

%：设置以包含元素的百分比计的宽度(例：width="100%")

例：

width标签属性

table{

width:"80%"；

}

姓名	年龄	性别
张三	19	男

3)align标签属性：指定表格相对于周围标签的对齐方式,建议向table标签添加样式属性进行设置;

属性值：

left：左对齐表格

right：右对齐表格

center：居中对齐表格

(1)通过float样式属性实现左右对齐；

left：元素向左浮动

right：元素向右浮动

none：默认值，元素不浮动

inherit：规定应该从父元素继承float属性的值

(2)通过margin样式属性实现居中对齐；

margin:0 auto;

例:

align标签属性

table{

margin: 0 auto；

}

姓名	年龄	性别
张三	19	男

4)cellspacing 标签属性：设定单元格之间的间距(单位：px),建议向table标签添加border-spacing样式属性进行设置;

例:

cellspacing标签属性

table{

border-spacing: 0；

}

姓名	年龄	性别
张三	19	男

5)cellpadding标签属性：设定单元边沿与单元内容之间的间距(单位：px)，建议向td或th标签添加padding样式属性来实现；

例：

cellspacing标签属性

table{

padding: 8px；

}

姓名	年龄	性别
张三	19	男

6)bgcolor标签属性：设置表格背景颜色；

color_name：规定颜色值为颜色名称的背景颜色

hex_number：规定颜色值为十六进制的背景颜色

rgb_number：规定颜色值为rgb代码的背景颜色

bgcolor标签属性

table{

background-color: "red"；

}

姓名	年龄	性别
张三	19	男

7)border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；

separate:默认值，边框会被分开；

collapse:边框会合并为一个单一的边框；

inherit:规定应该从父元素继承border-collapse属性的值；

例:

border-collapse样式属性

table{

font: 12px;/*字体大小*/

padding:10px;/*单元格边框与内容之间的间距*/

border: 1px solid #000;/*表格边框*/

}

姓名	年龄	性别
张三	19	男

用标签属性完成一个表格：

table{

border: 1px solid black;

width: 20%;

/*float:right;*/

margin: 0 auto;

border-spacing:0 ;

background-color: red;

border-collapse: collapse;

}

td{

border: 1px solid black;

padding: 10px;

}

1	1	1
1	1	1
1	1	1

标签属性：

1)align标签属性：设置表格行中单元格内容的水平对齐方式；

left：左对齐内容(默认值)

right：右对齐内容

center：居中对齐内容(th元素的默认值)

justify：对行进行伸展，这样每行都可以有相等的长度

char：将内容对准指定字符

2)valign标签属性：设置表格行中单元格内容的垂直对齐方式；

top：对内容进行上对齐

middle：对内容进行居中对齐(默认值)

bottom：对内容进行下对齐

baseline：与基线对齐

3)bgcolor标签属性：设定表格行的背景颜色

color_name：规定颜色值为颜色名称的背景颜色

hex_number：规定颜色值为十六进制的背景颜色

rgb_number：规定颜色值为rgb代码的背景颜色

例：

table{

border: 1px solid black;

width: 20%;

/*float:right;*/

margin: 0 auto;

border-spacing:0 ;

background-color: red;

border-collapse: collapse;

}

tr{

height: 50px;

text-align: center;

vertical-align: top;

background-color: salmon;

}

td{

border: 1px solid black;

}

1	1	1
1	1	1
1	1	1

和标签属性：

1)width标签属性与height标签属性：设定单元格的宽度和高度

pixels :设置以像素计的宽度(例：width="100px")

percent：设置以包含元素的百分比计的宽度(例：width="100%")

2)bgcolor标签属性：设定单元格背景颜色

color_name：规定颜色值为颜色名称的背景颜色

hex_number：规定颜色值为十六进制的背景颜色

rgb_number：规定颜色值为rgb代码的背景颜色

3)align标签属性：设置单元格内容的水平对齐方式

left：左对齐内容(默认值)

right：右对齐内容

center：居中对齐内容(th元素的默认值)

justify：对行进行伸展，这样每行都可以有相等的长度

char：将内容对准指定字符

4)valign标签属性：设置单元格内容的垂直对齐方式

top：对内容进行上对齐

middle：对内容进行居中对齐(默认值)

bottom：对内容进行下对齐

baseline：与基线对齐

5)colspan样式属性：设置单元格横跨多少列

例：

colspan标签属性

#title {

text-align: center；

font-weight: bold;

}

姓名	年龄	性别
张三	19	男

6)rowspan样式属性：设置单元格横跨多少行

例：

rowspan标签属性

上午				语文
化学
历史
政治

7)nowrap标签属性：设定单元格的内容是否换行

使用table表的知识完成如下操作：

nowrap标签属性

姓名	年龄	地址
张三	19	北京市海淀区