STEPS: Overview | Part A & B | Markup | Table Tags | Save & Validate | Content and Style | Turn in Work

OTHER PAGES: Topic Guidelines | Copyright Compliance | Creating a Logo | Sample Final Page

Part A The 'table' tags

A basic table uses three sets of tags:

<table></table> These tags define the entire table

<tr></tr> These tags define a row in the table

<td></td> These tags define a cell in the table

 

When you put them together, they look like this:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

1. To customize this table, we can add three attributes, width, border, and cellpadding. The width is set to be the entire width of the page (100%), the border is set to have no thickness (0)—in other words, no border—and there is a little bit of padding between the edge of the table and the text.

<table width="100%" border="2" cellpadding="5">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

2. Copy this table code to the body of project_plan.html after your heading (h1).

Feel free to change these values to see what happens (click on "Design" to see the changes).

Also note the '&nbsp;' inside each cell. This stands for "non-breaking space" and it puts a blank space in the cell.

 

3. You will have 5 items to put in your table, so you'll need 4 more rows. You could do this by typing in the tags, but we'll do it by copying and pasting. Paste the following code into your table just above the end table tag.

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

Save your page and preview it in the Web browser. It will look like this:

4. Repeat this 3 more times so you have 5 rows total.

5. Change the border attribute in the table tag from 2 to 0:

<table width="100%" border="0" cellpadding="5">

6. Save your page and preview it in the Web browser. The lines should disappear.

 

Next you will save your page and validate it.