当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML中的表格元素

HTML/XHTML教程
HTML表单标记教程(1):
XHTML入门学习教程:表单标签
XHTML入门学习教程:框架标签使用
XHTML:框架结构标签
HTML5 与 XHTML2
兼容性的 inline-block 属性
关于XHTML的H1标记的位置
HTML5 语义化结构化规范化
改进网站设计提供的有意的建议
HTML5的结构和语义(5):交互
HTML5的结构和语义(5):内嵌媒体
HTML5中语义化 b 和 i 标签
网页教案,针对初学者的教案
HTML5的结构和语义(4):语义性的内联元素
HTML5的结构和语义(2):结构
通过优化网页页面降低对内存及CPU的占用
XHTML 2.0新功能抢先预览
HTML5的结构和语义(1):前言
XHTML标签都有一个结束标记
面向XHTML的IE条件注释

HTML/XHTML教程 中的 HTML中的表格元素


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 24 ::
收藏到网摘: n/a

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

<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它们都是可