网页设计用好HTML表格标记及属性

设计|网页|网页设计

  表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。
  常用表格标记

<TABLE>...</TABLE> 表格指令 。
相关属性 :
· ALIGN 调整
· BGCOLOR 背景颜色
· BORDER 边框
· HEIGHT 高度
· WIDTH 宽度 <CAPTION>...</CAPTION> 表格标题 。

相关属性 :
· ALIGN 调整 <TR>...</TR> 表格列 ( </TR>可省略 ) 。

相关属性 :
· ALIGN 调整 <TH>...</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。

相关属性 :
· ALIGN 调整
· COLSPAN 栏宽
· ROWSPAN 栏高 <TD>...</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。

相关属性 :
· ALIGN 调整
· BGCOLOR 背景颜色
· HEIGHT 高度
· WIDTH 宽度
· COLSPAN 栏宽
· ROWSPAN 栏高

举例

如 : ( 基础型 )
<TABLE BORDER=1 ALIGN=CENTER>
<TR><TD>网页教学网</TD><TD>网页教学网</TD></TR>
<TR><TD>网页教学网</TD><TD>网页教学网</TD></TR>
</TABLE>

网页教学网  网页教学网
网页教学网 网页教学网

如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
<TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF>
<CAPTION>表格标题</CAPTION>
<TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2
<TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A
<TR><TD>B <TD>B <TD>B <TD>B
<TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C
<TR><TD>D <TD>D <TD>D <TD>D
</TABLE>

行标题 1 行标题 2
列标题 1 A A A A
B B B B
列标题 2 C C C C
D D D D

  看了以上的例子,应该了解表格的基本写法吧!

时间: 2025-01-21 12:47:33

网页设计用好HTML表格标记及属性的相关文章

HTML表格标记及属性

表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格.使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观. 常用表格标记 <TABLE>...</TABLE> 表格指令 . 相关属性 : · ALIGN 调整 · BGCOLOR 背景颜色 · BORDER 边框 · HEIGHT 高度 · WIDTH 宽度 <CAPTION>...</CAPTION> 表格标题 . 相关属性 : · ALIGN 调整 <TR>...

网页设计中打造细边表格的三种方法

    首先声明以下几个方法并不是全部,只是今天我在制作的时候又一次用到了其中的一种方法,所以在此也把自己常用的方法跟大家共享一下.希望对大家有所帮助,当然更欢迎大家提出自己的想法,大家彼此交流一下,共同进步!     一.利用CSS样式 style="border:1px solid #ff0000" <table width="200" border="0" cellpadding="0" cellspacing=&

网页制作学习用好HTML字体标记及属性

网页 我们在这里将要谈的是有关文字的标记,包括字体大小.颜色.字型...等变化,适当的应用可以增加页面的美观! 常用字体标记 <Hn>...</Hn> 标题 ,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行.通常用在如章节.段落等标题上. 如 : <H2> 标题 </H2> 标题 如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 ) 标题 <B>...</

网页设计应:提高网页表格可读性设计技巧

文章描述:提高表格可读性的一些技巧. 表格的应用 由于工作原因,经常接触到表格.我们发现,表格不但广泛的运用在各类数据收集和分析,同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式),能够很好的表达信息之间的逻辑关系,易于帮助理解横纵信息之间的关系. 在实际的网页设计应用中,表格横纵相互独立又相互关联的模式尤其适用于: 1.组织和展示大量的信息 表格简单的结构不但能包含大量的信息,且同时保证信息的可读性,便于读者快速扫描信息.从大量的条目中找到所需的信息.

走出DIV+CSS网页设计标准化的误区

DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位. "DIV+CSS"是一种错误的说法,下面也会说到,DIV只是HTML中的一个标签,而CSS是一种语言,这两者也根本不能成为对等.并且,"DIV+CSS"的话法也容易引起歧义.让大家认为WEB标准就一定要用到DIV,以导致

网页设计引入CSS样式的五种方式

css|设计|网页|网页设计 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STY

写给网页设计师的网页设计简史

  编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术.设计伴随着信息共享催动着整个时代滚滚向前.这是一段简短的网页设计发展史,我们可以看到技术.设计与思想的演进,看到无数有识之士改变世界的剪影.本文作者是网站Froont.com的联合创始人Sandijs Ruluks. 当我发现设计网页有多投机取巧的方法之时,就逐渐开始对手打网页代码失去兴趣.的确,许多网页设计的问题并不止一种解决方案,但是很少有方案能解决所有的浏览器兼容性问题.最令我纳闷的

使用html表格和CSS进行混合网页设计

最近一篇关于桢(Frames)的文章让我开始考虑网页设计的当前状态.不久前公布了许多的网页标准.使用CSS以及XHTML开发网页程序的优点正日益得到人们的称颂,但仍有许多 的开发者团体更依赖于使用HTML表格来控制页面的输出.让我们来考虑一下使用HTML表格和使用CSS方法的各自优点. 老方法未必不好 当我刚开始进行网页设计时,我吃惊于HTML表格的强大和弹性.它们可以被无穷嵌套以达到预期的设计效果,而原先空白表格无法在浏览器中正确显示的问题则可以通过空白GIF图 片予以修正.但是HTML和表格

用PPT中的表格工具模仿优秀的网页设计

用PPT中的表格工具模仿优秀的网页设计    只要肯留心,处处皆学问",这句话用在PPT学习上真的是再确切不过了.随着PowerPoint软件的升级换代,PPT在视觉呈现方面能力越来越强,可以说是由"体现结构"升级为"展现画面",由"示意图"升级为"效果图".如果我们在做PPT的时候还一点"美观"都不讲究,一点"布局"都不掌握,那最终的效果恐怕很难被听众所接受. 初学PPT的朋