HTML中的表格元素

　2005-07-07 19:10:38　来源：WEB开发网　　　

核心提示：--HTML中的表格元素[转帖]一，<table>标签，HTML中的表格元素，<table>标签是表格的标识符，用来界定表格的范围，好了，今天差不多就到这儿吧！太多了看不过来，<table>标签是成对使用的标签，手标签和和尾标签之间的内容就是表格的内容

--　HTML中的表格元素[转帖]
一，<table>标签。<table>标签是表格的标识符，用来界定表格的范围。<table>标签是成对使用的标签，手标签和和尾标签之间的内容就是表格的内容。<table>标签的属性主要有border,width,height,align,cellapcing,cellpasdding.它们都是可选的。

1，border属性的参数值是数字，表示表格边框宽度所占的像素点数。它也可以不带有参数值使用，仅表示该表格是有边框的。例如，<table border=10>表示该表格的边框宽度为10 个像素点。

2，width和height属性的作用是指定表格的大小。其中width属性用来规定表格的宽度，height属性用以指定表格的高度。这两个属性的参数值可以是数字或者百分数，其中数字表示表格的宽(高）所占的像素点，百分数表示表格的宽(高）占据浏览器窗口的宽（高）度的百分比。例如：<table width=200 height=50%>表示表格的宽度为200个像素点，高度为浏览器窗口高度的50%。

3，align属性的参数值为left,center和right之一，分别表示表格位于其相邻文字的左侧、表格水平居中和表格位于相邻文字的右侧。例如：

文字说明，这个就是表格居于相邻文字左侧的范例，只要改变一下align的属性参数就可以改变表格的位置了。

<HR>

4,cellspacing属性。cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

5,cellpadding属性。用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。例如：

<html>
<head>
<title>测试页面</title>
</head>
<body>
<HR>
没加如单元格属性的规定之前的样子：<BR>
<table border=3>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TH>
<TR>
<TD>2</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TR>
</table>
<HR>
加入单元格属性规定之后的情形：<BR>
<table border=3 cellspacing=10 cellpadding=10>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TH>
<TR>
<TD>2</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TR>
</table>
</body>
</html>

接着我们来看看刚刚看到的几个不熟悉的标签是怎么个意思。

一，<CAPTION>标签。是表格的标题的标签。它是成对使用的标签。在首标签和尾标签之间的内容就是表个的标题。<caption>有两个属性：align和valign它们都是可选的。

其中，align属性的参数值为left,center,right之一，分别表示表格标题与表格的左边沿儿对齐，位于表格中间和表格的右边沿儿对齐。缺省时，表格标题位于表格的中间；valign属性的参数值是top和bottom之一，分别表示表格标题位于表格的上方和下方，缺省时，表格的标题位于表格的上方。例如：

<html>
<head>
<title>测试页面</title>
<body>
<HR>
<table border=3>
<caption align=right><b>这就是该表格的标题</b></caption><BR>
<TR>
<TH>单元格</TH><TH>单元格</TH>
<TH>单元格</TH><TH>单元格</TH><TH>单元格</TH>
</TR>
<TR>
<TD>1</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TH>
<TR>
<TD>2</TD><TD>单元格</TD>
<TD>单元格</TD><TD>单元格</TD><TD>单元格</TD></TR>
</table>
<HR>
</body>
</html>

这个例子中的表格标题是与表格的右边沿儿对齐的。

二，<TR>标签。是行标签。HTML的表格是按行组织的。一个表格由几行组成，就要有几个标签与之对应。行标签<TR>是成对使用的标签。它必须和<TH><TD>标签配合使用，后者在使用时嵌套在<TR>和</TR>之间，用来规定该行中各单元格的内容。<TR>标签有两个属性。即align和valign属性，他们都是可选的。

其中align属性的参数值为left,center和right之一（以后如我特别说明，该属性的参数都是这三个）分别表示个行中各单元格内容是左对齐、水平居中和右对齐的。缺省时为left（居左）；valign属性的参数值是top,middle和bottom之一，分别表示该行中各单元格内容是紧靠上沿儿，垂直居中和紧靠下沿儿的。缺省时为middle（居中）。

三，<TH>和<TD>标签

<TH>和<TD>标签都是用来规定单元格内容的，表头标签<TH>用来规定表头元素的内容，表头元素一般位于每列的首行，用来说明该列的具体数据是关于哪个对象的。<TH>标签是成对的。数据标签<TD>也是成对使用的，首标签和尾标签之间的内容就是该单元格的具体数据（也就是对表头的解释内容）由于两者都是用于规定单元内容的，<TH>和<TD>标签的所有属性及相应的属性功能是完全一样的。<TH><TD>标签的属性有rowspancolspanalignvalign。

（1）rowspan属性的参数值是数字，表示该单元格所跨的行数。缺省值为1。

（2）colspan属性的参数值也是数字，表示该单元格所跨的列数。缺省值为1。

（3）align属性用于规定单元格内容在水平方向上的位置。三个参数值分别表示该单元格是左对齐，居中还是右对齐。缺省时为left（左对齐）

（4）valign属性用于规定单元格内容在垂直方向上的位置。属性的参数值为top,,middle和bottom之一，分别表示该单元格内容是紧靠上沿儿，垂直居中还是紧靠下沿儿。缺省时为middle（垂直居中）。

好了，今天差不多就到这儿吧！太多了看不过来，不容易记忆。