HGV vacancies, HGV Drivers, Trucks and Trucking HGV vacancies, HGV Drivers, Trucks and Trucking Trucks and Trucking
HGV vacancies, HGV Drivers, Trucks and Trucking
Building Web Pages
Trucks and Trucking
                     
  Go to previous page Tables Go to next page
  Basics   Formatting   Tables   Images   Linking   Resources   About
  In the beginning...   Making your text look good   Positioning your text on the page   Adding images   to other pages and web sites   eBooks.
Free templates
  Info.
What next?

 

Tables allow you to position text and graphics. (The red and cream boxes above are examples).
Have a look at this, these two tables should expose most aspects of table construction:

1. A simple empty box.

 


This is what you would write on your web page:

<table width="200" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
&nbsp;
</td>
</tr>
</table>

NB: Writing your code as above is not essential, it is just easier when you are learning.
The actual format is not important as long as all tags and content follow on.
This will also work:
<table width="200" border="1" cellspacing="0" cellpadding="0" align="center"><tr><td>&nbsp;</td></tr></table>

This is what it means:

<table width="200" border="1" cellspacing="0" cellpadding="0" align="center">   Defines table
<tr>   Opens row
<td>   Opens cell
&nbsp;   * Cell contents
</td>   Closes cell
</tr>   Closes row
</table>   Closes table

* Browser Compatibility: Always put something in table cells if only a space, (&nbsp;).


2. A more attractive table. Note colour, no border, more cells, joined cells.

Hello World
Have a nice day

The code....

<table width="40%" border="0" cellspacing="0" cellpadding="10" align="center" bgcolor="#FFFF00">
<tr>
<td bgcolor="#CCCC00" align="right" width="45%">
<font size="3" face="Arial, Helvetica, sans-serif" color="#000000">Hello</font>
</td>
<td bgcolor="#990000" width="55%">
<font face="Arial, Helvetica, sans-serif" size="3" color="#FFFFFF">World</font>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="Times New Roman, Times, serif" color="#FF0000" size="5"><b>Have a nice day</b></font>
</td>
</tr>
</table>

Notes:
width can be in pixels or percentages.
cellspacing is the distance between cells.
cellpadding is the space, within the cell and around the text.
align can be 'left', 'center' or 'right', (table and td tags).
valign can be, 'top', 'middle', or 'bottom', (td tags).
bgcolor, (background colour), can be used in the table, tr or td tag.
NB: None of these are absolutely essential for tables, if you do not use them, default values will be used.

There are other rules with tables but, for now, the best thing you can do is to write a few tables yourself and see what happens.
Most errors may come from forgetting to close row or cell tags.

Images as Backgrounds to tables.
You can put 'background="images/something.jpg" ' into the table, tr, or td tags.
For Browser Compatibility, it is best to put it in both the table and td tags.

NB: It is not good good practice to mix fonts in a real web page.



Go to previous page Building Web Pages Go to next page
  top of page  
Home Basics Formatting Tables Images Linking Resources About Exit Tutorial