Using Tables for Better Web Page Layouts
Let’s say that I want to put two pictures side by side on my website like this:
but I want them to be nicely spaced across the page.
One way to do this is to use tables. Tables have rows and columns. Where the rows and columns intersect, they create cells. For two pictures side by side, we just need a 1 row by 2 column grid. I get this by using the table, table row and table data tags like this:
<table width="100%">
<tr>
<td width="50%" align="center">
<img src="http://sonrises.com/images/1.jpg" width="160" height="120">
</td>
<td align="center">
<img src="http://sonrises.com/images/2.jpg" width="160" height="120">
</td>
</tr>
</table>
This code will give me this:
|
|
|
Notice that I start with a set of table tags:
<table>
</table>
Then I add the rows - in our example, there is only one row:
<table>
<tr>
</tr>
</table>
Then I add the columns or cells - in our example, there are two inside the one row:
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
And then I add the code that I want to show up in each cell - in our example, it was a picture. It could be anything. Then I add attributes to the tag to change the width of the table and the cells. I also added attributes to center the pictures in the cells.
Tables are VERY useful in designing your web pages.