html - 用于复杂布局的 div 或表格？-6ren

html - 用于复杂布局的 div 或表格？

转载作者：行者123 更新时间：2023-11-27 23:56:33

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

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

而 div 允许更多的灵 active ，并且可以更快地维护、加载和实现响应式设计。

当有人说:

时，我感到困惑:

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

-不推荐使用 tables 来处理可以通过使用 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;
}

最佳答案

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

就保持布局简单而言，您可能想看看 flexbox ，它是 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 以根据需要定位这些元素。也就是说，这里有足够的标记来生成相同的布局。良好标记的目标是保持其有意义和简单。过多的位置标记会破坏含义并变得难以理解。

关于html - 用于复杂布局的 div 或表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23661585/

文章推荐： css - 子项展开时如何在嵌套 CSS 网格中展开父项高度

文章推荐： javascript - 使用 jQuery 通过 PHP 显示动态工具提示

文章推荐： javascript - 验证并提交表单后，重置表单+更改一些CSS样式

文章推荐： css - 在不超出父 div tailwindcss 的情况下 float 右键

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 用于复杂布局的 div 或表格？