转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
HTML中的表格元素         ★★★★

HTML中的表格元素

作者:闵涛 文章来源:闵涛的学习笔记 点击数:686 更新时间:2009/4/23 11:14:05
一,<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它们都是可选的。 

其中,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。 





没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台