HTML Tutorial 10 – adding tables

1. You can add tables to your web pages. This is usually done for two quite different reasons:

  • to put data in columns and rows
  • to control layout on the page

2. This is a simple table containing data:

Size Description
1 Red, size – large, fully boxed
2 Blue, size – medium, unboxed

3. The table borders can be removed to use the same coding for controlling graphics, by setting border=”0″. Here is the same table with its borders removed – actually, hidden.

Size Description
1 Red, size – large, fully boxed
2 Blue, size – medium, unboxed

4. What follows is the basic code for a simple table. COPY this code into one of your template pages. You can then experiment by changing the size of the table and the alignment of data in it.

5. Your data goes inside the table data tags:

<TD>your data goes here</TD>


<TABLE>

<TR>

<TD></TD>

<TD></TD>

</TR>

<TR>

<TD></TD>

<TD></TD>

</TR>

</TABLE>


6. The width of each table data cell can be controlled by adding WIDTH=”X”, where X is the number of pixels:

<TD WIDTH=”150″></TD>

7. The position of data within each cell can be set at LEFT, RIGHT, or CENTER

<TD ALIGN=CENTER></TD>

8. You can use the <P> and <BR> tags within the table data, as you would in a normal page. I have added some colour to the top row, which is technically known as a table header <TH>

Size Description
1 Red, size – large, fully boxed and inflatable.
This product comes with a full set of attachments.
Free delivery.
2 Blue, size – medium, unboxed, and non-inflatable.
This model is only suitable for use indoors.
Not available in UK.

9. In order to control the vertical position of data within the cell, you need to add the VALIGN coding – which can be TOP, MIDDLE, or BOTTOM. [Note – this is ‘Middle’, not ‘Center’.]

10. The coding for the cells containing numbers in the example above is as follows:

<TD ALIGN=”center” VALIGN=”top”>2</TD>

11. The structure and the appearance of tables can become a much more complex issue. You can add colour to the cells, shading to the borders, and put tables within tables.

12. Many web designers arrange the text on their pages by placing it inside tables – and lots of fancy effects are possible. But these and many other design tricks are gradually being replaced by the use of style sheets.

© Roy Johnson 2002

previousnext

 


  • English Language 3.0 (.html)English Language 3.0

    English Language 3.0 tells you everything you need to know about English — language rules, grammar, spelling, and punctuation. Improve your written style. Get rid of mistakes. Quiz questions and exercises help you to check your understanding. Learn how language works. Suitable for all levels – from beginners to advanced. Latest version allows you to […]

    Order English Language 3.0 English Language 3.0 @ £4.95

Buy from Amazon US     Buy from Amazon UK

You can leave a response, or trackback from your own site.

If you found this article interesting you might want to Tell-A-Friend.

Tell A Friend
  1. (required)
  2. (valid email required)
  3. (required)
  4. (valid email required)
 

cforms contact form by delicious:days

Leave a Reply

 
 
 
 
 
 
css.php

Powered by eShop v.6