Tables 1 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Intermediate Section
TABLES 1 - BASICS

STARTING TABLES

Most of the Intermediate section will be covering tables in their many guises, as the ways you can use tables are almost endless. So learning about tables will be one of the most valuable lessons you can learn.

For example, this entire page is contained inside a table, which is why it is not spread out to the edge of the screen. In addition, the header on all pages is created using a table. More on this in Tables 3.

First we will look at the TAGS that you will use to make a table:

Tables start with the <TABLE> tag. Then you create CELLS and put in the text, images, links or whatever. Then end with </TABLE>.

Pretty straight forward so far. But to place contents inside the table, we need to create the cells to put the contents in. So we will need a few more tags.

First is the <TR> (table row) tag. Each horizontal cell of a table starts with this and ends with the </TR> tag.

Next is the <TD> (table data) tag. Each section of data ends with the </TD> tag. To make it look like at least the beginnings of a table we will add a BORDER tag. Otherwise it would just look like a line of typing. We'll start with a one-cell table:

This is how it looks:

A one cell table

Notice that the BORDER has a value, in this case "1", for a narrow BORDER. Change the number to suit the type of table you are creating. We'll have a look at some other border sizes and interesting effects a bit further along. Of course, if you set no parameters for the border or set it to BORDER="0", your table will have no border.

A one cell table can be used to make a handy side bar like this. Use small print or a different colour

A table with only one cell doesn't look very useful, but if you specify the WIDTH of the table, 15% in this case and ALIGN (see below) your little one cell table to the left or right, you can use it as a short or long side bar perhaps to expand on a point, to add a graphic or to place a navigation map.

Aligned in the centre you can draw attention to important points or messages, especially if you give it a different colour. In order to put some space between the cell and the text next to it, we use a new tag, <HSPACE=x>, so the first line for this reads:

<TABLE WIDTH=15% ALIGN="left" HSPACE=6 BORDER=1>

You can also add <VSPACE=x> if you need vertical space. This is very handy when placing images within text too.

You can even have a whole page of text or a header inside a single cell (as these pages are). You can specify the WIDTH using pixels or percentages and the size or thickness of the border.

In this case, it is just a small sidebar with some text. Notice how the text sits beside the "box".

In most cases you will need more than one cell, so we will add another cell on the same line by using more <TD> tags. Note that we use the <TR> only at the beginning as we want everything in one line.

This is how it will look in your browser:

This is the first cell

This is the second cell

Still not much of a table so now we'll add another ROW. This time we use the table row tags, <TR> and </TR> between each horizontal section. The code this time is written so you can see how the data is placed inside each cell:

Now there are two rows, each with two cells:

Cell 1 Row 1	Cell 2 Row 1
Cell 1 Row 2	Cell 2 Row 2

You will have noticed that this time the table is in the centre of the page. This is simply our old friend the CENTER tag. Just place it before the <TABLE> tag. You could also use the DIV ALIGN=center tag. In either case, don't forget the closing tag.

ALIGNMENT TAGS

As seen above, you can place your entire table in the centre, using the <CENTER> tag. You can also place it to the centre, the left or the right of the page using the TABLE ALIGN command, like this:

You can play around with the alignment of the CELL CONTENTS too.

To align the contents of your table cells to the centre, the left or the right, we use the TD ALIGN=" " command. Here are the three alignment codes for data cells:

Now we'll take the little two cell table we created earlier, add another cell and apply the alignment commands to the contents of each cell. Here is the code:

Here's how it will look in the browser:

Text is left

Text is centred

Text is right

CELL SPACING & PADDING

Browsers are very economical - they use as little space as possible, so if you want your cell contents to look less cramped there are a couple of things you can do to get more spacing between cells, and to add space or padding inside each cell. The first is :

CELLSPACING=X where X is a number. Use this command to add more space OUTSIDE each cell. The default is 0 so use anything from "2" up to about "12". You will have to experiment to find the spacing that suits your cell contents.

The second is:

CELLPADDING=X This command adds more space INSIDE the individual cell. See comments above.

Using our two-cell, two row table, let's add these two commands, and set CELLSPACING at 8 and the CELLPADDING at 10

<TABLE CELLSPACING=8 CELLPADDING=10 BORDER=1 > Notice how "spaced out" the table looks now. Because of the padding the border appears wider and there is more room inside each cell :

Cell 1 Row 1	Cell 2 Row 1
Cell 1 Row 2	Cell 2 Row 2

ALIGNING CELLS VERTICALLY

Sometimes you might want to put two or three lines of text in one cell and only one in the others. Or an image in one and text in the others. To make it look OK, you can use the vertical alignment command - VALIGN=" " .

NOTE - the vertical alignment command is used ONLY if the cells have a different number of lines inside each cell. It makes NO difference if you have the same number of text lines in each cell. Also note that VALIGN uses "middle" and ALIGN uses "center". Look at the example below and you'll get the idea.

VALIGN="TOP" aligns cell contents to the top of the cell.

VALIGN="MIDDLE" aligns cell contents in middle of the cell.

VALIGN="BOTTOM" aligns cell contents to the bottom of the cell.

The code for vertical alignment will look like this:

As you can see in the following example, the text in the first cell uses two lines, the other two cells each have one.

Three lines of text
aligned to the top
of the cell

One line in the middle.

One line on the bottom.

In the next lesson we'll look at some more ways to modify tables and use them in different ways.

Next: Tables 2 - Headings & Sizing

Intermediate Index