weballey logo
 
left Tables - basics backnext right
homesearchsite mape-mail
< basics >
expanding
sizing
colors
borders
alignment
nesting
navbar
quick recap
tags
epilogue
      Tables are a great tool for laying out web pages. You can put just about anything exactly on your page where you want to have it. You can add color to parts of your page. You can create columns of text or navigation bars, like on this page. You can split up images, and recombine them to create a button bar, or put plain text in the middle of it. If you are unfamiliar with HTML you may want to have a look at the HTML tutorial first.
    Tables are created with several tags. Take good care of the position and presence of each tag. Since one missing tag may render your table invisible or corrupted. If you know spreadsheets, they consist of cells in rows and colums, and each cell can contain data. You can alter the width and height of rows and colums, and alter the appearance of a cell or a group of cells. HTML tables are quite similar, you can change just about anything you want to.

<TABLE>
<TR>
<TD>
cell contents
</TD>
</TR>
</TABLE>

    Tables are enclosed in TABLE tags, an opening and a closing tag. A Table Row is constructed with an opening and a closing TR tag. A table cell is made by the two TD tags (Table Data). Cell contents are always between TD tags.
    These three sets of tags are a complete table, the smallest possible table in HTML. One table, one row, one column, one cell. If you copy this code to your editor and view it in your browser, you won't see anything exept the text inside. Because HTML tables normally are invisible. You can make them appear by adding the BORDER attribute to the TABLE tag, and set it to one.

<TABLE BORDER="1">

cell contents

    This little table is what you will see in your browser. It might be a good idea to try out everything you see here. You cannot learn to swim without getting your feet wet. Copy the code to a text editor, and view it in your browser to see the results.

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right