OLD WEB DESIGN TRICKS

Joshua Texeria   – Raleigh, NC
123Triad: Web Design & SEO Company

OLD WEB DESIGN TRICKS

With plain old HTML, a web design maven can do tricks on a web page that his less gifted cousins can’t. We know that the Web landscape has changed much now, but we can still see a lot of beautiful living fossils from rudimentary HTML days.

If we don’t know how to look more closely, we can’t tell the difference between the old-style pages and current pages designed with newer technologies.

What HTML tricks did the page design magicians do in the early days?

They used HTML tables — clever use of tables, to be more accurate. For example, to simulate a page with two columns containing a left side bar and a main content pane, they defined a “mother” one-row table occupying a fixed width of the browser (for instance 800 pixels), then sliced the table into two columns: a left column with a width of 25% of the table width, and a right column having a width of 75%.

Example 1. Simulated Sidebar and Main Content Pane

<table width=”800″ align=”center”>
 <tr>
  <td width=”25%”>
   Web Design Trick:<br>
   Left Sidebar
  </td>
  <td width=”75%”>
   Web Design Trick: Main Content Pane
  </td>
 </tr>
</table>

The narrow column served as the side bar for navigation; the wide column, for the page content. Visitors didn’t notice the table because they were borderless.

If the page design specification called for three rectangular panels of different colors (red, orange, and yellow, for instance) at the top of the main content pane, a new table was defined inside the cell in the second column of the mother table, a table within a table. The new table had one row and 3 columns of equal width.

Example 2. First Table Containing Another Table

<table width=”800″ align=”center”>
 <tr>
  <td width=”25%”>
   Web Design Trick:<br>
   Left Sidebar
  </td>
  <td width=”75%”>
   <table width=”100%”>
    <tr>
     <td width=”33%” bgcolor=”red”>
      Red pane
     </td>
     <td width=”33%” bgcolor=”orange”>
      Orange pane
     </td>
     <td width=”34%” bgcolor=”yellow”>
      Yellow pane
     </td>
    </tr>
   </table>
   Web Design Trick: Main Content Pane
  </td>
 </tr>
</table>

Using the table trick makes HTML code look messy, but it works.

123Triad webdesign offers affordable custom website design. Our full service website design company only hires certified website designers. Please contact us today on 1-800-720-0816 for your next web site design project.

Related posts:

1. WEB PAGE LAYOUT WITHOUT TABLES
2. A SHORT STORY OF HTML TABLES – PART 2/2
3. Practical Uses for HTML Tables in Web Design
4. HTML TABLES: A QUICK INTRODUCTION
5. Advice Column Web Design