复杂布局的div或表？
我已经研究和阅读了很多关于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%"> 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%"> 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%"> 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%"> 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%"> 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%"> 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;
}
1 个答案:
答案 0 :(得分：2)
永远不要使用表格进行布局。它们具有语义含义，不应用于此目的。 Div应该用于布局设计，但关键是不要过度使用它们（或者如你所提到的那样大量嵌套它们）。您需要学习如何定位元素而不过度依赖div来达到这个目的。您还可以使用新的HTML5块级元素为您的布局提供更好的语义。这些包括可以像div一样使用的section，article和nav，但它们意味着应该包含哪些内容。
至于保持布局简单，你可能想看看flex box，这是一个非常强大的CSS3定位工具。如果你选择弹性框，请注意其局限性：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%">
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来根据需要定位这些元素。也就是说，这里有足够的标记能够产生相同的布局。良好标记的目标是保持其有意义和简单。太多的位置标记破坏了意义，变得难以理解。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？