Module 3: Tables

Creating a Simple Table

HTML tables allow you to display tabular data, that is data in rows and columns. In this tutorial you’ll learn how to create a simple table in no time.

To create a simple table, you will need to start with the <TABLE> tag and then add rows, or <TR> tags, and then individual cells, or <TD> tags. First, begin your HTML document with the required <HTML><HEAD>, AND <BODY> tags:

<HTML>
<HEAD>
<TITLE>My First Table</TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">

</BODY>
</HTML>

Step One.
After the <BODY> tag, type in:

<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE>

</TABLE>
</BODY>

Step Two.
Type <TR> to create a Row:

<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE>
<TR>

</TR>
</TABLE>
</BODY>

Step Three.
Type <TD> to create a Cell:

<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE>
<TR>
<TD>

</TD>
</TR>
</TABLE>
</BODY>

Step Four.
Type the contents of the first cell. In this example, type a capital letter A between the opening <TD> and closing </TD> tags:

<TABLE>
<TR>
<TD>A
</TD>
</TR>
</TABLE>

Step Five.
We are going to create two more cells, B and C by repeating Steps Three andFour:

<TABLE>
<TR>
<TD>A
</TD>
<TD>B
</TD>
<TD>C</TD>
</TR>
</TABLE>

We just created a row <TR> containing three cells <TD>: cell A,B,C.
Save your work and preview your HTML file in your web browser. Your table should look like this:

A B C

Step Six.
Now lets add two more rows to the table and add three cells to each row just like we did in Steps TwoThree and Four:

<TABLE>

<TR>
<TD>A
</TD>
<TD>B
</TD>
<TD>C</TD>
</TR>

<TR>
<TD>1A
</TD>
<TD>1B
</TD>
<TD>1C</TD>
</TR>

<TR>
<TD>2A
</TD>
<TD>2B
</TD>
<TD>2C</TD>
</TR>

</TABLE>

Follow the HTML code above and your table should look like this:

A B C
1A 1B 1C
2A 2B 2C

Table Headers

We can also create table headers. Modifying the above code, we can make A, B, and C into table headers, denoted by a <TH> in place of a <TD> . <TH> should make your table cells look slightly different from the rest.

<TABLE>

<TR>
<TH>A
</TH>
<TH>B
</TH>
<TH>C</TH>
</TR>

<TR>
<TD>1A
</TD>
<TD>1B
</TD>
<TD>1C</TD>
</TR>

<TR>
<TD>2A
</TD>
<TD>2B
</TD>
<TD>2C</TD>
</TR>

</TABLE>

Follow the HTML code above and your table should look like this:

A B C
1A 1B 1C
2A 2B 2C

Centering Cell Contents

Step Seven.
Now, let’s add some formatting like centering the cell’s contents. In each <TD>tag, add the attribute align=center:

<TABLE>

<TR>
<TD align=center>A
</TD>
<TD align=center>B
</TD>
<TD align=center>C</TD>
</TR>

<TR>
<TD align=center>1A
</TD>
<TD align=center>1B
</TD>
<TD>1C</TD>
</TR>

<TR>
<TD align=center>2A
</TD>
<TD align=center>2B
</TD>
<TD align=center>2C</TD>
</TR>

</TABLE>

Your table should look like this:

A
B
C
1A
1B
1C
2A
2B
2C

note: you can also align a cell’s contents by using either left, center, or right. The default alignment is left as in the example for Step Six.

Spacing between Cells and Cell Content

Step Eight.
Now let’s also add some spacing between the cell’s contents and the table’s border. We can do this by using one of two <TABLE> attributes cellpadding andcellspacing. Cellpadding adds spacing between the cell’s contents and the table’s border. Cellspacing adds spacing between cells. A value of 0 for either cellpadding or cellspacing will not add any space at all. If you’re confused at this point, simply follow the code below and try to substitute higher or lower values for both cellspacing and cellpadding.

<TABLE cellpadding=10 cellspacing=0>

<TR>
<TD align=center>A
</TD>
<TD align=center>B
</TD>
<TD align=center>C</TD>
</TR>

<TR>
<TD align=center>1A
</TD>
<TD align=center>1B
</TD>
<TD>1C</TD>
</TR>

<TR>
<TD align=center>2A
</TD>
<TD align=center>2B
</TD>
<TD align=center>2C</TD>
</TR>

</TABLE>

A table with a cellpadding of 10:

A
B
C
1A
1B
1C
2A
2B
2C

note: If you don’t put either cellpadding or cellspacing attributes within the <TABLE>tag, the default setting is zero (0), or no spacing between cells or its contents as in the example for Step Six.

Table Borders

Step Nine.
You can also choose to have no borders around a table, or have the option of increasing a border’s thickness. In either case, you will need to use the borderattribute in the <TABLE> tag.

Table with cellpadding=10 cellspacing=0 border=0

A
B
C
1A
1B
1C
2A
2B
2C

View the source code

Table with cellpadding=10 cellspacing=0 border=5

A
B
C
1A
1B
1C
2A
2B
2C

View the source code

You can even add color to individual cells and format cell contents:

A
B
C
1A
1B
1C
2A
2B
2C

View the source code

Specifying the Width of a Table

Step Ten.
You can tell a table how wide it should be by expressing its width in pixels. To ensure that your web pages print properly through a printer (without any text getting chopped off because of a table being too wide) and to prevent users from scrolling horizontally in the browser, it’s a good rule of thumb to keep your table widths to no larger than 600 pixels wide. For example:

This table’s width is set to 600 and will display and print fine. No problem:

A
B
C
1A
1B
1C
2A
2B
2C

View the source code

note: you can specify pixels (absolute) or percentages (relative) as possible table widths. The advantage of using percentages is your table will expand to fit your browser window, depending on the percentage you set. Using pixels, or absolute.

Adding an Image to a Table

In this tutorial, you will add two new attributes to your table, colspan and rowspan. Then you’ll add an image to your table.

Step One.
We are going to span the first cell across three columns by using the colspanattribute. Colspan is used to span a cell across more than one column. Since we have three columns in our table, our attribute and value will be colspan=3, and this tells the browser to span the first cell in the first row across 3 columns. Follow the code below:

<TABLE cellpadding=10 cellspacing=0>

<TR>
<TD align=center colspan=3>A
BC</TD>
</TR>

<TR>
<TD align=center>1A
</TD>
<TD align=center>1B
</TD>
<TD>1C</TD>
</TR>

<TR>
<TD align=center>2A
</TD>
<TD align=center>2B
</TD>
<TD align=center>2C</TD>
</TR>

</TABLE>

Your table should end up looking like this:

ABC
1A
1B
1C
2A
2B
2C

Step Two.
Now were going to go the opposite way and span a cell across (or down) more than one row using the rowspan attribute. Rowspan is used for spanning a cell across more than one row. Since we have three rows, our attribute and value will be rowspan=3, and this instructs the first cell in the first row to run down 3 rows. Follow the code below:

<TABLE cellpadding=10 cellspacing=0>

<TR>
<TD align=center rowspan=3>A1A2A</TD>
</TR>

<TR>
<TD align=center>B
</TD>
<TD align=center>C</TD>
</TR>

<TR>
<TD align=center>1B
</TD>
<TD align=center>1C</TD>
</TR>

<TR>
<TD align=center>2B
</TD>
<TD align=center>2C</TD>
</TR>

</TABLE>

A1A2A
B
C
1B
1C
2B
2C

Step Three.
Now we’re going to add an image to your table and use the colspan attribute for this example.

This is the orginal table that we are going to use to add our image:

A
B
C
1A
1B
1C
2A
2B
2C

View the source code

Now span the first cell in the first row across three columns using the colspanattribute and delete the letters: ABC:

1A
1B
1C
2A
2B
2C

The source code is the same as in Step One. Don’t forget to delete the letters ABC.

Step Four.
Add an <IMG> tag along with the SRCWIDTHHEIGHT, ALT, and BORDER attributes.

1A
1B
1C
2A
2B
2C

View the source code

What’s the intrinsic value of the rowspan and colspan attributes?

There are times when you want to display tabular data, or data in rows and columns. Sometimes you create categories, but the data for each of these categories don’t always fit or line up the way you would like it to. A library annual report would be an excellent example of where rowspan and colspan would be very invaluable.

Or you may simply want to add some artwork, charts, or graphs to your web page. Tables are a good way to do this and have things line up and formatted the way you want it.