用于复杂布局的 div 或表格？答案

【问题标题】：divs or tables for complex layout?用于复杂布局的 div 或表格？
【发布时间】：2017-01-15 22:36:33
【问题描述】：

我研究并阅读了很多关于广泛使用 div 或表格的利弊。

简而言之，我的理解是表格只适用于表格数据并且是旧时尚。

而 div 允许更大的灵活性，并且可以更快地维护、加载和实施响应式设计。

当有人说：

时，我感到很困惑：

-大量使用 div 或深度嵌套的 div 是不好的做法

- 不建议在所有可以通过使用 div 和 css 的情况下广泛使用表格

(1) 所以我的问题是：最好推荐使用哪个来实现这两种布局？ （知道我会让他们稍后做出响应）

图片 1“本周”：

图片2“本月”：

(2) 我的第二个问题是，如果它建议使用 div 来实现它，你将如何进行？ 因为它是一个非常复杂的布局，我只使用表格作为解决方案，而不使用大量的div 或深度嵌套的 div。

感谢您的帮助

这是我本周的代码：（知道鼠标悬停应该以蓝色突出显示整行）

HTML 代码

<div id="thisWeek" class="box">
<table>
<tr>
<td><img src="images/calendar.jpg" /></td><td valign="middle"><span style="font-size:16px;">This Week</span></td>
</tr>
</table>
<ul class="engage">
<li><a href="">Add</a></li>
<li><a href="">More</a></li>
</ul>
<table id="thisWeekTable" cellspacing="0" cellpadding="0">
<tr><td class="select"><div class="checkbox"><input id="checkboxInput" type="checkbox" name="" value="1"><label for="checkboxInput"></label></div></td><td><p style="font-weight:bold;font-size:15px;">02</p> <p style="font-size:10px;">Sept</p></td><td width="100%">&nbsp; Zipform 6 basics</td></tr>
<tr><td class="select"><div class="checkbox"><input id="checkboxInput2" type="checkbox" name="" value="2"><label for="checkboxInput2"></label></div></td><td><p style="font-weight:bold;font-size:15px;">13</p> <p style="font-size:10px;">Jan</p></td><td width="100%">&nbsp; Training on Paragon</td></tr>
<tr><td class="select"><div class="checkbox"><input id="checkboxInput3" type="checkbox" name="" value="1"><label for="checkboxInput3"></label></div></td><td><p style="font-weight:bold;font-size:15px;">26</p> <p style="font-size:10px;">Feb</p></td><td width="100%">&nbsp; Planing and Goals</td></tr>
<tr><td class="select"><div class="checkbox"><input id="checkboxInput4" type="checkbox" name="" value="1"><label for="checkboxInput4"></label></div></td><td><p style="font-weight:bold;font-size:15px;">11</p> <p style="font-size:10px;">Mar</p></td><td width="100%">&nbsp; Zipform 6 basics</td></tr>
<tr><td class="select"><div class="checkbox"><input id="checkboxInput5" type="checkbox" name="" value="1"><label for="checkboxInput5"></label></div></td><td><p style="font-weight:bold;font-size:15px;">09</p> <p style="font-size:10px;">Nov</p></td><td width="100%">&nbsp; Training on Paragon</td></tr>
<tr><td class="select"><div class="checkbox"><input id="checkboxInput6" type="checkbox" name="" value="1"><label for="checkboxInput6"></label></div></td><td><p style="font-weight:bold;font-size:15px;">26</p> <p style="font-size:10px;">Feb</p></td><td width="100%">&nbsp; Planing and Goals</td></tr>

</table>
</div>

CSS 代码

.box { 
    position:relative;
    width:282px;
    height:240px;
    background-color:#fff;
    border: 1px solid #D8D8D8;
    color:#808080;
}

.engage { 
    float:right;
    margin-right:15px;
    margin-top:-35px;
}

.engage li { 
    display:inline-block;
    border: 1px solid #D8D8D8;
    padding: 5px 5px 5px 5px;
    margin-right:-5px;
}

.engage li a {
    text-decoration:none;
    color:#808080;
    padding: 5px 5px 5px 5px;
    margin-right:-5px;
    margin-left:-5px;
}

.engage li a:hover { 
    background-color:#C9C9C9;
    color:#fff;
}

#thisWeek {
    width:220px;
}

#thisWeekTable p {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
    padding-top:0px;
}

.select {
    width:60px;
    padding-left:20px;
}

.checkbox {
    width: 25px;
    position: relative;
}

.checkbox label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    background: #eee;
    border: 1px solid #ddd;
    background-color:#fff;
}

.checkbox label:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 2px;
    left: 2px;
    border: 3px solid #808080;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.checkbox label:hover::after {
    opacity: 0.3;
}

.checkbox input[type=checkbox]:checked + label:after {
    opacity: 1;
}


#thisWeekTable tr:hover { 
    background-color:#7FC1E2;
    color:#fff;
}

这是第二个“本月”的代码

HTML 代码

<p>This month:</p>

<table class="classSchedule" width="100%">
<tr class="tableSection">
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png" alt="arrow"/></a></td>
</tr>
<tr>
<td>$</td><td><img src="images/view.png"/></td>
</tr>
<tr>
<td colspan="6" class="actionList">
<ul>
<li><a href=""><div class="classWatchButton">Watch</div></a></li>
<li><a href=""><div class="classMoreButton">Learn more</div></a></li>
<li><a href=""><div class="classRegisterButton">Register</div></a></li>
</ul>
</td>
</tr>
</table>

<table class="classSchedule" width="100%">
<tr class="tableSection">
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td>
</tr>
<tr>
<td>$</td><td><img src="images/view.png"/></td>
</tr>
<tr>
<td colspan="6" class="actionList">
<ul>
<li><a href=""><div class="classWatchButton">Watch</div></a></li>
<li><a href=""><div class="classMoreButton">Learn more</div></a></li>
<li><a href=""><div class="classRegisterButton">Register</div></a></li>
</ul>
</td>
</tr>
</table>

<table class="classSchedule" width="100%">
<tr class="tableSection">
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td>
</tr>
<tr>
<td>$</td><td><img src="images/view.png"/></td>
</tr>
<tr>
<td colspan="6" class="actionList" id="1">
<ul>
<li><a href=""><div class="classWatchButton">Watch</div></a></li>
<li><a href=""><div class="classMoreButton">Learn more</div></a></li>
<li><a href=""><div class="classRegisterButton">Register</div></a></li>
</ul>
</td>
</tr>
</table>

<table class="classSchedule" width="100%">
<tr class="tableSection">
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td>
</tr>
<tr>
<td>$</td><td><img src="images/view.png"/></td>
</tr>
<tr>
<td colspan="6" class="actionList" id="2">
<ul>
<li><a href=""><div class="classWatchButton">Watch</div></a></li>
<li><a href=""><div class="classMoreButton">Learn more</div></a></li>
<li><a href=""><div class="classRegisterButton">Register</div></a></li>
</ul>
</td>
</tr>
</table>

<table class="classSchedule" width="100%">
<tr class="tableSection">
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td>
</tr>
<tr>
<td>$</td><td><img src="images/view.png"/></td>
</tr>
<tr>
<td colspan="6" class="actionList">
<ul>
<li><a href=""><div class="classWatchButton">Watch</div></a></li>
<li><a href=""><div class="classMoreButton">Learn more</div></a></li>
<li><a href=""><div class="classRegisterButton">Register</div></a></li>
</ul>
</td>
</tr>
</table>

<table class="classSchedule" width="100%">
<tr class="tableSection">
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">25</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td>
</tr>
<tr>
<td>$</td><td><img src="images/view.png"/></td>
</tr>
<tr>
<td colspan="6" class="actionList">
<ul>
<li><a href=""><div class="classWatchButton">Watch</div></a></li>
<li><a href=""><div class="classMoreButton">Learn more</div></a></li>
<li><a href=""><div class="classRegisterButton">Register</div></a></li>
</ul>
</td>
</tr>
</table>

CSS 代码

#classBanner {
    position:relative;
    background-image:url(../images/classbanner.jpg);
    background-repeat:no-repeat;
    width:799px;
    height:532px;
    color:#fff;
    margin-top:-25px;
}

#classCont {
    position:relative;
    top:100px;
    width:411px;
    height:437px;
    left:10px;
    font-size:18px;
}

#classCont p {
    font-size:25px;
    margin-bottom:10px;
    font-weight:bold;
}

#calIcon {
    width:162px;
    height:79px;
    border:3px solid #fff;
    text-align:center;
    font-weight:bold;
    position:absolute;
    right:0;
    bottom:40px;
}

#calIcon img { 
    margin-top:10px;
    vertical-align:middle;
    margin-bottom:5px;
}

#calIcon a { 
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color:#fff;
}

#calIcon a:hover { 
    background-color:#666;
}

#classScheduleDiv {
    position:absolute;
    background-color:rgba(255, 255, 255, 0.6);
    color:#4D4D4D;
    right:35px;
    bottom:0;
    width:250px;
    height:425px;
    overflow-y:hidden;
}

.color {
    background-color:#F90;
    width:2px;
    height:100%;
}

.classRegisterButton {
    background-color:#29A5DC;
    color:#fff;
    max-width:65px;
    padding: 2px 4px 2px 4px;
    -webkit-border-radius: 4px; /* Safari & Chrome */
       -moz-border-radius: 4px;/* Firefox */
        -ms-border-radius: 4px;/* Internet Explorer */
         -o-border-radius: 4px;/* Opera */
             border-radius: 4px;
}


.classMoreButton {
    background-color:#C6C6C6;
    color:#333333;
    max-width:65px;
    padding: 2px 4px 2px 4px;
    -webkit-border-radius: 4px; /* Safari & Chrome */
       -moz-border-radius: 4px;/* Firefox */
        -ms-border-radius: 4px;/* Internet Explorer */
         -o-border-radius: 4px;/* Opera */
             border-radius: 4px;
}

.classWatchButton {
    background-color:#C6C6C6;
    color:#333333;
    max-width:65px;
    padding: 2px 4px 2px 4px;
    -webkit-border-radius: 4px; /* Safari & Chrome */
       -moz-border-radius: 4px;/* Firefox */
        -ms-border-radius: 4px;/* Internet Explorer */
         -o-border-radius: 4px;/* Opera */
             border-radius: 4px;
}

.date ul {
    padding:0;
    margin:0;
}

.date ul li {
    list-style-type: none;
}

.dayNum {
    font-size:20px;
    font-weight:bold;
    margin-bottom:0px;
}

.actionList ul {
    margin-top:0;
    margin-bottom:0;
}

.actionList ul li {
    display:inline-block;
}

table.classSchedule { 
    border-top:1px solid #ADADAD;
}

.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}

td.actionList {
    display: none;
}

.hide:target ~ td.actionList {
    display:table-cell;
}

【问题讨论】：

表格不适用于布局，句号。
@Diodeus 感谢您的澄清，关于如何使用 divs 实现相同效果的任何想法？ JSFIDDLE 1：linkJSFIDDLE 2：link
您可以在每个 LI 中使用带有浮点数的无序列表。请参阅此作为入门：alistapart.com/article/prettyaccessibleforms
@bayeast 使用 CSS 你可以随意放置东西。如果您需要旧版浏览器支持，您可以使用浮动和边距来实现您想要的效果，否则 flex box 是一个非常有用的工具。
Twitter Bootstrap 也是一个不错的起点。看看他们的 PANELS 实现。

标签： html css html-table

【解决方案1】：

切勿使用表格进行布局。它们具有语义含义，不应用于该目的。 Divs 应该用于布局设计，但关键是不要过度使用它们（或者像你提到的那样大量嵌套它们）。您需要学习如何在不过度依赖 div 的情况下定位元素。您还可以使用新的 HTML5 块级元素为您的布局提供更好的语义含义。这些包括部分、文章和导航，它们可以像 div 一样使用，但它们意味着应该包含哪些内容。

就保持布局简单而言，您可能想看看 flex box，它是 CSS3 中一个非常强大的定位工具。如果您确实使用 flex box，请注意它的局限性：http://caniuse.com/flexbox

只是给你一个例子来说明你如何做到这一点，这里是你现在拥有的 HTML 标记：

<tr>
    <td class="select">
        <div class="checkbox">
             <input id="checkboxInput6" type="checkbox" name="" value="1">
             <label for="checkboxInput6"></label>
        </div>
    </td>
    <td>
        <p style="font-weight:bold;font-size:15px;">26</p>
        <p style="font-size:10px;">Feb</p>
    </td>
    <td width="100%">
        &nbsp; Planing and Goals
    </td>
</tr>

如果我使用表格来执行此操作，我将如何留下标记，考虑到数据类型，我认为这是不合适的：

<tr>
    <td class="select">
        <input class="week-checkbox" id="checkboxInput6" type="checkbox" value="1">
        <label class="week-checkbox" for="checkboxInput6"></label>
    </td>
    <td>
        <p class="week-day">26</p>
        <p class="week-month">Feb</p>
    </td>
    <td>
        <p class="week-topic">Planing and Goals</p>
    </td>
</tr>

这足以使用 CSS 并完全按照您现在的样式设置样式。它删除了所有不必要的标记并将样式信息保存在单独的文档中，因此您无需不断重复。您用来放置复选框的 div 是过度使用 div 的一个示例。那里完全没有必要，没有它你可以定位，它没有语义意义。这是一个称为 divitis 的问题，您不是唯一一个遭受它的人，请随时查找有关它的一些文章，以便获得有关如何解决它的一些提示。

如果您只想使用无序列表来做同样的事情，我会这样做：

<ul>
    <li class="week-select">
        <input class="week-checkbox" id="checkboxInput6" type="checkbox" value="1">
        <label class="week-checkbox" for="checkboxInput6"></label>
        <p><span class="week-day">26</span><span class="week-month">Feb</span></p>
        <p class="week-topic">Planing and Goals</p>
    </li>
...
</ul>

然后您需要构建 CSS 以根据需要定位这些元素。也就是说，这里有足够的标记来生成相同的布局。良好标记的目标是使其有意义和简单。过多的位置标记会破坏含义并变得难以理解。

【讨论】：

@bayeast 添加了一个示例，为您提供有关如何简化标记的一些想法。
“从不使用表格进行布局”除非显示表格数据，在这种情况下，是正确且符合语义的方式。

@Paulie_D 但它是表格数据而不是布局:)，但我同意，如果您阅读我上面的评论，我提到他的示例实际上是表格数据，因此适合在表格中使用.

@sage88 你是对的，谢谢你的例子和想法。我将按照建议用更简单的标记重写页面

@bayeast 是的，这是准表格数据，可以在表格中使用。在无序列表中可能会更好，但不适合在表格中使用。您不想做的是使用表格制作整个布局。因此，您显示的每个元素都是一个表格，但不要使用表格将它们定位在页面上。