问题是在表格中对齐单元格 [英] Problem aligning cell in table
问题描述
您好，
我在对齐表格中的单元格时遇到了问题，并尝试了所有我能想到的解决这个问题而没有任何运气：看来白色区域，这是一个图像在表格的背景中，表格内略微向右移动。这让我疯狂。任何帮助将不胜感激。
这是整个网页的网址和代码：
http://kittelbergerdesign.com/indextest.html
< html>
< head>
< title> hat horizons< / title>
< style>
P {font-size：9pt;
font-color：＃000033;
font-weight：normal;
font-family ：" arial"}
< / style>
< script>
//（ C）2000 www.CodeLifter.com
// http://www.codelifter.com
//所有人免费用户，但请留在此标题中
// NS4-6，IE4-6
//仅在IE中淡出效果;优雅地降级
// ================================== =====
//设置以下变量
// ===================== ==================
//设置slideShowSpeed（毫秒）
var slideShowSpeed = 2000
//交叉淡入淡出的持续时间（秒）
var crossFadeDuration = 3
//指定图像文件
var Pic = new Array（）//不要触摸这个
//添加更多图片，只需继续
//模式，添加到下面的数组
Pic [0] =''images / Uzbekcap.jpg''
Pic [1] = ''images / constablehat.jpg''
Pic [2] =''images / Kyrgistan.jpg''
Pic [3] =''images /莱索托。 jpg''
Pic [4] =''images / Nigerian.jpg''
Pic [5] =''images / BurmaRawang.jpg''
Pic [6] =''images / montera.jpg''
Pic [7] =''images / Tlingithelmet.jpg' '
Pic [8] =''images / Mongoliasoldier.jpg''
// ============= ==========================
//不要在此行下面编辑任何内容
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array（）
for（i = 0;我<磷; i ++）{
preLoad [i] =新图片（）
preLoad [i] .src = Pic [i]
}
函数runSlideShow（）{
if（document.all）{
document.images.SlideShow.style.filter =" blendTrans（duration = 2）"
document.images.SlideShow.style.filter =" blendTrans（duration = crossFadeDuration）"
document.images.SlideShow。 filters.blendTrans.Apply（）
}
document.images.SlideShow.src = preLoad [j] .src
if（document。所有）{
document.images.SlideShow.filters.blendTrans.Play（）
}
j = j + 1
if（j>（p-1））j = 0
t = setTimeout（''runSlideShow（）''，slideShowSpeed）
}
< / script>
< / head>
< body BGCOLOR = QUOT;＃000000" onload =" runSlideShow（）">
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0"宽度= QUOT; 720"高度= QUOT; 518" align =" center">
< tr>
< td colspan =" 18" background =" images / index header rev.jpg"宽度= QUOT; 720"高度= QUOT; 109" align =" right">
< / td>
< / tr>
< tr>
< td colspan =" 4" background =" images / yellow box rev.jpg"宽度= QUOT; 157"高度= QUOT; 382" valign =" top">
< table border =" 0" CELLSPACING = QUOT; 0" CELLPADDING = QUOT; 8英寸宽度= QUOT; 157" height =" 382">
< tr>
< td colspan =" 2"宽度= QUOT; 72" valign =" top">
< img src =" images / whitebox.jpg"宽度= QUOT; 58"高度= QUOT; 55"宽度= QUOT; 382" valign =" top">
< / td>
< td colspan =" 2">
< / td>
< / tr>
< tr>
< td colspan =" ; 2">
< / td>
< td colspan =" 2"宽度= QUOT; 72" valign =" top">
< img src =" images / whitebox.jpg"宽度= QUOT; 58"高度= QUOT; 55"对齐= QUOT;左" valign =" top">
< / td>
< / tr>
< tr>
< td colspan =" 2"宽度= QUOT; 72" valign =" top">
< img src =" images / whitebox.jpg"宽度= QUOT; 58"高度= QUOT; 55"对齐= QUOT;左" valign =" top">
< / td>
< td colspan =" 2">
< / td>
< / tr>
< tr>
< td colspan =" 2"> ;
< / td>
< td colspan =" 2"宽度= QUOT; 72" valign =" top">
< img src =" images / whitebox.jpg"宽度= QUOT; 58"高度= QUOT; 55"对齐= QUOT;左" valign =" top">
< / td>
< / tr>
< tr>
< td colspan =" 2"宽度= QUOT; 72" valign =" top">
< img src =" images / whitebox.jpg"宽度= QUOT; 58"高度= QUOT; 55"对齐= QUOT;左" valign =" top">
< / td>
< td colspan =" 2">
< / td>
< / tr>
< / table>
< / td>
< td colspan =" 15" VALIGN =顶部" bgcolor =" #ffffff">
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" background =" images / white textbox rev.jpg"宽度= QUOT; 563">
< tr>
< td colspan =" 1">
< / td>
< td colspan =" 14">
< P> Hat Horizons会让你以不同的方式思考你的想法。< BR>帽子和头饰具有无穷无尽的变化，是对世界文化多样性的致敬。对头饰的了解可以灌输对我们文化差异的认识和欣赏。同时，通过理解它们所穿戴的目的，帽子可以充当桥梁，增强全球人们共享的态度和价值。
< / td>
< / tr>
< tr>
< ; td colspan =" 6">
< img src =" images / constablehat.jpg" name ='''SlideShow''width =" 240" height =" 200">
< / td>
< td colspan =" 9"高度= QUOT; 200" valign =" top">
< br>
< P>来自该系列的帽子和头饰可供展览使用< br>。头套为博物馆，画廊，学校和其他公共场所提供了引人入胜的教育视觉展示。
< br>
< P> Head覆盖物为我们提供的有关文化多样性和种族理解的计划奠定了基础。可以在教育，社区和企业环境中为各种受众和年龄段定制演示和研讨会。< p>
感谢您访问该网站！
< p>
< font size =" 2"面= QUOT;倍" color ="＃000033">
< i>< b> Stacey W. Miller，< / b> Mitrologist< / i>
< / font>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< ; tr>
< td colspan =" 18" valign =" top">
< img src =" images / bottom header rev.jpg" VALIGN = QUOT;顶" width =" 720">
< / td>
< / tr>
< / table>
< / body>
< / html>
< blockquote>我不知道如何使用表格布局页面，但您可以验证并修复代码以查看您的位置。现在你有大约34个html错误和一些css错误。
是否有其他人可以帮助我解决这个问题..仍然在白色区域稍微向右移动。请参考上面的网址。谢谢。
好的，看起来你修复了一半的html错误，现在你的页面在Firefox中看起来很不错但在IE中仍然搞砸了。这是正常的，因为IE老了，越野车，并且遵循标准做了糟糕的工作。
您必须做的下一件事是添加适当的doctype。在每个页面的第一行，你应该包括这一行：
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
这告诉浏览器您将遵循哪些规则。现在，IE处于所谓的怪癖模式，基本上遵循了1998年的标准，并对盒子模型的东西造成了严重破坏。问题。 （一个长期的，非常严重的IE漏洞。）包括doctype将使IE进入标准模式并使其执行有点像更现代的浏览器，如Firefox，Opera和除IE之外的任何东西。
Hello,
I am having a problem aligning a cell in a table and have tried everything I can think of to correct this without any luck: It appears that the white area, which is an image in the background of this table within a table is shifted slightly to the right. It''s driving me crazy. Any help would be greatly appreciated.
Here is the url and the code for the whole page:
http://kittelbergerdesign.com/indextest.html
<html>
<head>
<title>hat horizons</title>
<style>
P {font-size:9pt;
font-color:#000033;
font-weight:normal;
font-family: "arial"}
</style>
<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don''t touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = ''images/Uzbekcap.jpg''
Pic[1] = ''images/constablehat.jpg''
Pic[2] = ''images/Kyrgistan.jpg''
Pic[3] = ''images/Lesotho.jpg''
Pic[4] = ''images/Nigerian.jpg''
Pic[5] = ''images/BurmaRawang.jpg''
Pic[6] = ''images/montera.jpg''
Pic[7] = ''images/Tlingithelmet.jpg''
Pic[8] = ''images/Mongoliasoldier.jpg''
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans (duration=2)"
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply ()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play( )
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout(''runSlideShow()'', slideShowSpeed)
}
</script>
</head>
<body bgcolor="#000000" onload="runSlideShow()">
<table border="0" cellpadding="0" cellspacing="0" width="720" height="518" align="center">
<tr>
<td colspan="18" background="images/index header rev.jpg" width="720" height="109" align="right">
</td>
</tr>
<tr>
<td colspan="4" background="images/yellow box rev.jpg" width="157" height="382" valign="top">
<table border="0" cellspacing="0" cellpadding="8" width="157" height="382">
<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" width="382" valign="top">
</td>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
</tr>
<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
</tr>
<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
<td colspan="2">
</td>
</tr>
</table>
</td>
<td colspan="15" valign=top" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" background="images/white textbox rev.jpg" width="563">
<tr>
<td colspan="1">
</td>
<td colspan="14">
<P>Hat Horizons will make you think differently about what you put on your head.<br> With their endless variations, hats and headdresses are a tribute to the diversity<br>of the worlds cultures. Knowledge of headgear can instill an awareness and<br>appreciation of our cultural differences. At the same time, by understanding the<br>purposes for which they are worn, hats may act as a bridge, reinforcing attitudes<br>and values that are shared by people around the globe.
</td>
</tr>
<tr>
<td colspan="6">
<img src="images/constablehat.jpg" name=''SlideShow'' width="240" height="200">
</td>
<td colspan="9" height="200" valign="top">
<br>
<P>Hats and headdresses from the collection are available<br>for exhibit. The head coverings make an engaging and educational visual display for museums, galleries and schools and other public spaces.
<br>
<P>Head coverings provide the foundation for programs we offer on cultural diversity and ethnic understanding. Presentations and workshops can be customized for a variety of audiences and ages in educational, community and corporate environments.<p>
Thanks for visiting the site!
<p>
<font size="2" face="times" color="#000033">
<i><b>Stacey W. Miller,</b> Mitrologist</i>
</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="18" valign="top">
<img src="images/bottom header rev.jpg" valign="top" width="720">
</td>
</tr>
</table>
</body>
</html>
I haven''t a clue how to lay out pages using tables but you might validate and fix your code to see where you stand. Right now you have about 34 html errors and a number of css errors.
Is there anyone else who could help me with this problem.. still shifted to the right slightly in the white area. Please reference the url above. Thanks.
Ok, it looks like you fixed half of your html errors and now your page looks good in Firefox but still messed up in IE. This is normal because IE is old, buggy and does a lousy job of following the standards.
The very next thing you must do is add a proper doctype. On the first line of every page you have you should include this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
This is telling browsers which set of rules you are going to follow. Right now, IE is in what''s called ''quirks mode'', essentially following the standards from 1998 and wreaking havoc with something called the "box model" problem. (A long standing, very serious, IE bug.) Including the doctype will put IE into ''standards mode'' and make it perform a little like more modern browsers, such as Firefox, Opera and anything but IE.
这篇关于问题是在表格中对齐单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
