Page Layout

Using a Table

The original and most rudimentary method to layout your page content is to use an HTML Table, and imho is still an ok option if your layout is simple, but it is not as dynamic as using Flexbox styling of <div>...</div>, but we'll go into that later.

However, let's look at a example of using an HTML Table to construct the main layout for a page with the following 'areas' ...

HEADER

NAVBAR

LEFT

MAIN

RIGHT

FOOTER

For which the HTML & CSS would be something like the below, where <tr>...</tr> blocks define rows, and <td>...</td> blocks define 'row columns' or 'table cells'

HTML

<table class="layout">

          <tr>

            <td class="header" colspan="3">

              HEADER

            </td>

          </tr>

          <tr>

            <td class="navbar" colspan="3">

              NAVBAR

            </td>

          </tr>

          <tr>

            <td class="left">LEFT</td>

            <td class="center">MAIN</td>

            <td class="right">RIGHT</td>

          </tr>

          <tr>

            <td class="footer" colspan="3">

              FOOTER

            </td>

          </tr>

          </table>

CSS (Simplified)

table.layout {

            width: 100%;

            height: 100%;

          }

          td.header, td.navbar, td.footer {

            text-align: center;

            height: 30px;

          }

          td.center {

            text-align: center;

            width: 70%;

          }

          td.left, td.right {

            text-align: left;

          }

The only complexity here is using 'colspan' to create cells than span across multiple columns, and then some css styling to controls the size of each area and how the text aligns within it. So in essence this is pretty straight forward and works ok, though dynamic scaling is limited, but if this is all you need then Voila.

Note I'd advise against having a 'Page Footer' as it can lead to all sorts of headaches with respect to having to dynamically set area heights and requiring scrolling Left / Main / Right areas just to ensure the footer is always visible.