Lesson 8 - Tables

Organizing with Tables

Tables were first designed to display tabular information. Later, they evolved into the main tool for designing a webpage, spreading the content out over the entire screen. Have you ever noticed how HTML code wants to jam everything up against the left margin? Tables are a way of getting margins on the page, that so-important 'white space' in designing.

To make a table, you will use these basic tags:

And of course, you can have all kinds of attributes for this table. But, before you get into the details, understand how the basic structure works.

Here is code for a basic table (content of <table> tag is part of the body of the code):

And, here's what the table would look like:

You're probably thinking that this isn't very inspiring. Add some attributes and then you can see some advantages.

Back to Top

Table Attributes

The first line opens the table, centers it, takes up 60% of the screen width (20% on each side is white space), and gives it a border of 1 pixel. The 1 pixel border will be a dark red, and the table background color will be bright yellow.

The second line opens the first row and sets the horizontal and vertical alignments (so that text will be in the middle of the cell).

The next lines open and close 5 different cells in this row. Each of them will take up 20% of the row and each will have an anchor. The links will read as: Lists, Targets, Email, Anchors, and Assignment.

The last two rows close the row and the table.

 Here's the table:

Lists

Targets

Email

Anchors

Assignment

Of course, none of those links will go anywhere, since there are no <a name> tags in this lesson.

You can color the entire row, the entire table, or one cell at a time, depending on where you put the bgcolor attribute. Notice that you can put the attributes in any order within the tag, and they are always in this format:

• The attribute name with the equal sign (bgcolor=   align=   width= ).
• The value, enclosed in quotation marks ("center"  "#CC99FF"   "60%").
• There are no spaces between the attribute name and the final closing quotation mark.

Back to Top

Table & Navigation Links

You can create navigation links in a column using tables, like this:

• The first line opens a table that will be centered, set to take up 80% of the screen (leaving 10% blank on each side), and will have a dark purple background color. The cellpadding attribute moves the contents 10 pixels from the border of the cell, and the cellspacing keeps the individual cells 5 spaces apart.
• Then, the row is opened.
• Within the first row, the first cell is opened, set to take up 20% of the width of the table. This cell will have a lavender background and the contents will be placed at the top of the cell, on the right side.
• Next comes a list of 2 active links, one to your customer page, one to your first page, and the last link to your philosophy is inactive (hence, the absence of <a> tag).
• All the links are in this cell, placed one on top of the other.
• And then, the cell is closed.
• However, the row is not closed. Next, you'll open up the 2nd cell, set it to 80% of the width of the table, give it a light pink background, and align the contents to the top left corner.
• And then, there are paragraphs that keep repeating.
• At the end of the paragraphs, you will close the 2nd cell, then the row, and finally the table.

Here's a picture of what your table will look like. Click on it and you can go to the actual HTML document.

Back to Top

Cellpadding & Cellspacing

Cellpadding creates more white space between the cell edges and the contents. Cellspacing increases the distance between cells. Values for both of these are given in pixels.

Both of these attributes are added to the <table> tag.

You can look at the W3Schools website about cellpadding and cellspacing for more examples. You can even change the values for the two attributes, click a button, and watch the page change.

You can also merge cells for some rows and put images, lists or anything else in the cells. Remember the list of points that were stressed on for images (from Lesson 6)? Reformat that list to use a table:

Don't type those bold numbers 1 through 17. They have only been put there so that it is easier to explain what you'll be doing.

• The first line opens the table, centers it, makes it 70% of the screen, and gives you some space around the edges.
• Line 2 opens a row (<tr>) and the line after that tells the browser that the two columns (<td>) should be spanned, or merged into one. You will put a heading in that line, centered.
• The next line will close the 1st row. Line 5 opens a second row, split into two cells. The first one will be 20% of the table, and have an image that is aligned with the right margin. The second cell will be 80% of the table, and have words.
• Line 9 opens another row, again divided into two cells. You don't have to put the width percentages in this row, or the next, since the browser will automatically align these cells with the one set above.
• Line 13 opens up the last row, puts the image in the first cell, and the words in the second.

Don't forget to close your table with </table> tag. If you don't close it, the browser will get very confused and never even make the table.

Here's what the table looks like:

The borders were deliberately left out for this table in order to stop lines dividing up the page. But, if you add border="1" attribute to the <table> tag:

<table align="center" cellpadding="5" cellspacing="5" width="70%" border="1">

you'll get a table that looks like this:

Now, you can see that the first row has merged the two cells together.

This is the end of Lesson 8. Please go to the next lesson.

Back to Top