章鱼博客

       表格标记的使用

       表格无论在网页制作还是在博客里是使用最多的标记之一，表格在网页的布局定位、在文本和图像的位置控制方面都有很强的功能。

表格的基本构成有三个标记组成，分别是：

<TABLE></TABLE>   这是一对表格标记。

<TR></TR>               这是一对行标记。

<TD></TD>              这是一对单元格标记又叫列标记。

表格有很多属性和属性值，常用的分别是：

border=#         代表表格边框，属性值是正整数。

bordercolor=#   代表表格边框的颜色，属性值是英文名或者是十六进制的颜色码。

bgcolor=#         代表表格的背景颜色，属性值是英文名或者是十六进制的颜色码。

background=#   表示表格的背景图片，属性值是图片的地址(URL)。

cellspacing=#    指单元格间距，表示图框内细线与边框的距离。属性值是正整数。

cellpadding=#   指 单元格衬距，表示插入内容与单元格间距细线的距离。属性值是正整数。

width=#          代表表格的宽度，属性值是正整数。

height=#        代表表格的高度，属性值是正整数。

align   表示对齐方式，有三个属性值，分别是：

align =left     表示左对齐，这也是系统默认的。

align =center  表示居中对齐。

align =right    表示右对齐。

我们来做一个一行一列的表格:

<table border=2 bordercolor=#ff0000>

</tr>

</table>

说明：只要在表格标记里加一对行标记<tr>和一对<td>单元格标记，就能实现。

这个表格做出来是不显示边框的，加一个边框属性border=2,加一个边框颜色属性bordercolor=#ff0000

看看效果怎样：

 我们以四行八列(单元格)的表格为例，着重说一下表格的一些常用属性的用法：

这是表格的基本代码，加了一个表格边框属性（系统默认为黑色）。默认情况下不显示边框的。

代码：

效果：

加一个边框颜色属性bordercolor，属性值为#66ccff。再加一个表格背景颜色属性bgcolor，属性值为#FFF8DC。

代码：

看看效果怎样：

 去掉bgcolor=#fff8dc，加上一个表格background属性，背景纯色图片（粉红色）。再加上表格的宽度属性width=600与高度属性height=300。

代码：

<table border=3 bordercolor=#66ccff width=600  height=300

看看效果如何：

加一个居中标记<p align =center> , 加一个单元格间距属性值cellspacing=15. 加一个单元格衬距属性值cellpadding=10.

代码：

看看效果：

标记<caption>..........</caption> ：这是包含在表格内的，只不过看不见表格线而已。如果表格移动或者在html中重新定位，使用capiton标记定义的标题会随着表格相应的移动。

代码：

效果：

      表头标记<TH>.....</TH>。定义表格行标记<TR>第一行以醒目方式显示。

属性colspan=4，属值是正整数。这是一个跨行属性，属值是4表示跨第一行四个单元格。我们把表头的高度设置为height=20。表格的其它三行高度属性值设置为每行height=60。因为表格的总高度为height=300.

再加入一对文字标记<font face=隶书 size=3 color=#FF0000>................</font>

怎么在表头一行里换背景颜色，只要在表头标记里加一个属性值bgcolor=#FFE4C4，即可。

怎么在行标记<tr>里换背景颜色呢？设置方法同表头标记<th>一样，这里我把表格的<tr>第三行设置为bgcolor=#F0FFFF。那怎么在表格的单元格<td>里也把单元格背景颜色也换了，这里我把第四行1单元格颜色设置为bgcolor=#ADFF2F，把第四行4单元格颜色设置为bgcolor=#00FFFF。

代码如下：

看看效果吧：