Basic Tables

HTML Tutorial - Basic Tables
So, you've got all this content (read: stuff), and want to arrange it on your website eh? Well there are two main ways of doing it, one using HTML, and one using CSS, we're going to concentrate on the HTML method here - tables.

Example
Tables were the original way to arrange content, and can get messy... so im gonna try and make you write clean code (so it'll work in most major browsers). What is a table? The very tutorial you're reading is arranged in a table! click here to see it with borders. Now, as you can see, the page is split up into 2 segments - two rows, and one column - yes? good. The code to create that layout is show below :

<table width="425" border="0">
<tr>
<td>title</td>
</tr>
<tr>
<td>actual tutorial</td>
</tr>
</table>

If this is you're first attempt at tables, that might seem like quite a mouthful, really it isn't - its just the same thing, three tags repeated a few times - note that ALL tags have closing tags (see diagram) - this is to prevent *very* ugly pages, particularly in Netscape. For the purpose of explanation, i have written in red italics, the content in each cell, putting this description in the code would NOT generate the same page!

Explanation
The <table> and </table> tags simply open and close the table, allowing you to use the <tr><td> etc. tags. <tr> opens a new Table Row - making more sense now? What would you put in a row of a table? Data of course! hence the <td> tag - Table Data

What is table data?
Table data can be ANY html element, including other tables! Common uses are arranging images and text, for example on news sites, where u will very often see a layout like this:

HEADLINE
image	article text

Seen at the snazzy new design of nufc.co.uk - now you know how to do it! this layout is acheived by utilising the colspan attribute - <td colspan="2"> - as you can see, the column span is two, i.e. it spans two columns, this is used a lot! NOTE: although not neccissary the " quotation marks are recommended, and if you want your site to be compatible with most browsers I definately recommend you use them

Going further...
Tables can be as complicated, or as simple as you like, here is the simplest possible table :

SIMPLE TABLE

as you can see, it is only one cell... however they can also become complicated...

obviously you probably wouldnt ever HAVE to use that complicated a table... its just overcomplicated to demonstrate that tables DO get complicated (my old front page being a prime example)

I hope this came in useful!
Ask in the forum if you have any suggestions or comments.