html中的表格元素
2014-09-29来源:易贤网

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之一,分别表示表格位于其相邻文字地左侧、表格水平居中和表格位于相邻文字地右侧.例如:

<html>

<head>

<title>测试页面</title>

</head>

<body>

<table border=3 width=60% align=left>

<tr>

<th>单元格</th><th>单元格</th>

<th>单元格</th><th>单元格</th><th>单元格</th>

</tr>

<tr>

<td>1</td><td>解释项</td>

<td>解释项</td><td>同上</td><td>同上</td>

</tr>

<tr>

<td>2</td><td>解释项</td><td>同上</td>

<td>又一单元</td><td>接着来</td>

</tr>

</table>

文字说明,这个就是表格居于相邻文字左侧地范例,只要改变一下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(垂直居中).

好了,今天差不多就到这儿吧!太多了看不过来,不容易记忆.

更多信息请查看IT技术专栏

推荐信息