Arranging information on your web page can be exciting, frustrating and confusing all at the same time. As an artist, I have specific needs and desires of how I want to present my stuff. The web isn’t as forgiving as say, working in Adobe Photoshop. There are rules that apply which one must understand to achieve specific design layouts when creating a website.

Without jumping into the use of stylization and CSS (Cascading Style Sheets), I would like to introduce tables. This simple structure allows content to be placed in cells (tag: td) which are part of rows (tag: tr) and columns (col). Below is a simple table, below is the code.

My content has a padding of 10px.	You can see the cellspacing is set to 10px.
I set my border to be 2px wide all the way around.	This is great for data!

<table border=”2″ cellspacing=”10″ cellpadding=”10″>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>

I would urge you to play with this in your page and see what works and what doesn’t work. You must have the same amount of cells in each row in order for the page to not break. If you want a row that has a different cell count, you would simply add a colspan as shown below.

td	td
I simply added colspan=”2″ since there should be two cells in this row.

There are other attributes that you can set within the cells themselves, not just the table as a whole. If I want a cell to have its text centered for example, I would write;

<td text-align=”center”>All my text would align center</td>

Granted, there are many other things that you can do with tables, the above gives you the basic idea. I may come back here and add things, but I feel we need to move on. You should play with a table or two and see how it works. Putting a table inside a table cell is called nesting, and sometimes is necessary, but please do not be dependent on tables for your layout. There is something much more interesting and exciting in the next post!

When I started developing websites (or attempting to at least!), I was taught by someone I rather not expose here to use tables for my main layout. Well, times are chaning, quickly, and I can tell you that tables are best used for straight data … not layout and design.

Click here for Teaching HTML and CSS [#6]

Tags: columns, css, design, html, html tutorial, rows, tags, web design, web page