html表格宽度百分比

竭诚为您提供优质文档/双击可除

html表格宽度百分比

篇一：html表格

序言你如何使用web标准来组织大量的数据呢？如果使用数量庞大的嵌套元素，将所有的数据都有序地放入行和方框中，一定会让你伤透脑筋。不过对此有一个好的解决办法，那就是使用表格。对网页设计师来说，使用表格是将数据组织整理为表格形式的好方式。换句话说，表格、图表及其它信息图表可以帮助你阅读和处理经过整理的大量信息，让你可以对照和比较不同的数据。你在网上随时都可以看到各种表格和图表，如政治选举结果的摘要或比较、体育比赛的统计、价格比较表、尺码表等。在互联网发展的早期，那时候css作为一种将表现从html的结构中分离出来的方法尚未得到运用，网页设计师普遍使用表格来进行页面布局，创建表格和方框等来安排页面内容的摆置。当然这是不正确的做法。使用表格进行页面布局，会使页面充斥着大量的嵌套表格和无用代码，从而导致文档体积膨胀，难于维护且难于修改。

1 20

即使是现在，你都还能看到这类网站。不过你们一定要记住，应该只将表格用作其本身的用途，即把数据列入表格之中。至于页面布局，则应使用css来控制。在本篇文章中，我将讲述如何恰当地使用html表格。本篇文章的内容目录如下：最基本的表格为表格添加一些特性进一步调整表格的结构使用css为表格添加样式，使表格更好看总结延伸阅读练习题最基本的表格我首先以语义化的html代码编写一个最基本的表格，这个用作示例的表格列入的是，北美的太平洋地区最近火山爆发的比较数据。在我还是一个小孩子时，就喜欢火山，在我们一家人夏季去探访我祖母的旅程中，曾说服我母亲带我去看了几座火山。当时我非常希望亲眼看到某一座太平洋西北部的火山的爆发，不过未能如愿。第一个表格的代码如下所示：Volcanoname

locationlastmajoreruptiontypeoferuptionmt.lassencalifornia1914-17explosiveeruptionmt.hoodoregon1790spyroclasticflowsandmudflowsmt.st.helenswashington1980explosiveeruption上面的代码渲染后的样子：

Volcanonamelocationlastmajoreruptiontypeoferuptionmt.lassencalifornia1914-17explosiveeruptionmt.hoodoregon1790spyroclasticflowsandmudflows

mt.st.helenswashington1980explosiveeruption让我

2 20

们一项一项地分析一下以上代码中的html标记：：这个table元素是必须的，用来告诉浏览器你想以表格方式排列内容。：tr元素定义表格的一行。这可以让浏览器将和标签之间的所有内容组织到表格的一行中。：td元素定义表格的单元格，或者行中各个单独的内容。所使用的td单元格的数量应仅为将数据放入单元格所实际需要的数量。不要使用空的td单元格来创建空格或填充距，而应该使用css来创建所需的空格或填充距，这不仅是将html文档的结构和表现相分离的好方式，同时还可以使那些靠屏幕阅读器，为他们朗读表格中内容的视力受损的用户，更容易理解表格。请注意，这些基本元素必须像下面那样被嵌套：

contentcontentcontent如果以其它顺序排列这些元素，将导致浏览器以非常奇怪的方式渲染表格，甚至无法渲染表格。为表格添加一些特性现在这个基本的表格已创建出来，接下来可以为表格添加一些复杂一点的特性。首先，我将加入标题和表头，使表格里的数据更语义化并更能为屏幕阅读器所易读。加入这些代码后，表格的标记如下所示：

RecentmajorVolcaniceruptionsinthepacificnorthwest

Volcanonamelocationlastmajoreruptiontypeoferuptionmt.lassencalifornia1914-17explosiveeruptionmt.hoodoregon1790spyroclasticflowsandmudflowsmt.st.helenswas

3 20

hington1980explosiveeruption上面的代码渲染后的样子：RecentmajorVolcaniceruptionsinthepacificnorthwestVolcanonamelocationlastmajoreruptiontypeoferuption

mt.lassencalifornia1914-17explosiveeruptionmt.hoodoregon1790spyroclasticflowsandmudflowsmt.st.helenswashington1980explosiveeruption所使用的新元素包括：：使用caption元素，可让你为表格加入标题。除非你选择使用css设置不同的文本对齐方式，绝大多数浏览器会将表格标题居中显示，并将标题行的宽度渲染为和表格一样的宽度。：th元素用于表格内的表头单元格。这不仅有助于更为语义化地描述表头内的内容的功能，还有助于各种不同的浏览器和设备更为准确地渲染表头。以上这个示例中显示的是使用th元素最为简单的方式。进一步调整表格的结构作为调整这个表格的最后一个步骤，我将定义表头部分和表体部分，加入一个表脚，并定义行和列标题的范围。我还将就加入一个描述表格内容的摘要属性，最后写成的标记如下所示：RecentmajorVolcaniceruptionsinthepacificnorthwestVolcanonamelocationlastmajoreruptiontypeoferuption 篇二：html表格标记及属性 html表格标记及属性

作者：等你爱我文章来源：豆豆技术网点击数：22更新

4 20

时间：20xx-7-13

表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。 常用表格标记 ...表格指令。 相关属性: ·align调整 ·bgcoloR背景颜色 ·boRdeR边框 ·height高度

·width宽度...表格标题。 相关属性:

·align调整...表格列(可省略)。 相关属性:

·align调整...表格栏标题(表头)粗体字(可省略)。 相关属性: ·align调整 ·colspan栏宽

·Rowspan栏高...表格栏资料(储存格)(可省略)。 相关属性: ·align调整

5 20

·bgcoloR背景颜色 ·height高度 ·width宽度 ·colspan栏宽 ·Rowspan栏高 举例 如:(基础型)

太平洋网络学院太平洋网络学院 太平洋网络学院太平洋网络学院

如:(加强型)增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。

表格标题 行标题1行标题2 列标题1aaaa bbbb 列标题2cccc dddd

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

6 20

常用的html标签和属性

作者：未知来源：未知加入时间：20xx-7-17中国建站资源网

表示绝对居中

表格标识的开始和结束 属性：

cellpadding=数值单位是像素定义表元内距 cellspacing=数值单位是像素定义表元间距 border=数值单位是像素定义表格边框宽度 width=数值单位是像素或窗口百分比定义表格宽度 background=图片链接地址定义表格背景图 表格中一个表格行的开始和结束 表格中一个表元的开始和结束

强制换行

文本标识的开始和结束 属性： face=字体 color=颜色

加粗文字标识的开始和结束 属性：

style=font-size:40pt;用样式表方式控制字体大小，

7 20

这里是40点

分区标识的开始和结束 属性：

align=|center|left|right|水平对齐方式 动态标识的开始和结束如标识内放置贴图格式则可实现图片滚动 属性：

scrollamount=1~60滚动速度

direction=|left|right|up|down|滚动方向 scrolldelay=滚动延时单位：毫秒 段落标识 空格符 贴图标识 属性：

src=图片链接地址贴图标识必备属性

style=filter:alpha(opacity=100,style=2); filter：样式表滤镜； alpha：透明滤镜，

opacity：不透明度100（0~100）； style：样式2（0~3） rules=\"none\"不显示内框\" 多媒体文件标识

8 20

属性：

sRc=\"Filename\"

设定音乐文件的路径，文件类型除了可以播

放.rm;.mp3;.wav等音频，还可播放.swf和.mov等视频。autostaRt=tRue/False

是否要音乐文件传送完就自动播放，tRue是要，False是不要，默认为False loop=

设定播放重复次数，loop=6表示重复6次，true或-1为无限循环，false为播放一次即停止。staRtime=\"分:秒\" 设定乐曲的开始播放时间，如20秒后播放写为staRtime=00:20 Volume=0-100

设定音量的大小。如果没设定的话，就用系统的音量。 widthheight

设定控制面板的大小，都设为0可隐藏播放器 hidden=tRue 隐藏控制面板

contRols=console/smallconsole 设定控制面板的样子

背景音乐标识，只能用于.wav和.mp3格式。 属性：

9 20

loop=

设定播放重复次数，loop=6表示重复6次，true或-1为无限循环，false为播放一次即停止。常用代码汇编 1.标题文字..........#=1~6；h1为最大字，h6为最小字

2.字体变化..........

【1】字体大小..........#=1~7；数字愈大字也愈大 【2】指定字型..........

【3】文字颜色..........rr：表红色（red）色码gg：表绿色（green）色码bb：表蓝色（blue）色码 3.显示小字体.......... 4.显示大字体.......... 5.粗体字.......... 6.斜体字.......... 7.打字机字体.......... 8.底线.......... 篇三：第四章html表格 第四章html表格 一、基本语法

表示表格，使用标记分别定义表行、表头和表元。 标签符

width属性——表格宽度

10 20

可以为像素点值或百分比 border属性——边线宽度 具体数值，0表示不显示边线

Frame属性——控制表格边框表示表格最外层的四条框线，该属性的取值可以是：

Void——无边框。void是默认值，即默认时不显示边框 above——仅有顶框 below——仅有底框

hsides——仅有顶框和底框（水平方向） vsides——仅有左、右侧框（垂直方向） lhs——仅有左侧框 rhs——仅有右侧框 box——包含全部四个边框 border——包含全部四个边框

rules属性——控制是否显示以及如何显示单元格之间的分隔线，取值可以是：

none——无分隔线。none是默认值，即默认时不显示 单元格间的分隔线 rows——仅有行分隔线 cols——仅有列分隔线 all——包括所有分隔线

align属性——控制表格与页面其它内容的对齐方式，

11 20

取值可以是：

left、center、 right

bgcolor属性——设置表格的背景颜色 background属性——设置表格的背景图案 cellspacing属性——单元格之间的距离 cellpadding属性——分割线与数据之间的距离 二、放入标题 1、基本语法 标签符

定义表格的标题

align属性——表格标题在网页中的对齐方式 取值为：left、center、right 成绩单 2、举例

建立caption.htm,输入以下代码：

1997—1999年考试人数统计表

12 20

1997—1999年考试人数统计表 1997 10000 1998 15000 1999 30000

三、插入一个空数据单元格 1、语法 标签符

13 20

定义行中的具体单元格

align属性——单元格内数据的水平对齐方式 取值为：left、center、right

valign属性——单元格内数据的垂直对齐方式 取值为：top、middle、bottom bgcolor属性——单元格的背景颜色

width属性、height属性——单元格宽度、高度 具体数据值或百分比

rowspan属性——单元格所占的行数 表示该单元格高度为三行

colspan属性——单元格所占的列数 2、举例

建立td.htm,输入以下代码：

1997—1999年考试人数统计表

1997—1999年考试人数统计表

14 20

年份 人数 1997 10000 1998 15000 1999 30000

15 20

4、创建一个新的数据行 1、语法 标签符

定义表格的一行

align属性——行中数据的水平对齐方式 取值为：left、center、right

valign属性——行中数据的垂直对齐方式 取值为：top、middle、bottom

bgcolor属性——整行单元格的背景颜色 2、举例

建立tr.htm,输入以下代码：

1997—1999年考试人数统计表

16 20

1997—1999年考试人数统计表 年份 人数 1997 10000

17 20

1998 15000 1999 30000

五、跨多列的表格单元 1、语法

跨多列的单元表格相当于把原来一行中对应的几个单元格合并，它是和的属性之一，语法如下： colspan=n> 或

colspan=n>

18 20

2、举例

建立colspan.htm,输入以下代码:

1997—1999年考试人数统计表

1997—1999年考试人数统计表 年份

19 20

人数 1997 10000 1998 15000

20 20