html如何设置表格的大小.docx

html如何设置表格的大小.docx

《html如何设置表格的大小.docx》由会员分享，可在线阅读，更多相关《html如何设置表格的大小.docx（10页珍藏版）》请在冰豆网上搜索。

html如何设置表格的大小

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

html如何设置表格的大小

　　篇一：

html表格代码大全

　　1.html常用标签

　　①．跑马灯

　　②.字体效果

　　③.区断标记

　　④.链接

　　⑤.图像/音乐

　　⑥.表格

　　⑦.分割窗口

　　篇二：

html表格布局实例

　　[html]表格布局之实例版

　　|[>]

　　前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。

　　例如：

我们做一个简单的网站布局，代码如下：

　　　　bordercolor="#00ff99">

　　网站名称

　　网站标题

　　搜索框

　　左边

　　中间

　　右边

　　网站底部信息

　　产生如下的表格：

　　这是一张整体的表格，第一行和第四行分别跨度了三列，这里用

　　colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制；align="center"是对表格内文字的对齐限制，center表示中间，right表示靠右，left靠左。

　　表格的基础设置，可以参考：

　　[html]利用表格规划网站布局

　　[html]如何制作多行多列的表格

　　[html]设定表格的尺寸和边框

　　如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作模板迈近了一步。

^o^

　　表格布局现在仍然很多人在用，方便实在。

　　网页设计现有两种布局方法，一种即是表格布局，另一种是现在w3c极力推荐的css布局。

不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。

　　你所描述的问题属于表格的对齐问题，解决方式有以下几种：

　　如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html中的标签和属性是：

就能实现左边对齐。

你现在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。

　　我的一些表格布局的经验：

　　1、表格布局第一步：

先插入一个表格，宽度是760-780px（记住，一定要用px，不要用百分比），高度不用设置，然后令这个表格居中。

以后所有的内容都限制在这个表格中。

　　2、熟练使用表格嵌套。

也就是说，在一个表格中再插入另一个表格。

举个例子，把你要设计的页面分成大的几个部分，然后利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格，方法同上。

　　3、补充：

表格的边框一定要为0，即table中的border属性值为"0"。

也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。

　　如何利用表格实现画中画，也就是页中页效果

　　网页的排版大多使用表格，利用一个表个单元可以嵌入一个网页，你知道吗？

这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表

　　格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。

我写个最简单的例子代码：

＜html＞

　　＜head＞

　　＜title＞范例＜/title＞

　　＜body＞

　　＜tableborder="1"width="100%"＞

　　＜tr＞

　　＜td＞

　　＜iFRamesrc="example.htm"width="300"heitht="100"＞＜/iFRame＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　＜/body＞

　　＜/html＞

　　插入被嵌入页的关键代码是：

＜

　　iFRamesrc="example.htm"width="300"heitht="100"＞＜/iFRame＞。

　　example.htm是被嵌入的页面，标签＜iFRame＞还有一些可用的参数设置如下：

marginwidth:

网页中内容在表格右侧的预留宽度；例如：

marginwidth="20"，单位是pix，下同。

　　marginheight:

网页中内容在表格顶部预留的高度；

　　hspace:

网页右上角的的横坐标；

　　vspace:

网页右上角的纵坐标；

　　frameborder:

是否显示边缘；填"1"表示"是"，填"0"表示"否"

　　scrolling:

是否出现滚动条；填"1"表示"是"，填"0"表示"否"

　　表格背景图片的一个技巧

　　大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。

我们可以利用表格的这个特性来减小我们网页中图片的大小，比如下面的一个渐变图，你看上去像是一整张图片，它其实用的就是表格背景重复填充特性，而用的图片就是右边的那张，大小只有1.3k，在此如果要用一张大的图片是很不划算的。

你若要插入一根水平线，用这方法也很有效。

　　如何使鼠标指到表格，表格背景变色

　　这个特效用的是表格样式表，要达到此效果你只需在＜td＞代码中加入

　　onmouseout="this.style.backgroundcolor="""onmouseover="this.style.backgroundcolor="#FFcccc""，例：

　　　　表格布局常见问题解答

　　发布时间：

20xx-05-20

　　1、表格布满页面的问题

　　我们在很多地方看到为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。

刚开始学做网页的时候，我已经把表格的宽度设置为100%，但在浏览器上还是不能满屏显示，四周总有一圈空白，我曾对此感到迷惑不解，后来在论坛请教才知道这不是表格的错。

如果你用dreamweaver制作网页，这个问题很好解决，选择菜单modify--＞pageproperties,在弹出的对话框里设置left、top为0就ok了！

　　2.表格的变形问题

　　网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。

　　a、因为表格排列设置而在不同分辨率下所出现的错位

　　这种变形情况是：

　　1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的却

　　左排列或右排列，很难看，这是什么原因呢？

　　在解决这个问题之前，我们讲一下表格的排列。

表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。

在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设置为居中，或

　　左或右。

　　2、同样是这种分辨率切换，表格的上下排列不一致。

　　上边的所说的是水平错位，而这种则是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。

其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800

　　就出现了，解决办法如前，根据情况对排列进行设置，而不是采用其默认设置。

　　b、采用百分比而出现的变形

　　这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的，常出现在ie浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，这是因为表格的百分比也要随

　　着窗口的大小而改变成相应的百分比宽度。

　　当然了，解决办法是不要设置成百分比，我提倡的是，如果表格没有外围嵌套标记，则将宽等设置成固定宽度，如有外围嵌套标记，则将外转嵌套标记的宽度设置为固定值，而表格的宽或高可设置为百分

　　比，这样就不会出现变形了。

　　c、表格单元格之间互相干扰引起的变形

　　这种变形情况通常是在工具里制作主页时没有空隙，而在浏览时却发现莫名其妙地多出一些空隙，

　　而又不知原因在哪，很是令人讨厌。

　　本人也经常遇到类似的情况，解决办法一是先看表格设置有没有上面所谈的两种情况，如没有，可

　　能就是在划分表格时，同一行的单元格之间相互牵制所出现的问题。

　　我们知道，同一行的表格单元在诸如dreamweaver或Frontpage中经常频繁地被拆分，所以，同一行的单元格与另一个单元格的宽与高不一致，这时，你就要注意两个单元格属性：

colspan、rowspan。

colspan表示的是横向扩展，而rowspan则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向

　　的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和

　　这个单元格横向所占用的宽度是3个表格单元的宽度（这里取最大值），即colspan=3；而竖向的高度

　　是三个表格单元高度的总和，即rowspan=3。

　　那么我们说的这种变形就和这个设置有关，如果改变相邻单元格的高或宽与个数时，图中所指的单元格也会发生相应的变化，相互制约，调整起来很麻烦，这非我们所希望的，我本人提倡，如果表格比较复杂，最好采取嵌表格的形式，这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。

　　出现变形有情况还很多，我们就不一一陈述，我建议你在划分表格时，除了一些必要的高、宽设置外，将其它的高、宽设置全部删掉，一则减少了冗余代码，另则，也免除一些摸不着头脑的错误。

　　3、图片显示的问题

　　有时候我们明明在单元格中插入了背景图片，而且在dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。

遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看下面的表格：

　　表格代码：

　　＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞

　　＜trbackground="hzz01_050213.gif"＞

　　＜tdheight="19"＞＜/td＞

　　＜tdheight="19"＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　不错，上面的背景图确实有（background="hzz01_050213.gif"），但由于放错了地方，所以就显示不出来了，请把背景属性放在＜td＞标记里面，然后再预览一次，怎么样，这次出来了吧！

　　表格代码：

　　＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞

　　＜tr＞

　　篇三：

html中字体设置详细版

　　html字体设置

　　html字体设置大全

（1）比喻代码如下:

　　　　style="Font-size:

50pt;filter:

alpha（opacity=100,style=3）;width:

100%;coloR:

red;line-height:

150%;Font-Family:

华文行楷">金钥匙家园!

　　金钥匙家园!

说明:

opacity属性：

设置透明度，取值0至100之间的任意数值，100表示完全不透明；style属性：

设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。

而width:

100%则表示参与渐变的对象的宽度，通常都设置为100%。

（2）比喻代码如下:

　　style="Font-size:

50pt;filter:

blur（add=1,direction=30,strength=5）;width:

100%;coloR:

rrd;line-height:

150%;Font-Family:

华文行楷">金钥匙家园!

金钥匙家园!

说明:

add属性在运动模糊中,其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；direction属性是模糊移动的角度，其值为0至360度；strength属性是模糊移动的距离.（3）比喻代码如下:

　　　　style="Font-size:

50pt;filter:

dropshadow（color=lightgreen,offx=5,offy=3,positive=1）;width:

100%;coloR:

blue;line-height:

150%;Font-Family:

华文行楷">金钥匙家园!

金钥匙家园!

说明:

　　color属性：

设置影子文本的颜色；

　　offx和offy属性：

影子文本下落的位移值；

　　positive属性：

指定透明象素阴影，布尔型，0为是，1为否。

　　（4）比喻代码如下:

　　　　style="Font-size:

50pt;filter:

shadow（color=black,direction=180）;width:

100%;coloR:

red;line-height:

150%;Font-Family:

华文行楷">金钥匙家园!

金钥匙家园!

说明:

　　color属性：

阴影颜色；

　　direction属性：

阴影角度，值取0至360度。

　　（5）比喻代码如下:

　　　　style="Font-size:

50pt;filter:

wave（add=0,lightstrength=50,strength=4,freq=2,phrase=30）;width:

100%;coloR:

red;line-height:

150%;Font-Family:

华文行楷">金钥匙家园!

　　金钥匙家园!

说明:

add属性：

布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；

　　freq属性：

决定显示的频率，即应出现多少个波形；

　　phrase属性：

决定波形的形状，值取0至360之间；

　　strength属性：

决定波形的振幅。

　　html的常识:

　　跑馬燈

　　...普通捲動

　　...滑動

　　...預設捲動

　　...來回捲動

　　...向下捲動

　　...向上捲動

　　向右捲動

　　向左捲動

　　...捲動次數

　　...　　

rquee>設定寬度

　　...設定高度

　　...設定背景顏色

　　...設定捲動距離

　　...設定捲動時間

　　字体效果

　　...标题字（最大）

　　...标题字（最小）

　　...粗体字

　　...粗体字（强调）

　　...斜体字

　　...斜体字（强调）

　　...斜体字（表示定义）

　　...底线

　　...底线（表示插入文字）

　　...横线

　　...删除线

　　...删除线（表示删除）

　　...键盘文字

　　...打字体

　　...固定宽度字体（在文件中空白、换行、定位功能有效）　　...固定宽度字体（不执行标记符号）...固定宽度小字体

　　...字体颜色

　　...最小字体

　　...无限增大

　　区断标记

　　水平线

　　水平线（设定大小）

　　水平线（设定宽度）

　　水平线（设定颜色）

　　（换行）

　　...水域（不换行）

　　　　...

水域（段落）

　　...置中

　　粗体字

　　指定超级链接的分割窗口

　　更改预设字形大小

　　加入背景音乐

　　显示大字体

　　闪烁的文字

　　设定文字颜色

　　显示本文

　　换行

　　连结格式

　　（预设好连结路径）

　　外部连结

　　外部连结（另开新窗口）外部连结（全窗口连结）

　　外部连结（在指定页框连结）简单的html代码知识

　　　　一段文字

　　换行

　　...底线

　　...横线

　　...底线（表示插入文字）

　　...斜体字（表示定义）

　　...斜体字（强调）

　　...粗体字（强调）

　　加粗加粗

　　斜体斜体

　　加下划线加下划线

　　　　文字

文字左对齐

　　　　文字

文字居中

　　　　文字

文字右对齐

　　文字文字大小

　　文字文字颜色（#FF0000为红色）背景颜色（#00FF00为绿色）

　　字体颜色（#0000FF为蓝色）

　　...滑动

　　...预设卷动...来回滑动...向下滑动...向上滑动

　　向右滑动向左滑动