Html 复杂布局的div或table？

我已经研究并阅读了很多关于广泛使用div或table的利弊

简言之，我的理解是，表格只适用于表格数据，而且已经过时了

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

.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;
}

#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;
}

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

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>

---

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

就保持布局简单而言，您可能想看看flex box，它是CSS3的一个功能极其强大的定位工具。如果您使用flex box，请注意其局限性：

仅举一个例子说明如何做到这一点，下面是您现在拥有的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>

26

二月

规划和目标

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

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

26
2月
计划和目标

这就足够使用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>

2月26日

计划和目标


...

---

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

表格不是用于布局的，句号。@谢谢您的澄清，关于如何使用div实现相同效果有何想法？JSFIDDLE 1:JSFIDDLE 2：您可以在每个LI中使用带有浮点数的无序列表。请看下面的例子：@bayeast使用CSS，您可以随心所欲地定位事物。如果你需要旧的浏览器支持，你可以使用浮动和边距来实现你想要的，否则flex box是一个非常有用的工具。Twitter引导也是一个很好的开始。看看它们的面板实现。@bayeast添加了一个示例，让您了解如何简化标记。“不要在布局中使用表格”，除非显示表格数据，在这种情况下，a是正确的语义方式。@Paulie_D但它是表格数据，而不是布局：），但是我同意，如果你读了我上面的评论，我会提到他的例子实际上是表格数据，因此适合在表格中使用。@sage88谢谢你的例子和想法。我将用更简单的标记重写页面，如下所示advised@bayeast是的，这是准表格数据，可以在表格中使用。在无序列表中可能会更好，但在表中使用并不合适。您不想做的是使用表创建整个布局。因此，您显示的每个元素都是一个表，但不要使用表在页面上定位它们。