Your first web page, a simple HTML tutorial. Basics, page construction. Saving and viewing.


Basics | Formatting | Tables | Images | Linking | Resources | About | Examples | Exit Tutorial
Go to previous page

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
What next?

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">

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">
<td bgcolor="#CCCC00" align="right" width="45%">
<font size="3" face="Arial, Helvetica, sans-serif" color="#000000">Hello</font>
<td bgcolor="#990000" width="55%">
<font face="Arial, Helvetica, sans-serif" size="3" color="#FFFFFF">World</font>
<td colspan="2" align="center">
<font face="Times New Roman, Times, serif" color="#FF0000" size="5"><b>Have a nice day</b></font>

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 top of page Go to next page
Building Web Pages
Basics | Formatting | Tables | Images | Linking | Resources | About | Examples | Exit Tutorial
build a web site, html tutorial, free html tutorial, html table tutorial, web page tutorial, html code tutorial, basic html tutorial, online html tutorial, tutorial on creating a web page, free online html tutorial, beginner free html tutorial, HTML tutorial, simple html tutorial, first web page, free web templates, web templates