Tables - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML
Tables
 Adam's HTML Planet - Home Page
list of tutorials next tutorial
Tables are one of the web designers most useful tools. Not only are they ideal for presenting information in a tabular form - ie figures and suchlike, but can - and are - used to lay content out on a page with precision. Whole pages can be made up of tables [which can be 'nested' one inside another] and when the border attributes are set to "0" no-one would ever know [unless they knew how to look - see my 'tricks of the trade' pages]

  1. Open the file images.htm in your text editor
  2. Add the content indicated below - underneath the bit where you inserted the graphics
  3. Save the file [tables.htm]
  4. Preview the results in your browser
<HR>
<TABLE BORDER="1">
<TR>
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD>
<TD>Row 2, Column 2</TD>
</TR>
</TABLE>
<HR>
See an example
Let's look at this in a bit more detail.

<TABLE BORDER="1">
</TABLE>
These tags open and close the table. The <TABLE> tag can contain many attributes including border colour and size, alignment options and background attributes. For more detail see my taglist page. Our example border is set to "1" to make the table visible - setting it to "0" would make the borders invisible

<TR>
</TR>
These tags open and close each table row. Again, these can contain attributes regarding alignment and background etc.

<TD>
</TD>
These open and close each cell and create the columns of the table. The TD I take to stand for table data - but no-one seems to be quite sure of their origin. As with the other table tags the TD tag can have several attributes.

Go up to the top of the pageUp Arrow to choose where you go next