html,表格,左对齐
篇一:html表格布局实例
[html]表格布局之实例版
| [<<] []
前面我们讲了html表格的基础知识,今天我们通过一个实例让大家更清晰的了解下表格的用途。
例如:我们做一个简单的网站布局,代码如下:
<table align=center width=500 height=400 border=1
bordercolor=#00ff99
<tbody
<tr<td colspan=3 align=center网站名称</td
</tr
<tr<td width=30% height=25网站标题</td
<td colspan=2 align=right搜索框</td
</tr
<tr<td width=30%左边</td
<td width=40%中间</td
<td右边</td
</tr
1
<tr<td colspan=3 align=center网站底部信息</td
</tr
</tbody
</table
产生如下的表格:
这是一张整体的表格,第一行和第四行分别跨度了三列,这里用
colspan=3来限制,而第二行的“搜索框”占用了两列的位置,用colspan=2控制; align=center是对表格内文字的对齐限制,center表示中间,right表示靠右,left靠左。
表格的基础设置,可以参考:
[html]利用表格规划网站布局
[h择默认的对齐方式,也即左对齐,在html中的标签和属性是:<table align=left</table就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式,例如居中对齐,而第二个表格并没有设置对齐方式,所以默认为左对齐,这样就出现了上述问题。
我的一些表格布局的经验:
1、表格布局第一步:先插入一个表格,宽度是760-780px(记住,一定要用px,不要用百分比),高度不用设置,然后令这个表格居中。以后所有的内容都限制在这个表格中。
2、熟练使用表格嵌套。也就是说,在一个表格中再插入
2
另一个表格。举个例子,把你要设计的页面分成大的几个部分,然后利用表格的行数和列数来控制它们的布局,如果某一个单元格中的内容又要分成几部分,可以继续在这个单元格中插入表格,方法同上。
3、补充:表格的边框一定要为0,即table中的border属性值为0。也就是让表格在网页预览中不可见,这样才能实现表格布局的目的。
如何利用表格实现画中画,也就是页中页效果
网页的排版大多使用表格,利用一个表个单元可以嵌入一个网页,你知道吗,这样做有很多好处,比如你把经常更新的区域划分一个表格单元,然后在这个表
格单元中嵌入你想要更新的内容,今后更新主页只需上传这个被嵌套的页面就可以了,没有必要对首页进行更新,是不是很方便。我写个最简单的例子代码:,html,
,head,
,title,范例,/title,
,body,
,table border=1 width=100%,
,tr,
,td,
,IFRAME src=example.htm width=300 heitht=100,,/IFRAME, ,/td,
3
,/tr,
,/table,
,/body,
,/html,
插入被嵌入页的关键代码是:,
IFRAME src=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,在此如果要用一张大的图片是很不划算的。你若要插入一根水平
4
线,用这方法也很有效。
如何使鼠标指到表格,表格背景变色
这个特效用的是表格样式表,要达到此效果你只需在,td,代码中加入
onmouseout=this.style.backgroundColor=
onmouseover=this.style.backgroundColor=#FFcccc ,例:
<onmouseout=this.style.backgroundColor=
onmouseover=this.style.backgroundColor=#FFcccc&q(来自:WwW.xltkwJ.cOm 小龙 文档 网:html,表格,左对齐)uot;,,“#ffccc”是你鼠标指到表格上要变的颜色,你可以根据自己需要改变颜色
表格布局常见问题解答
发布时间:2008-05-20
1、表格布满页面的问题
我们在很多地方看到为了使页面适应不同的分辨率,通常将表格的大小按百分比设置。刚开始学做网页的时候,我已经把表格的宽度设置为100%,但在浏览器上还是不能满屏显示,四周总有一圈空白,我曾对此感到迷惑不解,后来在论坛请教才知道这不是表格的错。如果你用Dreamweaver制作网页,这个问题很好解决,选择菜单Modify --, Page Properties,在弹出的对话框里设置Left、Top为0就ok了~
2.表格的变形问题
5
网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况,这也是最另人恼火的事,怎么办呢?秋实曾在天极网页陶吧撰文详细的阐述过这个问题,我们来看看他是怎么解决的。
A、因为表格排列设置而在不同分辨率下所出现的错位
这种变形情况是:
1、在800*600的分辨率下时,一切正常,而到了1024*800时,则多个表格或者有的居中,有的却
左排列或右排列,很难看,这是什么原因呢,
在解决这个问题之前,我们讲一下表格的排列。表格有左、中、右三种排列方式,如果没特别进行设置,则默认为居左排列,不用说了,这就是问题之所在。在800*600的分辨率下,表格恰好就有编辑区域那么宽,不容易察觉,而到了1024*800的时候,就出现的,解决的办法比较简单,即都设置为居中,或
左或右。
2、同样是这种分辨率切换,表格的上下排列不一致。
上边的所说的是水平错位,而这种则是纵向错位,多发生在一个表格单元里嵌入另一个表格的情况。其原因在于,嵌入的表格默认为竖向居中排列,在800*600分辨率时,这种错位看不出来,而到1024*800
就出现了,解决办法如前,根据情况对排列进行设置,而
6
不是采用其默认设置。
B、采用百分比而出现的变形
这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的,常出现在IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,这是因为表格的百分比也要随
着窗口的大小而改变成相应的百分比宽度。
当然了,解决办法是不要设置成百分比,我提倡的是,如果表格没有外围嵌套标记,则将宽等设置成固定宽度,如有外围嵌套标记,则将外转嵌套标记的宽度设置为固定值,而表格的宽或高可设置为百分
比,这样就不会出现变形了。
C、表格单元格之间互相干扰引起的变形
这种变形情况通常是在工具里制作主页时没有空隙,而在浏览时却发现莫名其妙地多出一些空隙,
而又不知原因在哪,很是令人讨厌。
本人也经常遇到类似的情况,解决办法一是先看表格设置有没有上面所谈的两种情况,如没有,可
7
能就是在划分表格时,同一行的单元格之间相互牵制所出现的问题。
我们知道,同一行的表格单元在诸如DreamWeaver 或FrontPage中经常频繁地被拆分,所以,同一行的单元格与另一个单元格的宽与高不一致,这时,你就要注意两个单元格属性:colspan、rowspan。colspan表示的是横向扩展,而rowspan则表示的是纵向扩展,这个扩展的意思即当前表格单元相邻的横向与竖向
的表格单元数,也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和
这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值),即colspan=3;而竖向的高度
是三个表格单元高度的总和,即rowspan=3。
那么我们说的这种变形就和这个设置有关,如果改变相邻单元格的高或宽与个数时,图中所指的单元格也会发生相应的变化,相互制约,调整起来很麻烦,这非我们所希望的,我本人提倡,如果表格比较复杂,最好采取嵌表格的形式,这样,可以少一些单元格之间相互干扰情况,而使单元格之间相对独立。
出现变形有情况还很多,我们就不一一陈述,我建议你在划分表格时,除了一些必要的高、宽设置外,将其它的高、宽设置全部删掉,一则减少了冗余代码,另则,也免除一些
8
摸不着头脑的错误。
3、图片显示的问题
有时候我们明明在单元格中插入了背景图片,而且在Dreamweaver的视窗里也可以看到,但是一预览背景图片就不显示了。遇到这种请情况,不要着急,检查一下你的代码是否正确,我们来看下面的表格:
表格代码:
,table width=300 border=1 cellspacing=0 cellpadding=0
bordercolor=#000000,
, tr background=hzz01_050213.gif,
,td height=19,,/td,
,td height=19,,/td,
,/tr,
,/table,
不错,上面的背景图确实有
(background=hzz01_050213.gif),但由于放错了地方,所以就显示不出来了,请把背景属性放在,td,标记里面,然后再预览一次,怎么样,这次出来了吧~
表格代码:
,table width=300 border=1 cellspacing=0 cellpadding=0
bordercolor=#000000,
,tr,
9
篇二:HTML表格经典详解
一.表格初步
表格是在论坛做帖的重要武器。这原因是,论坛里提供给用户操作的区域是非常有限的,用户只能在论坛程序框架好的body区域里的某个区域施展身手,不能修改body的背景色,更不能介入head的定义,因此,诸如让自己的帖子有底色、底图之类的修饰,用户只能通过表格来实现。表格是一个可自定义的容器,因而它就是我们用以实现帖子构设的利器。
把表格称作容器缘于表格的装载特性。表格是用于装载数据的,与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格,知道表格有表头、表体、单元格、行、列等等概念,它们并不难理解。而在HTML里,我们对表格的理解和运用可能会增加一些概念,但并非复杂,在学习本教程的过程中,通过领会和实践,相信是很容易掌握的。
表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在论坛做帖也起到不可估量的作用,帖子的页面布局将因使用了表格而可以随心所欲地排版。 现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框
10
架,为了能够一目了然,各元素尚未引入它们的属性: <table
<tbody
<tr
<td内容</td
</tr
</tbody
</table
说明:
<table:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table。
<tbody:表体的起始符。紧跟在<table之后,表示表体开始。必须有结尾符,放在</table之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。
<tr:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr紧跟在<tbody之后。必须有终止符</tr。
<td:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td紧跟在<tr之后。终止符为</td。td与tr配合
11
构成单元格。
</td、</tr、</tbody、</table:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。 从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。
二.表格属性设置
本节所指的表格属性设置其概念等同于在本论坛即见即所得编辑器的表格属性设置,在“即见即所得”模式下,通过点击位于工具栏上的图标,可以方便地设置表格的属性,只是,它没有通过代码设置来的的灵活多变。
我们先看看<table标签里都有哪些需要设置的属性。
border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元
12
格里的内容与表格周边边框的距离。
width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht=100%,这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
height:表格的高度,取值方法同width。提示:如果不是特别需要,
建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。
bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000
或
bgcolor=red。单元格<td也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。
background:表格的背景图。其值为一个有效的图片地址。
13
<td也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。
bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。
bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。
bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。
align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用<p align=?表格</p、<div align=?表格</div和<center表格</center之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码~
此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。
表格标签的属性较多,使得本节有一定的难度,需要悉心领会并一一记住。
下面给出一个表格式样和代码,表格中有一些简单的说明。
14
本表格的属性设置:
边框大小:border=1
边框颜色:bordercolor=#ff0000
背景色:bgcolor=#cc9968
表格宽度:width=400
单元格间距:cellspcing=16
单元格衬距:cellpadding=8
表格的对齐方式(居中):align=center
注:其他属性未设置。
代码:
<table border=1 cellpadding=8 cellspacing=16
bgcolor=#cc9968 bordercolor=#ff0000 width=400
align=center
<tbody
<tr
<td表格里的内容写在这里面</td
</tr
</tbody
</table
篇三:CSS控制table的cellpadding,cellspacing和align
CSS常规解决办法:
表格的cellpadding和cellpadding我们经常会用如下的方
15
式来清除默认样式: <table cellspacing=0
cellpadding=0</table
我们可以用table的border-collapse: collapse;属性 来代替cellspacing=0,用th,td的padding: 0; 属性来代替cellpadding=0。
table {
border-collapse:collapse;
border-spacing:0;
}
th,td {
padding: 0;
}
还可以用expression来实现cellpadding=0的样式:
table {
border-collapse:collapse;
border-spacing:0;
padd:expression(this.cellPadding=0);
}
CSS控制table的cellpadding,cellspacing和align
作者: wywacczy 日期: 2010 年 07 月 12 日 发表评论 (0) 查看评论
背景
16
爆米花工作室面向客户提供网站服务时,通常需要提供报表相关的功能模块,而以HTML的table元素进行具体实现时,通常需要控制表格的水平位置、单元格的间距等方面,本文将就此方面进行阐述。
HTML实现
HTML table的属性中,align用于控制表格水平位置,cellpadding和cellspacing用于控制HTML表格中的单元格的间距。
例如,单元格间距为0、表格水平居中,实现的HTML代码片段如下:
虽然实现效果正常,但代码繁琐,每个表格必须单独设置,将造成页面臃肿。因而,爆米花工作室推荐通过CSS进行实现:
CSS实现
实现的表格单元格间距为0、表格水平居中的CSS代码片段如下:
代码片段中:
(1) table的border: 0和border-collapse: collapse; 实现了cellspacing=”0″;
(2) table td的padding: 0; 实现了cellspacing=”0″;
(3) margin-left: auto; margin-right: auto; 左边和右边的外间距设置auto,表格居中。
17
相比较于HTML实现方式,CSS实现方式除了能够实现同样的效果,且与具体的表格分离,无需针对每个表格进行单独设置,因而更加简洁。
尤其(3)点,对于设置表格的水平位置对齐非常有帮助,例如:
设置表格水平位置左对齐的HTML代码片段和CSS代码片段,分别如下:
设置表格水平位置右对齐的HTML代码片段和CSS代码片段,分别如下:
18
本文档为【html,表格,左对齐】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑,
图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。