divs or tables for complex layout?

Vote count:

0

I have researched and read a lot about pros and cons on extensive uses of divs or tables.

And my understanding in nutshell is that tables are only good for tabular data and is old fashion.

Whereas div allows more flexibility and is faster to maintain, load, and to implement for responsive design.

I get confused when some people say:

-extensive use of divs or deeply nested divs are bad practice

-extensive use of tables for everything that could be achieved by using divs and css are not recommended

(1) So my question is: which is best recommended to use to achieve this two layouts ? (knowing that I will make them responsive later)

Image 1 "this week": http://ift.tt/RRbKVI

Image 2 "this month": http://ift.tt/1lzoVFa

(2) My second question is if it recommended to use divs to achieve it, how would you proceed ? since it a very complex layout and I only tables as a solution without using extensive amount of divs or deeply nested divs.

Thank you for your help

Here is my code for this week: (knowing the mouseover should highlight in blue the entire row)

HTML code

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

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

And here is the code for the second "this month"

HTML code

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

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

asked 15 secs ago

bayeast

1