Organizing Tables
Watch the Video Tutorial
When you use Dreamweaver to organize tables you can make tables with the click of a button, this is all shown in the video, but this is how the code works like I posted in a previous page:
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: You can have Dreamweaver write this code for you by clicking the table button and telling it you want 5rows and 5 columns.
<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: