b. Constructing Tables
Tables? why not divs?
I once talked to a guy who said that tables were out and divs were in. You may have an opinion on this, but after researching myself and going to some of the more popular websites, I found that tables are still used. Some features of tables make them so much easier to use. If someday all of the browsers render the Divs in the same way, I might think about switching to Divs, but until then, I’ll stick with my tables because cross-browser support is so much easier.
Planning the table
Look at your design with your slices and decide how you are going to set up your table. It may help you to print it out and draw some marks on the page where you want to make the cells in the table. This is how mine turned out:
So from this diagram, I know that I need a table with 5 rows and 5 columns. This is the code to make that table:
<table >
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<tr> is the tag for a new row and <td> is the code for a new column. this is what the table looks like:
Now we know that we want the first row to span all 5 columns, the first column in the second row to span 3 rows, the second column in the second row to span 3 columns, the third column in the second row to span 3 rows, and so on. The code for having a column to extend columns, the code is ‘colspan=”#”.’ to extend a row multiple rows, the code is: ‘rowspan=”#”‘ Each of these replacing the # with the number of columns and rows to span. Also note that these tags belong in the <td> tag. When you add them, you also must remove the <td> tags that will be covered by the previous extended columns and rows. (this will make more sense later, so just nod your head and pretend to know what I’m saying even if you don’t). This is how the new code will look:
<table>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td colspan="3"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
Looks a lot less complicated, huh? Notice how I’ve removed the <td> tags that were replaced with the colspans and rowspans. This is what the table looks like:
Now this is starting to look like a layout.
Next step: Adding Graphics