Okay, I made this because I'm kind of sick and tired of the simple requests in my layout thread. All of the stuff there can be stolen, or better yet, made by yourself. Learn some HTML, learn some CSS, look at OTHER PEOPLE'S layouts for some really great examples (check the retired layouts in my workshop/request thread) and you'll eventually figure it out.

Below are several table and div examples to learn from; These are the basic building blocks of your layout, and you can always add styles to them. To learn how styles work, there are other threads in the "Computing" forum that cover these in (somewhat) great detail.

The examples are HIGHLY exaggerated for educational purposes. We do not expect you to have layouts containing seven different cells. In factm we recommmend not going that far, having simple two- or three-cell layouts instead. When you are finished reading this, you should leave this page with a better understanding of how tables and div cells work, so you understand the basic structure of a layout if you wish to code it in a word processor. For those using WYSIWYG editors, this is still good information to have, expecially if you can't edit certain things in the GUI and are left with the source code to work from.

Tables
In these examples, tables are set up in a Battleship-esque style with lettered columns and numbered rows.

Basic terminology
colspan - How many COLUMNS a single cell occupies. For every column a cell takes up, subtract 1 table data cell from the current table row
rowspan - How many ROWS a single cell occupies. For every row a cell takes up, subtract 1 table data cell in the affected table rows.
Table - <table>...</table>, Initializes the table altogether.
Table body - <tbody>...</tbody>. lets you specify a style for all table cells regardless of if they're header or data cells, but does not affect table spacing.
Table header - <th>...</th>, By default bolds the data inside these cells. With some clever coding you can make these, and table data cells look like anything. We won't be using these in our examples.
Table data - <td>...</td>, The meat and potatoes of a table. <td> makes up for the majority of a table most of the time.
Table row - <tr>...</tr>, Initializes a table row.
cellspacing - <table cellspacing="X">, X is an integer determining the number of pixels cells are spread out on a table. Not specified in our examples.
cellpadding - <table cellpadding="X">, X is an integer determing the number of pixels around table data. Typically, the larger the number, the more space there is around the table data. Not specified in our examples.
border - <table border="X">, X is an integer that determines the number of pixels a border has around a table. If using CSS in a table, border must stay as 1 to display any changes when using styles. Not specified in our examples.

How CSS works
(Remember, "X" means a class name in this section)
You may have heard about it, but if not, CSS, lesser-known but more appropriately as Cascading Style Sheet allows you to modify the look of certain bits and pieces you specify using inline styles (<target style="stuff {}">), classes (.X {}... <Target class="X") and classes that modify dependants in other HTML entities (target.X dependant). For tables, here's what you'll be looking for:
table.X
table.X tbody
table.X td
table.X tr

Note, classes can be named anything, ANYTHING, as long as you begin it with a letter, limit yourself to alphanumeric characters and use underscores or hyphens as spaces. No space breaks allowed.

- 1 2 3 4
A
1
2
3
4
B
1
2
3
4
C
1
2
3
4
D
1
2
3
4
No changes example
Nothing has been changed. This is the template I'll be using to display and explain the dynamics of cell combining.

The black boxes denote the grid and namespace in each example. The numbers tell you what cell it is in the table row, whle the letters themselves are the individual rows. The red boxes are the examples themselves. This right box here explains what's going on, and the numbers in red help to guide you on what cells are affected in different table rows. If you want the example to toy around with, here's the code and styling for the example table:

<style type="text/css">
table.training { text-align: left;border: 2px solid black;
 }
table.training td { width: 20px; height: 20px; border: 2px solid red;
 }
</style>
<html>
    <table class="training" border="1" cellspacing="20">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</html>

- 1 2 3 4
A
1
2
3
4
B
1
2
3
C
1
2
D
1
2
"rowspan" example
In this example, A1 is one whole cell spanning four rows. This makes cells B1-D1 non-existant. The cells A2-A4 are separate, which means row A still has four table data cells to work from.

Since A1 takes up four rows, B2 becomes our first cell in the second row. There are three cells you only need to add here, and B3 takes up space in C3 also.

Row C only has two cells, since in row B, cell 2 occupies one cell in row C. The same also applies for row D, since D2 is a part of C2.

Non-existant cells: B1, C1, C3, D1, D2

- 1 2 3 4
A
1
B
1
2
C
1
2
3
4
D
1
2
3
"colspan" example
In this example, A1 this time takes up a whopping four cells on the horizontal. Colspan is much easier to deal with, since you are only affecting the current table row. Whch means in this case, row A has one cell.

Row B has two cells, one spanning from B1 to B3, and a lonely cell in B4.

Nothing has been changed in row C.

Row D has two cells, plus one that starts off at cell D3.

Non-existant cells: A2, A3, A4, B2, B3, D4

- 1 2 3 4
A
1
2
3
4
B
1
C
1
2
3
D
1
2
Hybrid example
In this example, both rowspan and colspan are used. Cell A only tskes up three rows this time, but like the rowspan example, there are still four cells.

Row B only has one cell, since it takes up all the columns it can on the table.

Row C has three cells, with the first one in the group, C2 taking the cell beneath it.

Row D has two cells, one at D1 and D3 taking the rest of the space.

So, what's the real-world significance of all of this, you ask? Well, rather simple. Since you know how to build really big tables, this means you know how to build smaller tables too. Using the prior knowledge I just fed you, you can easily figure out how to make your own epic 4x4 table with three cells to base your layout off of.

Divs
Pending. If you have anu suggestions for this, anything I should know more about div containers before I move onward, feel free to send a PM.

Corrections
(I may have a form here eventually, but in the meantime,) if there are any problems you see in this page, something I said that was incorrect or needs further elaboration, do not delay in sending a PM to me with the subject "Layout guide".