[原创]HTML代码学习小结(三)
表格代码
在网页和博客中,经常用到表格,有的滚动字幕也要用到表格代码,<table></table>用来创建表格,下面是表格代码的相关设置。
表格的相关代码 |
用途及说明 |
<table height= width=> |
表格的高、宽,一般用像素值 |
<tr></tr> |
行<tr height= width=>设置高、宽 |
<td></td> |
单元格<td height= width=>设置高、宽,文本只有放在<td></td>中才能显现 |
< tr align=> |
是水平对齐,可以是left(左对齐)、center(居中)、right(右对齐) |
< tr valign=> |
是垂直对齐,可以是top(顶端对齐)、middle(居中对齐)或bottom(底部对齐) |
<table bgcolor=> |
设置表格的背景色。 |
<table border=> |
设置边框的宽度,若不设置此属性,则边框宽度默认为0。 |
<table bordercolor=> |
边框的颜色。 |
<table bordercolorlight=> |
边框明亮部分的颜色 |
<table bordercolordark=> |
边框昏暗部分的颜色 |
<table cellspacing=> |
表格格子之间空间的大小。 |
<table cellpadding=> |
表格格子边框与其内部内容之间空间的大小。 |
说明:以上各种代码可以配合使用。颜色代码使用十六进制RGB颜色码或Html语言规定的颜色名(如 RED为红色) |
表格示范在浏览器中显示如下:
上图的表格代码:
<title>用表格代码设计的示范表格</title>
<p align="center">
<font size=4; color=Black; face=宋体>办公家具统计表</p>
<table align="center" border=1 width="64%" bgcolor=#E8E8E8 cellpadding="2" bordercolor="#0000FF"
bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
<tr>
<th width="18%" rowspan="2">办公室</th>
<th width="60%" colspan="3" height="43">品名</th>
</tr>
<font size=4; color=Black; face=黑体>
<tr>
<td width="23%" align="center">
办公桌(张)</td>
<td width="24%" align="center">
办公椅(把)</td>
<td width="27%" align="center">
沙发(张)</td>
</tr>
<tr>
<td width="18%" align="center" height="24">办公室1</td>
<td width="23%" align="center" height="24">2</td>
<td width="24%" align="center" height="24">2</td>
<td width="27%" align="center" height="24">1</td>
</tr>
<tr>
<td width="18%" align="center">办公室2</td>
<td width="23%" align="center">2</td>
<td width="24%" align="center">2</td>
<td width="27%" align="center">1</td>
</tr>
<tr>
<td width="18%" align="center">办公室3</td>
<td width="23%" align="center">1</td>
<td width="24%" align="center">1</td>
<td width="27%" align="center">1</td>
</tr>
</table>
代码祥解:
1.<title> </title>是标题,它之间的文字不是显示在正文中, “用表格代码设计的示范表格”这几个字是显示在浏览器最上方的标题栏;
2.<p align="center"> :
P是段落,align是水平对齐方式,Center是居中;
3.<font size=4; color=Black; face=宋体>:
Font是字体,size是大小,在这里是字号,color是顏色[参看HTML代码学习小结(一)代码简介及顏色代码 介绍一种神奇的网页调色板],face是字型,也就是平时说的宋体等;
4.<table align="center" border=1 width="64%" bgcolor=#E8E8E8 cellpadding="2" bordercolor="#0000FF"
bordercolorlight="#7D7DFF" bordercolordark="#0000A0">:
table align="center"同上,是指表格居中;border=1是边框的宽度为1;width="64%"是宽度占页面的64%;bgcolor=是表格的背景色;cellpadding="2"是格子边框与其内部内容之间空间的大小是2;bordercolor=是边框的颜色;bordercolorlight="#7D7DFF" bordercolordark="#0000A0">是边框明亮部分的颜色的灰暗部分的顏色;
5.<tr></tr>、<th></th>、<td></td>:
分别表示行、表格头和单元格;
6.<th width="18%" rowspan="2">办公室</th>
是指表格头(最上面的办公室)的宽度占18%,间距是2(指相当于2个格子的高度);
7. <th width="60%" colspan="3" height="43">品名</th>
colspan="3"也是间距,是指相当于3个格子的宽度;
评论