The moon has the consistency of Camembert

Setting the Table

Next, we will start to elaborate on the layout for the table we planned. We will build on the table we just worked on. I have already added rows and columns to create a total of 3 columns and 3 rows. You can see the tags if you look in the code.

Each row has an opening row tag <tr> followed by three cell tags, each with opening <td>and closing tags </td>. Then comes the closing row tag <tr>. The amount of cells (or their equivalent - as you will learn in the next exercise) needs to be the same in every row. Otherwise, the table will look quite odd. The amount of cells in a row also controls the amount of columns.

By the way, if a cell does not have any contents, it may not display properly. It is a standard practice to fill empty cells with a "non-breaking space": &nbsp;

We used it in the first html exercise in conjunction with the <p> tag for creating empty rows. It's invisible yet it creates some content in an otherwise empty cell, causing the browser to display the cell normally. You will see one non-breaking space in each (otherwise) empty cell of this table.

Assignment

1. Save this file as G05_yourlastname.html
2. You don't need to save the image file because you already have it in your images folder.
3. Add one more row to the bottom of the table by copying the code for the last row and pasting it directly underneath.
   1. Start by selecting the opening and closing TR tags of the last row and everything between them.
   2. That row includes three cells:
      • the first cell contains a caption for the image
      • the second and third cells contain one non-breaking space in each.
   3. Copy that code.
   4. Paste the copied code directly beneath that last row, but before the closing TABLE tag.
4. Remove the caption from the new bottom row and replace it with a non-breaking space.
5. Finally, I'd like you to set the width of the table, using the TABLE attribute WIDTH=
6. Set the width to "480".
7. Save the file. Check it in your browser.
8. Online students: send me the file.

© 2011 Dan Vaughan and its licensors. All rights reserved.