删除 2 个表格之间的空格 HTML CSS 和图像删除背景图像答案

【问题标题】：Remove space between 2 tables HTML CSS and image removes background image删除 2 个表格之间的空格 HTML CSS 和图像删除背景图像
【发布时间】：2013-04-26 17:58:42
【问题描述】：

这里是新人，我正在创建一个网站，但我为保存图像而制作的表格和为保存内容而制作的表格似乎存在问题。左图右图内容。当我将图像表向右浮动时，内容表完全移动到它下面。当我将它浮动时，2之间的空间太大。有问题的代码是表和表3。我希望它显示链接按钮旁边的图像块和按钮下方但图像块旁边的上下文块。

第二个问题是我的徽标标题是图像正在删除背景图像。

HTML 代码

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="Articlepage.CSS" rel="stylesheet" type="text/css">
    <title>BEADLES BEADING</title>
</head>
<body id="wrap">
    <h1><img src="logo.jpg" alt="logo"></h1>
    <a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
    <a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
    <a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
    <a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
    <a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
    <table3>AD SPACE(Image)</table3>
    <table>
        <tr>
            <td>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b><br>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <br><br><br><br><br><br><br><br><br><br><br>
            </td>
        </tr>
    </table>
    <table2>
        <tr>
            <td>
                FOOTER
            </td>
        <tr>
    </table2>
</body>
</html>

CSS 代码

分区{ 文本对齐：左；位置：相对；字体大小：2.5em；字体粗细：粗体； } div1{ 文本对齐：左；位置：相对；字体大小：1.5em；文字阴影：2px 2px 黑色；字体系列：Georgia、Times、serif；文字阴影：-1px -1px 黑色，1px 1px； } h1{ 文本对齐：左；字体系列：Arial、Helvetica、sans-serif；文字阴影：0.1em 0.1em 0.2em 黑色；字体大小：2.0em；字体样式：斜体；浮动：内联；边框：3px 纯黑色；宽度：800 像素；高度：196px；填充：0； } h2{ 文本对齐：左；位置：相对；字体大小：1.5em；字体系列：Verdana，Helvetica，无衬线；文字阴影：-1px -1px 黑色，1px 1px； } p{ 位置：相对；文本对齐：左；字体大小：1em；字体系列：Georgia、Times、serif；文字阴影：-1px -1px 黑色，1px 1px； } 李 { 位置：相对；字体大小：1em； } 一种{ 填充：0；向左飘浮; } 乙{ 边框：3px 纯黑色；宽度：180px；高度：10.5em；填充：10px；向左飘浮; } b1{ 边框：3px 纯黑色；位置：绝对；宽度：40px；高度：23em；填充：10px；浮动：对；位置：相对； } b2{ 边框：3px 纯黑色；位置：绝对；宽度：40px；高度：23em；填充：10px；位置：相对； } 身体{ 背景图像：url（'背景.jpg'）；背景尺寸：100%；边距：20px；宽度：800 像素；填充：30px；位置：相对； } .centeredImage { 文本对齐：居中；边距顶部：0px；边距底部：0px； } 桌子{ 显示：内联块；宽度：640 像素；左边距：自动；边距右：自动；边框样式：实心；边框宽度：5px；文本对齐：居中；高度：400px；填充：0； } 表2{ 显示：内联块；宽度：625px；左边距：自动；边距右：自动；边框样式：实心；边框宽度：5px；文本对齐：居中；高度：50 像素； } td{ 文字阴影：0.1em 0.1em 0.2em 黑色； font-family:"Times New Roman", Times, serif; } 表3{ 浮动：对；宽度：150px；边框样式：实心；边框宽度：5px；文本对齐：右；高度：490px；填充：0； } p2{ 边框：10px 纯黑色；浮动：权利； } 选择{ 宽度：200px } ＃裹{ 宽度：900px；边距：0 自动； }

Image link。看，我相信你会明白它应该是什么样子。加上白色背景应该有一个淡紫色的图像，我放置在正文中作为背景。

【问题讨论】：

忠告，不要使用表格进行布局。将表格用于表格数据。
表格更适合用于餐厅菜单或电子邮件营销等内容。我建议使用分区标签
或者甚至使用列表以流动顺序组织数据。
你能发布一个链接到一个活生生的例子吗？ @j08691，可悲的是，现在老师和一些机构教他们的学生使用无边框表格进行布局 - 尤其是。关于制作表格
另外不是正确的标签，除非您使用 XML，否则您无法创建自定义标签。
您的代码中还有一些其他问题。不仅不是有效标签，而且不能使用没有任何行或列的表格标签。

【解决方案1】：

我认为两个主要问题是：

您正在使用不存在的标签并且
您在设置尺寸时没有考虑边框的宽度

您将 body 的宽度设置为 800px，第一个 table 设置为 640px，table3 设置为 150px。但两者的边框都是 5px 宽。 640 + 10（第一个表格的左右边框）+10（第二个表格的左右边框）+ 150 = 810。即使标签是正确的，它们也太宽了，不能彼此相邻。

改变

<table3>Ad Space</table3>

和

<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>

到

<div id="adCol">Ad Space</div>

和

<div id="#imgDiv">
  <img />
  <img />
  <img /><br />
  <img />
  <img />
  <img />
</div>

在您的 CSS 中，将“b”更改为“#imgDiv img”，将“table”更改为“#imgDiv”，将“table3”更改为“#adCol”。然后要么减小边框的宽度，要么使其中一个边框的宽度至少小 10px。

不要忘记同时删除 table2 标记并更改您称为 b1 和 b2 的任何内容以使用真正的 HTML 标记并将 CSS 中的 b1 和 b2 更改为类名或 id。

另外，请考虑不设置正文的宽度。你可能不需要那个。

【讨论】：