A Beginner's Tutorial to HTML - Lesson 7 Tables offers an easy step-by-step how-to guide for creating tables
A Beginner's Tutorial to HTML - Lesson 7 Tables offers an easy step-by-step how-to guide for creating tables!
{short description of image}

HTML Tutorial:
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
 
html tutorial
Garvick Com

A Beginner's Tutorial to HTML

Lesson 7
Tables

Tables are beneficial for much more than just presenting data in tabular columns. They can be a valuable aid to formatting your pages, graphics and all. The basic elements of the table consist of the <table>...</table> tag which surrounds the entire table, the <tr> tag which defines the individual rows of the table and the <td> tag which defines the cells within the table rows. Another tag is the <th> tag which creates a table header in a bold font. The attributes of the <table> tag would affect the entire table. They are as follows: 
  • <align>. Enables text to flow around the table. values are align=left or align=right.
  • <border>. Sets the table border thickness. The default value is border=0 (no border)
  • <cellspacing>. Defines the distance a cell frame is from the edges of the object within the frame. The default is cellpadding=1.
  • <width>. Specifies the desired width of the table in pixels or percentages.
  • <height>. Specifies the desired height of the table in pixels or percentages.
These attributes can only be used with the <tr>, <td> and <th> tags: 
  • <align>. Specifies the alignment of text or graphics within the cell. Values are align=left, align=right or align=center. The default is align=left.
  • <valign>. Specifies the vertical alignment of text or graphics within the cell. Values are valign=top, valign=bottom, valign=middle or valign=baseline. The default is valign=middle.
These attributes can only be used with the <td> and <th> tags: 
  • <width>. Specifies a width (which affects all the cells in that column) for the element in pixels or as a percentage of the screen. If more than one cell uses the width attribute, the widest cell setting will be used (Note: if the total of the widths specified exceeds that specified in the width attribute of the <table> tag, the table tag width will be overridden).
  • <height>. Specifies a height (which affects all the cells in that row) for the element in pixels or as a percentage of the screen. If more than one cell uses the height attribute, the tallest cell setting will be used. (Note: if the total of the heights specified exceeds that specified in the height attribute of the <table> tag, the table tag height will be overridden).
  • <colspan>. The number of columns that the cell spans.
  • <rowspan>. The number of rows that the cell spans.
  • <nowrap>. The text wrapping feature is disabled.

An example of this would be this 2 column table which will be constructed a column at a time. We start with the first column: 

 <table border=4> 
<tr> 
<th align=center>First 6 Months of the Year</th> 
</tr> 
<tr> 
<td>January</td> 
</tr> 
<tr> 
<td>February</td> 
</tr> 
<tr> 
<td>March</td> 
</tr> 
<tr> 
<td>April</td> 
</tr> 
<tr> 
<td>May</td> 
</tr> 
<tr> 
<td>June</td> 
</tr> 
</table> 

This is how the first column would look: 

  

First 6 Months of the Year
January
February
March
April
May
June

Now for the second column all you would do is just build on the first: 

 <table border=4> 
<tr> 
<th align=center>First 6 Months of the Year</th> 
<th align=center>Last 6 Months of the Year</th> 
</tr> 
<tr> 
<td>January</td> 
<td>July</td> 
</tr> 
<tr> 
<td>February</td> 
<td>August</td> 
</tr> 
<tr> 
<td>March</td> 
<td>September</td> 
</tr> 
<tr> 
<td>April</td> 
<td>October</td> 
</tr> 
<tr> 
<td>May</td> 
<td>November</td> 
</tr> 
<tr> 
<td>June</td> 
<td>December</td> 
</tr> 
</table> 

This is how both columns would look: 

  

First 6 Months of the Year Last 6 Months of the Year
January July
February August
March September
April October
May November
June December

Next take a look at how the attribute "cellpadding=6" added to the <table> tag makes the table look nicer: 

  

First 6 Months of the Year Last 6 Months of the Year
January July
February August
March September
April October
May November
June December

This is an example with a third column added in between the first and the second. Notice that some of the cells in the middle are blank, the cell at the bottom under "my birthday" looks nicer because it has a non-breaking space (&nbsp;) tag included within the <td> tag: 

 <table border=4 cellpadding=6> 
<tr> 
<th align=center>First 6 Months of the Year</th> 
<th align=center>Special Days<br>(first 6 Months)</th> 
<th align=center>Last 6 Months of the Year</th> 
</tr> 
<tr> 
<td>January</td> 
<td>"leave this area blank"</td> 
<td>July</td> 
</tr> 
<tr> 
<td>February</td> 
<td>Valentine's Day</td> 
<td>August</td> 
</tr> 
<tr> 
<td>March</td> 
<td>"leave this area blank"</td> 
<td>September</td> 
</tr> 
<tr> 
<td>April</td> 
<td>Easter (usually)</td> 
<td>October</td> 
</tr> 
<tr> 
<td>May</td> 
<td>My Birthday</td> 
<td>November</td> 
</tr> 
<tr> 
<td>June</td> 
<td>&nbsp;</td> 
<td>December</td> 
</tr> 
</table> 

This is how it would look: 

  

First 6 Months of the Year Special Days  
(first 6 months)
Last 6 Months of the Year
January July
February Valentine's Day August
March September
April Easter (usually) October
May My Birthday November
June   December

Note: If you check out the above table you'll notice that the center cell at the bottom has a nice edge around it as opposed to the two other empty cells, to accomplish this just insert a non-breaking space (&nbsp;) into the cell.

To add background colors to tables, check this out.

|  Lesson 1 (Learning the Basics) | Lesson 2 (Adding Color)  | Lesson 3 (Formatting Documents) |
Lesson 4 (Graphics) |  Lesson 5 (Linking Text & Graphics) |  Lesson 6 (Lists) |
| Lesson 7 (Tables) | Back to HTML Tutorial |

 

Garvick Home | Free Recipes | Shopping Mall | Annual Events | Vancouver BC

 

Site Map | Garvick's Privacy Policy