HTML中的表格元素

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

<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(垂直居中)。 

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

时间: 2024-12-22 02:42:56

HTML中的表格元素的相关文章

在MonoTouch中自定义表格

为什么要定制表格? 表格在很多iPhone应用程序中都是必需的UI元素.虽然对于应用程序开发而言,这并非是一项新发明,鉴于设备尺寸等方面的限制,表格在iPhone中的功能是非常固定的. 苹果在其SDK中,直接内置了很多风格来让你定制表格.不过,在你最初创建表格的时候,它看起来非常简单.在没有进行任何定制的时候,你可以为表格选择两种基本风格,默认风格和分组风格: 在对表格中的单元格进行一点调整后,你就可以添加图标和说明文字: 你甚至能改变单元格的字体和颜色,然而,有时候这样还是不足够.如果你真的想

ASP.NET中的表格认证之一

asp.net 简介 ASP开发人员总是自己解决认证问题,但ASP.NET已经支持内置的认证功能.在本篇文章中,我们将介绍如何这二者在认证方面有什么变化,如何用很少的代码使用FormsAuthentication使用网站更安全. 在ASP编程中,无论是使用集成的安全协议(例如Windows NT LAN Manager [NTLM]的寻问/应答认证协议),基本的安全协议(指纯文本)还是自己创建的安全协议,其工作量都是十分惊人的.表格认证使开发人员能够在Web.config文件中存储用户名.口令等

ASP.NET中的表格认证之二

asp.net 简介 本文的第二部分主要是介绍如何使用ASP.NET实现我们自己的表格认证的方法.在第一部分中,我们讨论了表格认证的基本概念和原理.在阅读本文的第二部分之前,读者需要了解表格认证的一些基本概念,或者已经阅读过第一部分. 自定义表格认证的建立 使用的页面:Default.aspx.Login.aspx.Web.config.Users.xml.HashPassword.aspx 在这个自定义表格认证的例子中,我们将自始至终地使用一个XML文档存储用户名和口令.建立该自定义表格认证所

javascript实现对表格元素进行排序操作_javascript技巧

我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来

POI解析word中的表格

问题描述 最近有需求要处理word中的表格然后想用POI这个库下了3.7的版本最近又出了3.8的版本一共试过这么两段代码第一段try{FileInputStreamin=newFileInputStream("D:\XBRL.doc");//载入文档POIFSFileSystempfs=newPOIFSFileSystem(in);HWPFDocumenthwpf=newHWPFDocument(pfs);Rangerange=hwpf.getRange();//得到文档的读取范围in

在PowerPoint中实现表格的动态填充

我比较喜欢使用PowerPoint来制作课件,一次一位化学老师让我帮他解决这样的问题:利用PowerPoint展示一张空表,然后随着实验的进展动态地填写表格. 由于在PowerPoint中插入的表格一般是Word中的表格或Excel工作表,这种表格是一个整体,所以不能对单元格中的内容进行动态设置.我通过反复实践,问题得到了解决,具体方法如下: 1.手工绘制表格 单击"绘图"工具栏的[直线]按钮,在需要插入表格的幻灯片上手工绘制表格. 2.填写表格 单击"绘图"工具栏

android-从 HTML 代码中创建表格

问题描述 从 HTML 代码中创建表格 <table style="width: 560px; border: 2px solid #fee3cc; font-size: 1em;" rules="all" border="1" cellpadding="5" cellspacing="0"> <tbody> <tr> <td> <p>Bharat

excle2013如何在打印预览中调整表格的大小

  excle2013在打印预览中调整表格的大小的教程: 打印预览中调大小步骤1:打开excel文件,先找到要调整大小的表格. 打印预览中调大小步骤2:表格-打印-打印预览. 打印预览中调大小步骤3:出现打印预览对话框,发现表格内容位置不正,怎么调节到中间位置呢? 打印预览中调大小步骤4:目前默认的纵向位置,可调节横向. 打印预览中调大小步骤5:点击页边距,调整位置,向中间位置拉.

PHP去除数组中的空值元素(array

说来惭愧,以前在去掉数组的空值是都是强写foreach或者while的,利用这两个语法结构来删除数组中的空元素,简单代码如下: <?php foreach($arr as $k=>$v){ if(!$v) unset($arr[$k]); } 事实证明如果数组过大的情况下这样处理的效率并不高.因为foreach是将当前操作的数组进行copy,每操作一下foreach,都是copy了一个变量,页面里面如果有太多的foreach,会是一个很大的消耗. 在网上闲逛的时候,看到人有提示用array_f