选择显示字体大小

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&#37;>表示表格的宽度为200个像素点,高度为浏览器窗口高度的50&#37;。 

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

<html
<head> 
<title>测试页面</title> 
</head> 
<body> 
<table border=3 width=60&#37; 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(垂直居中)。 

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


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容,无不良广告,无恶意代码

Valid XHTML 1.0 Transitional

creativecommons