More on Making Web Pages - The Table Tag

For review purposes, the following is a basic web page.

< html >
< head >
< title >
< /title >
< /head >
hello world
< body >
< /body >
< /html >



When saved as a .html file, this will open in your browser. Today we learn about the < table > tag. This is one of the more complex tags so take your time on this one. As with most tags there is an opening tag < table > and a closing tag < /table > . The table is made up of cells and the cells are created in rows and columns (sensible, huh). The most basic table you may make is the following.

< table >
< tr >
< td > hello < /td >
< /tr >
< /table >

If you put the code above between the body tags on the page, all you will see is 'hello'. The code above creates a table with one row < tr > and one cell < td >. New cells would be added between the row < tr > tags. Notice that there are three tag names and each has an opening tag and a closing tag. New row would be added between the table tags. Cells always go between row tags and row tags always go between table tags (but never between other row tags).

You've probably seen tables on websites where the edges are visible. Those are called borders. To put a border on our table, modify the opening table tag like this (notice where the quotes are placed because they are necessary here and in the following examples).

< table border="4" >
< tr >
< td > hello > /td >
< /tr >
< /table >

Now there will be a visible line around the table 4 pixels wide. Also, cells can have borders. Just a brief warning here. Each browser has it's own way of displaying things. So if you write some code and it doesn't seem to work, it may be the browser your using. If your in Firefox, then open Explorer or Avant or Opera. I've put this code in three browsers and Avant and Explorer show cell and table borders while Firefox only shows the table border.

Another important thing you may do in a table is to have one row or one column span others. In other words, suppose you want two columns and two rows, but you want the bottom row to be just one cell (two cells in row one and one cell in row two). It would look like this -

< table border="4" >
< tr >
< td > hello > /td >
< td > hello2 > /td >
< /tr >
< tr >
< td colspan="2" > helloooooo > /td >
< /tr >
< /table >

Suppose that you want the table to be a certain width. Modify the table tag like this-

< table width="300" border="4" >
< tr >
< td > hello > /td >
< td > hello2 > /td >
< /tr >
< tr >
< td colspan="2" > helloooooo > /td >
< /tr >
< /table >

You may also use a percentge for width < width="30%" >. There is much more to the table tag (background color, text formatting etc. > , but with this knowledge you may create any size and shape table within the limit of the computer. As with most things practice will make it easier.