Examples of HTML tables

Example 1: mixing text with images

This example consists in making an advertisement for a restaurant, which asked that a text be placed besides an image of a tasty dish. I will use a table to do it.

Here is the advertisement text:

"Our restaurant is proud to serve freshly made food from authentic Italian recipes. All of our dishes are made to order and we serve only the finest imported pastas."

I want to put it on the right side and the picture on the left side.

Our restaurant is proud to serve freshly made food from authentic Italian recipes. All of our dishes are made to order and we serve only the finest imported pastas.

I will build this table step by step and you will see how easy it is.

Make a simple table.

<TABLE BORDER="3" WIDTH="100%">
<TR>
<TD>
Our restaurant is proud to serve freshly made food from 
authentic Italian recipes. All of our dishes are made to 
order and we serve only the finest imported pastas.
</TD>
</TR>
</TABLE>

Our restaurant is proud to serve freshly made food from authentic Italian recipes. All of our dishes are made to order and we serve only the finest imported pastas.

Add another cell, a smaller one, to the left of the first cell, and put an IMG tag in this cell. The image file is supposed to be in the same folder than the page.

<TABLE BORDER="3" WIDTH="100%">
<TR>
<TD WIDTH="40%"><IMG SRC="dish.jpg"
WIDTH="220" HEIGHT="105"></TD>
<TD WIDTH="60%">
Our restaurant is proud to serve freshly made food from 
authentic Italian recipes. All of our dishes are made to 
order and we serve only the finest imported pastas.
</TD>
</TR>
</TABLE>

Our restaurant is proud to serve freshly made food from authentic Italian recipes. All of our dishes are made to order and we serve only the finest imported pastas.

To finish, all that we have to do is to right align the image and remove the border.

<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD WIDTH="40%" ALIGN="RIGHT"><IMG
SRC="dish.jpg" WIDTH="220" HEIGHT="105"></TD>
<TD WIDTH="60%">
Our restaurant is proud to serve freshly made food from 
authentic Italian recipes. All of our dishes are made to 
order and we serve only the finest imported pastas.
</TD>
</TR>
</TABLE>

Our restaurant is proud to serve freshly made food from authentic Italian recipes. All of our dishes are made to order and we serve only the finest imported pastas.

Example 2: slicing an image

Here I will show you how to solve a common problem using tables. Let us suppose that you have a big image file to display, and you are concerned about the time it takes to download. One way to solve this problem is to slice the image in smaller parts.

I will use as an example the picture of a fish that lives very deep in the sea. As it is so deep, there is no much light where it lives! You will have to do your best to see this fish, but it is worthy.

The slicing of images is explained elsewhere in this site. Here I will asume that you have the image already sliced. I choose to slice it in nine parts, so we will need a table with nine cells arranged in three rows of three cells each one.

The base image has a height of 300 pixels and a width of 375 pixels. Each part is 125 pixels wide and 100 pixels tall. The slice names have been coded according to the position the slice occupies in the table.

The name of the whole picture is "fish.png". Each slice has been named as "fish_rx_cy.png" where "x" is the number of the row and "y" is the number of the column. Thus, "fish_r2_c2.png" is the slice that is just in the center of the picture. Here is the layout.

This is the table.

<table border="0" cellpadding="0" cellspacing="0" width="375">
<tr valign="top"><!-- row 1 -->
<td><img src="fish_r1_c1.png" width="125" height="100" border="0"></td>
<td><img src="fish_r1_c2.png" width="125" height="100" border="0"></td>
<td><img src="fish_r1_c3.png" width="125" height="100" border="0"></td>
</tr>
<tr valign="top"><!-- row 2 -->
<td><img src="fish_r2_c1.png" width="125" height="100" border="0"></td>
<td><img src="fish_r2_c2.png" width="125" height="100" border="0"></td>
<td><img src="fish_r2_c3.png" width="125" height="100" border="0"></td>
</tr>
<tr valign="top"><!-- row 3 -->
<td><img src="fish_r3_c1.png" width="125" height="100" border="0"></td>
<td><img src="fish_r3_c2.png" width="125" height="100" border="0"></td>
<td><img src="fish_r3_c3.png" width="125" height="100" border="0"></td>
</tr>
</table>

Here I have left the default padding so that you can see the slices.

And this is the final result.

Example 3: using the elements' attributes

To see the HTML code of this page, choose the "View source" option from the menu of your browser.

The following is a basic table having three columns and two rows.

A	B	C
D	E	F

The following is a table where item 2 spans two rows.

Item 1	Item 2	Item 3
Item 4		Item 5

The following is a table where item 1 spans two rows.

Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7

The following is a table where item 2 spans two columns.

Item 1	Item 2
Item 3	Item 4	Item 5

The following is a table with headers.

Head1	Head2	Head3
A	B	C
D	E	F

The following is a table with headers that span two columns.

Head1		Head2
A	B	C	D
E	F	G	H

The following is a table with multiple headers, one set of which is spanning two columns.

Head1		Head2
Head 3	Head 4	Head 5	Head 6
A	B	C	D
E	F	G	H

The following is a table with the headers at the side.

Head1	Item 1	Item 2	Item 3
Head2	Item 4	Item 5	Item 6
Head3	Item 7	Item 8	Item 9

The following is a table with side headers, one of which spans multiple rows.

Head1	Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7	Item 8
Head2	Item 9	Item 10	Item 3	Item 11

The following is a table using all of the above attributes.

	Average
	Height	Weight
Gender	Males	1.9	0.003
	Females	1.7	0.002

The following will render a table that uses both ROWSPAN=2 and COLSPAN=2 on side and bottom cells.

A		1	2
		3	4
C		D

The following is a a table with no borders.

Item 1	Item 2	Item 3
Item 4		Item 5

The following is a a table with a border of 10.

Item 1	Item 2
Item 3	Item 4

The following is a table using CELLPADDING, but no CELLSPACING.

A	B	C
D	E	F

The following is a table using CELLSPACING but no CELLPADDING.

A	B	C
D	E	F

The following is a table using CELLPADDING and CELLSPACING.

A	B	C
D	E	F

The following is a table using CELLSPACING, CELLPADDING, and specifying a BORDER.

A	B	C
D	E	F

The following is a a table with multiple lines of text in cells.

January	February	March
This is cell 1	Cell 2	Another cell, cell 3
Cell 4	and now this is cell 5	Cell 6

The following is a a table showing different possible alignments of text. NOTE: this formatting can be applied to individual cells or whole rows.

January	February	March
all aligned center	Cell 2	Another cell, cell 3
aligned right	aligned to center	default, aligned left

The following is a a table showing different possible vertical text alignments possible within table cells. NOTE: this formatting can be applied to individual cells or whole rows.

January	February	March
all aligned to top	and now this is cell 2	Cell 3
aligned to the top	aligned to the bottom	default alignment, center

The following is a a table with a caption at the top.

A top CAPTION

January	February	March
This is cell 1	Cell 2	Another cell, cell 3

The following is a a table with a caption at the bottom

A bottom CAPTION

January	February	March
This is cell 1	Cell 2	Another cell, cell 3

The following is a a table within a table. Table ABCD is inside table 123456.

1	2	3 A B C D
4	5	6

The following is a a table of width 50% (of page width).

width=50%	width=50%
3	4

Note how when the cells do not contain identical-width data, it affects the cell width relative to the table width.

item width affects cell size	2
3	4

The following is a table in the center of the page.

a	b	c
d	e	f

The following are two nested tables, using the width attribute to specify the size for the secondary table.

item 1	item 2
item a item b	item 4

Previous | Contents | Next

	| HOME | FEEDBACK | BOOKMARK | Build your Website © 1999-2008 Hector Castro -- All rights reserved