html,表格顶端对齐

2024年1月31日发(作者：)

html,表格顶端对齐

篇一：HTML三个表格 顶部对齐

<table border=0 align=center width=90%

<tr

<td

<div id=lefttable

style=position:absolute;top:30;left:0;width:300

<table border=1 width=260 cellpadding=1

cellspacing=0 bordercolor=#9900ff bgcolor= #ffffff

<tr<td colspan=3 align=center

品牌信息列表

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type=button value=添加

onclick=javascrip:='a_'

</td</tr

1

<tr

<td品牌</td

<td品牌编码</td

<td操作</td

</tr

<%List<Pinpai_msgForm

listpp=(List<Pinpai_msgForm)ribute(listpp);

if(listpp==null){listpp=new

ArrayList<Pinpai_msgForm();}for(int

i=0;i<();i++){

pinpai=(i);%

<tr<td<%=tem() %</td

<td

<%=ode() %

</td

<td

<a

Pinpai_msgForm

href=?method=prepp&id=<%=() %修改</a <a

href=?method=delpp&id=<%= 2

d() %删除</a </td

</tr

<%}%

</table

</div

</td

<td

<div id=lefttable

style=position:absolute;top:30;left:300;width:600

<table border=1 width=260 cellpadding=1

cellspacing=0 bordercolor=#9900ff bgcolor= #ffffff

<tr<td colspan=3 align=center

型号信息列表

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type=button value=添加

onclick=javascrip:='a_'

</td</tr

3

<tr

<td型号</td

<td型号编码</td

<td操作</td

</tr

<%List<XinHao_MsgForm

listxh=(List<XinHao_MsgForm)ribute(listxh);

if(listxh==null){listxh=new

ArrayList<XinHao_MsgForm();}for(int

i=0;i<();i++){

xinhao=(i);%

<tr

<td

<%=tem()%

</td

<td

<%=ode() %

</td

<td

<a href=?method=prexh&id=<%=xi

4

XinHao_MsgForm

() %修改</a <a

href=?method=delxh&id=<%=()

%删除</a</td

</tr

<%} %

</table

</div

</td

<td

<div id=lefttable

style=position:absolute;top:30;left:580;width:300

<table border=1 width=260 cellspacing=0

cellpadding=1

border=1 align=center bordercolor=#9900ff bgcolor=

#ffffff <tr<td colspan=3 align=center

部件信息列表

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type=button value=添加

onclick=javascrip:='a_& 5

#39;

</td</tr

<tr

<td部件</td

<td部件编码</td

<td操作</td

</tr

<%List<BuJian_MsgForm

listbj=(List<BuJian_MsgForm)ribute(listbj);

if(listbj==null){listbj=new

ArrayList<BuJian_MsgForm();}for(int

i=0;i<();i++){

bujian=(i);%

<tr

<td

<%=tem() %

</td

<td

<%=ode() %

</td

6

BuJian_MsgForm

<td

<a

href=?method=prebj&id=<%=()

%修改</a <a

href=?method=delbj&id=<%=() %删除</a </td

</tr

<%} %

</table

</div

</td</tr

</table

篇二：html表格布局实例

[html]表格布局之实例版

| [<<] []

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

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

<table align=center width=500 height=400 border=1

bordercolor=#00ff99

<tbody

<tr<td colspan=3 align=center网站名称</td

7

</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

<tr<td colspan=3 align=center网站底部信息</td

</tr

</tbody

</table

产生如下的表格：

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

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

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

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

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

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

8

如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。

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

1、表格布局第一步：先插入一个表格，宽度是760-780px（记住，一定要用px，不要用百分比），高度不用设置，然后令这个表格居中。以后所有的内容都限制在这个表格中。

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

3、补充：表格的边框一定要为0，即table中的border属性值为0。也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。

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

网页的排版大多使用表格，利用一个表个单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表

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

不是很方便。我写个最简单的例子代码：＜html＞

＜head＞

＜title＞范例＜/title＞

＜body＞

＜table border=1 width=100%＞

＜tr＞

＜td＞

＜IFRAME src= width=300 heitht=100＞＜/IFRAME＞ ＜/td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

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

IFRAME src= width=300 heitht=100＞＜/IFRAME＞。

是被嵌入的页面，标签＜IFRAME＞还有一些可用的参数设置如下：marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=20，单位是pix，下同。

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

hspace:网页右上角的的横坐标；

vspace:网页右上角的纵坐标；

10

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

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

表格背景图片的一个技巧

大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小，比如下面的一个渐变图，你看上去像是一整张图片，它其实用的就是表格背景重复填充特性，而用的图片就是右边的那张，大小只有1.3k，在此如果要用一张大的图片是很不划算的。你若要插入一根水平线，用这方法也很有效。

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

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

onmouseout=oundColor=

onmouseover=oundColor=#FFcccc ，例：

<onmouseout=oundColor=

＞，onmouseover=oundColor=#FFcccc“#ffccc”是你鼠标指到表格上要变的颜色，你可以根据自己需要改变颜色

表格布局常见问题解答

发布时间：2008-05-20

1、表格布满页面的问题

11

我们在很多地方看到为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。刚开始学做网页的时候，我已经把表格的宽度设置为100%，但在浏览器上还是不能满屏显示，四周总有一圈空白，我曾对此感到迷惑不解，后来在论坛请教才知道这不是表格的错。如果你用Dreamweaver制作网页，这个问题很好解决，选择菜单Modify --＞ Page

Properties,在弹出的对话框里设置Left、Top为0就ok了！

2.表格的变形问题

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

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

这种变形情况是：

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

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

在解决这个问题之前，我们讲一下表格的排列。表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设 12

置为居中，或

左或右。

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

上边的所说的是水平错位，而这种则是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800

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

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

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

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

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

表格的宽或高可设置为百分

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

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

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

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

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

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

我们知道，同一行的表格单元在诸如DreamWeaver 或FrontPage中经常频繁地被拆分，所以，同一行的单元格与另一个单元格的宽与高不一致，这时，你就要注意两个单元格属性：colspan、rowspan。colspan表示的是横向扩展，而rowspan则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向

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

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

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

那么我们说的这种变形就和这个设置有关，如果改变相邻 14

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

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

3、图片显示的问题

有时候我们明明在单元格中插入了背景图片，而且在Dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看下面的表格：

表格代码：

＜table width=300 border=1 cellspacing=0 cellpadding=0

bordercolor=#000000＞

＜ tr background=hzz01_＞

＜td height=19＞＜/td＞

＜td height=19＞＜/td＞

＜/tr＞

＜/table＞

15

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

表格代码：

＜table width=300 border=1 cellspacing=0 cellpadding=0

bordercolor=#000000＞

＜tr＞

篇三：CSS控制table的cellpadding,cellspacing和align

CSS常规解决办法：

表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式： <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;

16

}

还可以用expression来实现cellpadding=0的样式：

table {

border-collapse:collapse;

border-spacing:0;

padd:expression(dding=0);

}

CSS控制table的cellpadding,cellspacing和align

作者: wywacczy 日期: 2010 年 07 月 12 日 发表评论

(0) 查看评论

背景

爆米花工作室面向客户提供网站服务时，通常需要提供报表相关的功能模块，而以HTML的table元素进行具体实现时，通常需要控制表格的水平位置、单元格的间距等方面，本文将就此方面进行阐述。

HTML实现

HTML table的属性中，align用于控制表格水平位置，cellpadding和cellspacing用于控制HTML表格中的单元格的间距。

例如，单元格间距为0、表格水平居中，实现的HTML代码片段如下：

虽然实现效果正常，但代码繁琐，每个表格必须单独设置， 17

将造成页面臃肿。因而，爆米花工作室推荐通过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，表格居中。

相比较于HTML实现方式，CSS实现方式除了能够实现同样的效果，且与具体的表格分离，无需针对每个表格进行单独设置，因而更加简洁。

尤其(3)点，对于设置表格的水平位置对齐非常有帮助，例如：

设置表格水平位置左对齐的HTML代码片段和CSS代码片段，分别如下：

设置表格水平位置右对齐的HTML代码片段和CSS代码片段，分别如下：

18