表格标记的使用
表格无论在网页制作还是在博客里是使用最多的标记之一,表格在网页的布局定位、在文本和图像的位置控制方面都有很强的功能。 表格的基本构成有三个标记组成,分别是: <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> <td>这是一行一列的表格</td> </tr> </table> 说明:只要在表格标记里加一对行标记<tr>和一对<td>单元格标记,就能实现。 这个表格做出来是不显示边框的,加一个边框属性border=2,加一个边框颜色属性bordercolor=#ff0000 看看效果怎样: 再做一个二行二列的表格: <table border=2 bordercolor=#ff0000> <tr> <td>第一行第一列单元格</td> <td>第一行第二列单元格</td> </tr> <tr> <td>第二行第一列单元格</td> <td>第二行第二列单元格</td> </tr> </table> 说明:这里加入了二对行标记<tr>和四对单元格标记<td> 看看效果:
第一行第一列单元格 | 第一行第二列单元格 | 第二行第一列单元格 | 第二行第二列单元格 | 我们以四行八列(单元格)的表格为例,着重说一下表格的一些常用属性的用法: 这是表格的基本代码,加了一个表格边框属性(系统默认为黑色)。默认情况下不显示边框的。 代码: <table border=3> <tr> <td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td> </tr> <tr> <td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> </tr> <tr> <td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> </tr> <tr> <td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> </tr> </table> 效果:
第一行1单元格 | 第一行2单元格 | 第一行3单元格 | 第一行4单元格 | 第二行1单元格 | 第二行2单元格 | 第二行3单元格 | 第二行4单元格 | 第三行1单元格 | 第三行2单元格 | 第三行3单元格 | 第三行4单元格 | 第四行1单元格 | 第四行2单元格 | 第四行3单元格 | 第四行4单元格 | 加一个边框颜色属性bordercolor,属性值为#66ccff。再加一个表格背景颜色属性bgcolor,属性值为#FFF8DC。 代码: <table border=3 bordercolor=#66ccff bgcolor=#fff8dc> <tr> <td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td> </tr> <tr> <td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> </tr> <tr> <td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> </tr> <tr> <td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> </tr> </table> 看看效果怎样: 第一行1单元格 | 第一行2单元格 | 第一行3单元格 | 第一行4单元格 | 第二行1单元格 | 第二行2单元格 | 第二行3单元格 | 第二行4单元格 | 第三行1单元格 | 第三行2单元格 | 第三行3单元格 | 第三行4单元格 | 第四行1单元格 | 第四行2单元格 | 第四行3单元格 | 第四行4单元格 | 去掉bgcolor=#fff8dc,加上一个表格background属性,背景纯色图片(粉红色)。再加上表格的宽度属性width=600与高度属性height=300。 代码: <table border=3 bordercolor=#66ccff width=600 height=300 background=http://img.blog.163.com/photo/JXQVrqLbX52z9RqNEhRBXg==/2549881814022432618.jpg> <tr> <td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td> </tr> <tr> <td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> </tr> <tr> <td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> </tr> <tr> <td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> </tr> </table> 看看效果如何: 第一行1单元格 | 第一行2单元格 | 第一行3单元格 | 第一行4单元格 | 第二行1单元格 | 第二行2单元格 | 第二行3单元格 | 第二行4单元格 | 第三行1单元格 | 第三行2单元格 | 第三行3单元格 | 第三行4单元格 | 第四行1单元格 | 第四行2单元格 | 第四行3单元格 | 第四行4单元格 | 加一个居中标记<p align =center> , 加一个单元格间距属性值cellspacing=15. 加一个单元格衬距属性值cellpadding=10. 代码: <p align=center> <table border=3 bordercolor=#66ccff width=600 height=300 cellspacing=15 cellpadding=10 background=http://img.blog.163.com/photo/JXQVrqLbX52z9RqNEhRBXg==/2549881814022432618.jpg> <tr> <td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td> </tr> <tr> <td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> </tr> <tr> <td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> </tr> <tr> <td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> </tr> </table> 看看效果: 第一行1单元格 | 第一行2单元格 | 第一行3单元格 | 第一行4单元格 | 第二行1单元格 | 第二行2单元格 | 第二行3单元格 | 第二行4单元格 | 第三行1单元格 | 第三行2单元格 | 第三行3单元格 | 第三行4单元格 | 第四行1单元格 | 第四行2单元格 | 第四行3单元格 | 第四行4单元格 | 标记<caption>..........</caption> :这是包含在表格内的,只不过看不见表格线而已。如果表格移动或者在html中重新定位,使用capiton标记定义的标题会随着表格相应的移动。 代码: <p align=center> <table border=3 bordercolor=#66ccff bgcolor=#fff8dc width=600 height=300> <caption>这是四行八列的表格</caption> <tr> <td>第一行1单元格</td><td>第一行2单元格</td><td>第一行3单元格</td><td>第一行4单元格</td> </tr> <tr> <td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> </tr> <tr> <td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> </tr> <tr> <td>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td>第四行4单元格</td> </tr> </table> 效果: 这是四行八列的表格 第一行1单元格 | 第一行2单元格 | 第一行3单元格 | 第一行4单元格 | 第二行1单元格 | 第二行2单元格 | 第二行3单元格 | 第二行4单元格 | 第三行1单元格 | 第三行2单元格 | 第三行3单元格 | 第三行4单元格 | 第四行1单元格 | 第四行2单元格 | 第四行3单元格 | 第四行4单元格 | 表头标记<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。 代码如下: <p align=center> <table border=3 bordercolor=#66ccff bgcolor=#fff8dc width=600 height=300> <caption>这是四行八列的表格</caption> <th colspan=4 height=20 bgcolor=#FFE4C4><font face=隶书 size=3 color=#FF0000>这是四行八列的表 格</font></th> <tr height=60> <td>第二行1单元格</td> <td>第二行2单元格</td><td>第二行3单元格</td><td>第二行4单元格</td> </tr> <tr height=60 bgcolor=#F0FFFF> <td>第三行1单元格</td> <td>第三行2单元格</td> <td>第三行3单元格</td> <td>第三行4单元格</td> </tr> <tr height=60> <td bgcolor=#ADFF2F>第四行1单元格</td> <td>第四行2单元格</td> <td>第四行3单元格</td> <td bgcolor=#00FFFF>第四行4单元格</td> </tr> </table> 看看效果吧: 这是四行八列的表格 这是四行八列的表 格 | 第二行1单元格 | 第二行2单元格 | 第二行3单元格 | 第二行4单元格 | 第三行1单元格 | 第三行2单元格 | 第三行3单元格 | 第三行4单元格 | 第四行1单元格 | 第四行2单元格 | 第四行3单元格 | 第四行4单元格 | |
评论