Through my life as a web designer I have come across many situations where both are very useful. I find that divs usually overrule all, but tables can really help give something structure.

Please comment and suggest things to add!

Navigation::
- Div
--- Adding a class
----- Styling
--- Adding a id
----- Styling
--- Align side by side

- Table
--- Tags
--- Structure

-----------------------------------------
-----------------------------------------

Div::
Div's are very useful for everything. You can style a block of text or even align/ position a whole chunk somewhere.

If you want to style a div you can just add a class or id like below:

Adding a class:

Code: [Select]

<div class="custom_class">Test</div>


Style with:

Code: [Select]

.custom_class
{
     color: #fffff; // Text color in the custom_class div
     background-color: #000000; // background color of the div
}


Adding a id:

Code: [Select]

<div id="custom_class">Test</div>


Style with:

Code: [Select]

#custom_class
{
     color: #fffff; // Text color in the custom_class div
     background-color: #000000; // background color of the div
}


Divs (as is) do not allow to be side by side or lined up like you can with tables.  To line up divs just add a float left or right in the css of all the divs you want lined up.

Code: [Select]

<div class="div_line_up_left">LEFT Div1</div>
<div class="div_line_up_left">LEFT Div2</div>

<div class="div_line_up_right">RIGHT Div1</div>
<div class="div_line_up_right">RIGHT Div2</div>


Code: [Select]

.div_line_up_left
{
     float: left; // makes it line up and align left
}

.div_line_up_right
{
     float: right; // makes it line up and align right
}


Table::
Tables are useful for arranging data or giving your site a number of columns. You can split up your site into a side bar and then the main content. This can also be done with floating divs but you can get concrete secure layout with tables. You can add classes and id's to <table> <tr> <td> tags just like how you would divs.

Tables are coded with three main tags.
<table> : This starts the table(and ends </table>
<tr> : This is a table row make sure to end it (</tr>)
<td> : This is a table cell (end it as well)

There is also another table tag <th> which is treated just like a td. It is just a table header ussually used to store info...

Tables are constructed as so:

Code: [Select]

<table>
     <tr>
          <td>
               Table Cell #1 - Row 1
          </td>
          <td>
               Table Cell #2 - Row 1
          </td>
     </tr>
     <tr>
          <td>
               Table Cell #1 - Row 2
          </td>
          <td>
               Table Cell #2 - Row 2
          </td>
     </tr>
</table>


Wow man! You have no idea how much posts like this mean to noobs like me.
Thanks a lot MLM. You're the best!