https://stackoverflow.com/questions/23661585
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian
Never use tables for layouts. They have a semantic meaning and should not be used for that purpose. Divs should be used for layout design, but the key is to not over using them (or heavily nesting them as you mentioned). You need to learn how to position elements without overly relying on divs to reach this. You can also give your layout better semantic meaning my using the new HTML5 block level elements. These include section, article, and nav which can be used just like divs, but they mean something about what content should be included there.
As far as keeping your layouts simple, you might want to look at flex box which is an incredibly powerful positioning tool of CSS3. If you do go with flex box, just be aware of its limitations: http://caniuse.com/flexbox
Just to give you an example of how you could do this, here's the HTML markup you have now:
<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>
Here's how I would leave the markup if I were using tables to do this which I don't think is inappropriate given the type of data:
<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>
This is enough markup to use CSS and style it exactly as you have now. It removes all of the unnecessary markup and keeps styling information in a separate document so you don't need to repeat it constantly. The div that you used to position your checkbox is an example of over-using divs. It's completely unnecessary there, you could position without it and it doesn't make semantic sense. It's a problem called divitis and you aren't the only one to suffer it, feel free to look up some articles about it so that you get some hints on how to work around it.
If you wanted to do the same thing only using an unordered list, I would do it like this:
<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>
And then you'd need to construct CSS to position these elements as needed. That said, there's enough markup here to be able to produce the same layout. The goal of good markup is to keep it meaningful and simple. Too much positional markup ruins the meaning and becomes difficult to understand.
