如何构建一个所有行和单元格彼此相邻的HTML表？_Html_Css_Doctype

如何构建一个所有行和单元格彼此相邻的HTML表？

html css

如何构建一个所有行和单元格彼此相邻的HTML表？,html,css,doctype,Html,Css,Doctype,有人能帮我解决以下两种情况之间的差异吗。在这两种情况下，我都将一个图像分割成若干部分，并将它们放在一个表中，使其看起来仍然是一个图像但是，在一种情况下，我将doctype设置为，而在另一种情况下，没有doctype集。当没有doctype集（单元格和行之间没有边框间距或单元格间距或任何其他间距）时，将显示我的预期结果。但是，当设置doctype时，行之间有1px的填充除了doctype之外，这两种情况下的HTML都是相同的 <!DOCTYPE html> <html>

有人能帮我解决以下两种情况之间的差异吗。在这两种情况下，我都将一个图像分割成若干部分，并将它们放在一个表中，使其看起来仍然是一个图像

但是，在一种情况下，我将doctype设置为，而在另一种情况下，没有doctype集。当没有doctype集（单元格和行之间没有边框间距或单元格间距或任何其他间距）时，将显示我的预期结果。但是，当设置doctype时，行之间有1px的填充

除了doctype之外，这两种情况下的HTML都是相同的

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    .table{
        display: table;
    }

    .row{
        display: table-row;
    }

    .cell{
        display: table-cell;
    }
</style>
</head>
<body>
    <div id='slider' class='table'>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_01.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_02.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_03.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_04.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_05.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_06.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_07.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_08.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_09.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_10.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_11.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_12.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_13.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_14.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_15.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_16.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_17.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_18.gif' alt='slide' /></div>
        </div>
    </div>
</body>
</html>


.桌子{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
}

有人能给我解释一下，当doctype设置为HTML时，为什么行之间有1px的间隔？

删除元素周围的空白。

@Shafee:试试看--

编辑

简短说明：使用

DOCTYPE

的代码在浏览器中触发了严格模式，该模式以不同方式处理图像的显示

详细解释：

在早期，使用严格模式总是提高了效率评论说，图像突然获得了奇怪的底边不可能是远离的。原因是严格的模式

是一个内联元素，这意味着应该有一些空间保留给可能的后代像g、j或q这样的字符。当然一个图像没有子图像字符，所以空间永远不会消失已使用，但仍需保留

解决方案是显式声明图像块级元素：

img
{display:block}

尽管如此，浏览器供应商Mozilla 特别是觉得这是一个令人困惑的情况引入了“几乎严格模式”。这被定义为严格模式，但具有图像仍然是块，以及不是内联元素

最常见的doctype，包括我使用的一个，触发几乎严格的模式。到目前为止，图像的处理是最重要的两者之间最重要的区别几乎严格的模式和真正严格的模式模式

来源：

@Shafee:试试看--

编辑

简短说明：使用

DOCTYPE

的代码在浏览器中触发了严格模式，该模式以不同方式处理图像的显示

详细解释：

在早期，使用严格模式总是提高了效率评论说，图像突然获得了奇怪的底边不可能是远离的。原因是严格的模式

解决方案是显式声明图像块级元素：

img
{display:block}

来源：

Charles Upsdell's提供了有关

DOCTYPE

如何影响渲染的更多信息

Charles Upsdell's有更多关于

DOCTYPE

如何影响渲染的信息

您是否尝试过边界折叠：折叠？此外，拥有一组类似于表的div函数的目的是什么？为什么不直接使用表呢？为什么不直接使用表呢？因为我倾向于严格遵守在任何情况下都不使用表的规则，除了表格数据。在这里，我试图为图像创建一个布局。虽然，使用一个表会更容易。我不认为在语义上使用这么多div（在表模式下，甚至更少）会更有意义。取决于我猜的用例，您是否尝试过

边框折叠：折叠？此外，拥有一组类似于表的div函数的目的是什么？为什么不直接使用表呢？为什么不直接使用表呢？因为我倾向于严格遵守在任何情况下都不使用表的规则，除了表格数据。在这里，我试图为图像创建一个布局。虽然，使用一个表会更容易。我不认为在语义上使用这么多div（在表模式下，甚至更少）会更有意义。取决于用例，我猜是的。这很有效。谢谢：D。。但你能解释一下为什么吗？是的。这很有效。谢谢：D。。但你能解释一下为什么会这样吗？
.row img {
    display: block;
}