Module 3: Tables

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 colspan attribute. 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>ABC</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 colspan attribute 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 SRC, WIDTH, HEIGHT, 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.

Next: Adding a Table with an Image to Your Digital Pathfinder »

top of page