html表格内容居中.docx
- 文档编号:12678285
- 上传时间:2023-06-07
- 格式:DOCX
- 页数:9
- 大小:20.14KB
html表格内容居中.docx
《html表格内容居中.docx》由会员分享,可在线阅读,更多相关《html表格内容居中.docx(9页珍藏版)》请在冰点文库上搜索。
html表格内容居中
竭诚为您提供优质文档/双击可除
html表格内容居中
篇一:
css控制table的cellpadding,cellspacing和align
css常规解决办法:
表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式:
我们可以用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日期:
20xx年07月12日发表评论(0)查看评论
背景
爆米花工作室面向客户提供网站服务时,通常需要提供报表相关的功能模块,而以html的table元素进行具体实现时,通常需要控制表格的水平位置、单元格的间距等方面,本文将就此方面进行阐述。
html实现
htmltable的属性中,align用于控制表格水平位置,cellpadding和cellspacing用于控制html表格中的单元格的间距。
例如,单元格间距为0、表格水平居中,实现的html代码片段如下:
虽然实现效果正常,但代码繁琐,每个表格必须单独设置,将造成页面臃肿。
因而,爆米花工作室推荐通过css进行实现:
css实现
实现的表格单元格间距为0、表格水平居中的css代码片段如下:
代码片段中:
(1)table的border:
0和border-collapse:
collapse;实现了cellspacing=”0″;
(2)tabletd的padding:
0;实现了cellspacing=”0″;
(3)margin-left:
auto;margin-right:
auto;左边和右边的外间距设置auto,表格居中。
相比较于html实现方式,css实现方式除了能够实现同样的效果,且与具体的表格分离,无需针对每个表格进行单独设置,因而更加简洁。
尤其(3)点,对于设置表格的水平位置对齐非常有帮助,例如:
设置表格水平位置左对齐的html代码片段和css代码片段,分别如下:
设置表格水平位置右对齐的html代码片段和css代码片段,分别如下:
篇二:
html表格中的tr,td,th用法
html表格中的tr,td,th用法
表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用。
是的上层标签
必须在一个里面,它不能单独使用,相当于的属性标签.
标示一个表格,标示这个表格中间的一个行
标示行中的一个列,需要嵌套在中间
具体格式是:
(两行两列)
和一样,也是需要嵌套在当中的,嵌套在当中...用于定义一个表格开始和结束
...定义表头单元格。
表格中的文字将以粗体显示(与同样是标示一个储存格,唯一不同的是所标示的储存格中的文字是以粗体出现,即可以这样看:
文字=文字
),
在表格中也可以不用此标签,标签必须放在标签内
...定义一行标签,一组行标签内可以建立多组由或标签所定义的单元格
...定义单元格标签,一组标签将将建立一个单元格,标签必须放在标签内
。
为表格标题,属性summar为摘要,标签为首部说明,标签为表格头部,标签为表格主体内容,标签为表格尾部。
其中还可以使用scope可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
row指示当前单元格,为包含当前单元格的行提供相关的表头信息。
col指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
rowgroup指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
colgroup指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格
内容为节略形式。
标准表格模型
html表格内容居中)d>
相关:
不光是粗体,还是居中的
也是居中的,而且如果table有border的话则caption不在border之内
tFoot元素内包含的有效标签有:
td
th
tR
任何给定的table对象都只能定义一个tFoot
篇三:
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>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 表格 内容 居中