Creating A Simple Table

Objectives
 To create a simple table with borders and headers.
Instructions
You will insert a table into your HTML page from the Insert Pane. The table will make use of the following tags- <TABLE>, <CAPTION>, <TR>, <TH> and <TD>.

Comments
The insert table option in the Insert Pane is used to create initial table templates.  The more advanced table attributes cannot be applied to your table at this stage.  You will normally use this option to create a simple table using the default settings and then modify it afterwards.

Activity 1

Enter an appropriate title for your HTML document. e.g., Creating Tables with Dreamweaver.  Right Click on the document window Design View and select the option Page Properties…. Type the title into the Title: text box in the Page Properties dialog box. Click OK in this dialog box and then save your document into the directory you created in Task 2

Activity .2 

You will now insert a table template using Dreamweaver’s Insert Pane.  Click on the Insert Table icon  on the Common tab of the Insert Pane tool bar. (If the Insert Pane is currently minimised, click the on the Insert Pane title.)

The dialog box gives you the options to set six of the most important table definition attributes. Create a table with 3 rows, 4 columns, a width of 70% and a border of 2 pixels. (Cell Padding defines the width in pixels between the edge of a table cell and its' contents. Cell Spacing defines the width in pixels between individual table cells. These attributes gives extra control over the appearance of a table.)

Activity 3 

In the document window click the Show Code View button .  This will open the Code View which shows all the HTML code in the document. Click on the body of the Code View to give it the focus, at which point it has a white background which indictates that it is ready for editing. At present the only code present is that automatically generated by Dreamweaver upon opening a new document, and also the HTML generated when you inserted a new table from the object palette


The following HTML tags will be inserted into your document.

 <table width="70%" border="2">

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

 The &nbsp;  seen above is the HTML code for a nonbreaking space. Dreamweaver inserts this into empty cells because some browsers collapse the cell without it.