Part 3: Pulling it Together with Links
The original purpose of HTML was to combine the various data that were being churned out of the experiments at CERN (European Organization for Nuclear Research). It kind of grew a bit from those origins almost 20 years ago but, if you look close enough, you can see its roots.
Tables are one of the oldest elements available in HTML for laying out content – although this is no longer the standard way of doing it. Using CSS for layout design results in faster downloads and page-drawing on the client, and also for easier modification.
Still, tables are extremely useful if you actually have something that needs to be put into a table.
Simple Table
Code:
<table>
<tr>
<th>
Column Heading 1
</th>
<th>
Column Heading 2
</th>
</tr>
<tr>
<td>
Row 1, Column 1
</td>
<td>
Row 1, Column 2
</td>
</tr>
<tr>
<td>
Row 2, Column 1
</td>
<td>
Row 2, Column 2
</td>
</tr>
</table>
This will create a table that is 2 columns wide, and 2 rows long, and has column titles on the top.
Code:
+------------------+------------------+
| Column Heading 1 | Column Heading 2 |
+------------------+------------------+
| Row 1, Column 1 | Row 1, Column 2 |
+------------------+------------------+
| Row 2, Column 1 | Row 2, Column 2 |
+------------------+------------------+
Simple enough….
Complex Layout
Now, say you want a layout like:
Code:
+------------------+------------------+------------------+
| Row 1, Column 1 | Row 1, Column 2 | This information |
+------------------+------------------+ applies to both |
| Row 2, Column 1 | Row 2, Column 2 | rows |
+------------------+------------------+------------------+
Well, the following code would achieve it:
Code:
<table>
<tr>
<td>
Row 1, Column 1
</td>
<td>
Row 1, Column 2
</td>
<td rowspan=’2’>
This information applies to both rows
</td>
</tr>
<tr>
<td>
Row 1, Column 1
</td>
<td>
Row 1, Column 2
</td>
</tr>
</table>
Notice how the second <tr> element only contains two <td> elements.
The
rowspan attribute enables you to specify that a cell should take up multiple rows. Similarly, the
colspan attribute works for columns.
The problem with tables is that the browser needs to first work out the size of the table and then draw it, and it is this which would slow down the drawing of the page if they were used for layouts.
Still, you do get the closest match between IE and Firefox (and Opera) when using tables with the least effort, and so you will find that many sites still rely on them for design.
If at all possible, avoid table layouts and only use them for actual data.
Lists
A lot of things come in lists – shopping, books, music tracks, instructions. Sometimes they have an order (a music top 40 for example), and sometimes they don’t (a set of items required for an activity).
HTML can handle both.
Chaos – Unordered Lists
If you happy enough to have no order (except that which you type in), then use the unordered list:
Code:
<ul>
<li>Unordered lists can be used as bullet points for listing attributes</li>
<li>OR properties</li>
<li>OR links to other websites</li>
</ul>
And of course, a lot more besides.
Order Lists
Code:
<ol>
<li>This would be number 1 in the list</li>
<li>And this would be number 2</li>
</ol>
By default, ordered lists are numbered with Arabic number (0-9). However, there are some CSS style properties that can be used to change this – you can have roman numerals, letters, and so on.
Lists of Lists
You can even have lists of lists:
Code:
<ol>
<li>
<ul>
<li>This is bullet within item 1</li>
<li>Another bullet</li>
</ul>
</li>
<li>
Item 2 has bullets because it is simpler
</li>
</ol>
Or list of lists of lists of lists of lists of lists of lists….
Sorry, got carried away there.
The next tutorial will cover the use of structured text elements to describe information on your page…
Part 5: Structured Text
Add to del.icio.us 
Can you digg it?
Linear Mode
