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

html中table表格的使用

一、表格赏析

      1、基金网：http://fund.eastmoney.com/dingtou/syph_yndt.html

       2、NBA: http://china.nba.com/standings/

       3、12306：https://kyfw.12306.cn/otn/leftTicket/init

二、创建基本表格

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

 Table  桌子，表格

 Tr   r row

 Td 单元格 列

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

 

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

 

基本用法：

三、表格标签相关属性

table的相关属性：

ü  Widht:宽度

ü  Height:高度

ü  Align:对齐方式

ü  Bgcolor:背景颜色

ü  Border:边框

ü  Cellspaciing:单元格之间的距离

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

 

Border：表示表格的边框

注意：   

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

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

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

 

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

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

注意点：

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

 

bgcolor：表示表格背景颜色

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

Tr属性：

ü  Height:设置行高

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

ü  Align:设置水平对齐方式

ü  Valign:设置重直对齐方式

 

Height:设置行高

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

Align:设置水平对齐方式

Valign:设置垂直对齐方式

注意：

对于align设置时，属性值有：left   center  right

对于vlign设置时，属性值有：top   middle bottom

 

Td和th的相关属性：

Rowspan：行合并

Colspan：列合并