html web页面中table表格的使用方法和介绍

html中table表格的使用
一、表格赏析
       2、NBA: http://china.nba.com/standings/
二、创建基本表格

在html中创建表格,也是一组标签,最核心的标签有如下几个:

 Table  桌子,表格

 Tr   r row

 Td 单元格 列

 Th 单元格 列通常用于第一行,相当于标题,头部的意思

 

表格是由行和列组成的一个二维结构,其中的行用tr表示,列用td或th表示。

 

基本用法:

html web页面中table表格的使用方法和介绍
三、表格标签相关属性

table的相关属性:

ü  Widht:宽度

ü  Height:高度

ü  Align:对齐方式

ü  Bgcolor:背景颜色

ü  Border:边框

ü  Cellspaciing:单元格之间的距离

ü  Cellpadding:单元格的内容与单元格边框的距离

 

Border:表示表格的边框

html web页面中table表格的使用方法和介绍

注意:   

1,border是作用于table,但是它对单元格也有影响,让单元格也产生了边框。

2,如果把border边框调整为10的话,这只对最外层的边框起作用,对里面单元格是不起作用的,始终为1个像素。

html web页面中table表格的使用方法和介绍

3,对于border的属性值,如果不写单位,默认单位是px

 

align:表示表格相对于父元素的对齐方式,这原父元素是body

html web页面中table表格的使用方法和介绍

width和height:表示表格宽度和高度

html web页面中table表格的使用方法和介绍

注意点:

对于width和height的理解:一般理解成min-widht和min-height

 

bgcolor:表示表格背景颜色

html web页面中table表格的使用方法和介绍

Cellspacing和cellpadding:表示单元格之间的距离,单元格中的内容与单元格的边框的距离

html web页面中table表格的使用方法和介绍

Tr属性:

ü  Height:设置行高

ü  Bgcolor:设置某一行的背景颜色

ü  Align:设置水平对齐方式

ü  Valign:设置重直对齐方式

 

Height:设置行高

html web页面中table表格的使用方法和介绍

Bgcolor:设置某一行的背景颜色

html web页面中table表格的使用方法和介绍

Align:设置水平对齐方式

html web页面中table表格的使用方法和介绍

Valign:设置垂直对齐方式

html web页面中table表格的使用方法和介绍

注意:

对于align设置时,属性值有:left   center  right

对于vlign设置时,属性值有:top   middle bottom

 

Td和th的相关属性:

Rowspan:行合并

Colspan:列合并

html web页面中table表格的使用方法和介绍
html web页面中table表格的使用方法和介绍