Home  |  Helpdesk  |  Product Help  |  Demon Web Hosting  |  Learn HTML  |  Webpage Creation - Step 4

Webpage Creation - Step 4

Tables

Super... Fantastic... We now have all the basics to start building a decent webpage, except for tables, so let's do that now.

Let's start off with a very simple table
You can carry on with the original myfirstpage.html if you wish, you could use this as a reference and practice page until you get used to writing html.

Ok, type the following into your text editor

<table> [this line denotes the start of the table]
  <tr> [this line denotes the start of a table row]
    <td> Your data goes here </td> [this line is the start and end of the table data cell]
  </tr> [end of table row]
</table> [end of table]

The above will give you something like:

Your data goes here

This is fine, but you can't see the border of the table, so to make the border visible, edit your html code and put border="1" in the first table tag, i.e. <table border="1">
Then you can see the border, this is a table attribute [one among many].

Your data goes here

That is the simplest table that you can have, now we are going to show you two other examples so you'll get the general idea of how you can build up tables.

<table> <tr> <td> Your data goes here 1 </td> <td> Your data goes here 2 </td> <td> Your data goes here 3 </td> </tr> </table>

Which gives -

Your data goes here 1 Your data goes here 2 Your data goes here 3

Or

<table> <tr> <td> Your data goes here 1 </td> </tr> <tr> <td> Your data goes here 2 </td> </tr> <tr> <td> Your data goes here 3 </td> </tr> </table>

Which gives -

Your data goes here 1 Your data goes here 2 Your data goes here 3

You can place any sort of data in the table data cells <td> </td> , be it text, images or hyperlinks, it makes no difference.
Tables are a good method to layout your page the way you want it to be seen. So it makes perfect sense to practice and play with tables until you are really used to them, it'll save time in the future. If you wish, you can right-click on this page and select View Source to see how we have used tables to show this page's content. Also note how the different lines have been indented, this is not required but makes debugging easier.
If you do look at this code you will also see we have used this   a lot, this is a useful way to create white space, it actually stands for Non Breaking Space.

Note: A little side step.
Three of these ( ) make up the space of one capital letter ( well almost ).
AA - this line is just two capital A's
   A - this line is    A ( pretty close eh! )

In fact the   should be used to stop a collection of words from breaking to a new line, i.e keeping a whole sentence on one line, even if it is wider than the browser window, which would of course cause the slider bar to appear. Having said all that, it is widely used for other purposes, i.e. indenting text etc, which strictly speaking is an incorrect usage of this entity.
Note: The   is called an entity.
Another Note: Try out the two attributes we talked about earlier, bgcolor="x" and background="x",
try them in the <table>, <tr> and <td> tags, i.e. <table bgcolor="yellow">

Refresh your Web browser to see the results. You shouldn't need the little pop-ups any more.

Seven easy steps - start from the begining or skip to the section you want:
Index	Step 1	Step 2	Step 3	Step 4	Step 5	Step 6	Step 7

---