HTML Table Basics

HTML Table Basics

Reading: Learning Web Design, Chapter 10

Uses for Tables in HTML

• To present rows and columns of data (example)

• To position text precisely (example)

• To more predictably arrange images, text, and other objects (example)

• To force a certain layout to the web page allowing for for headings, navigational menus, advertisements, etc. (example)

• To mix searchable text within images to give search engines more data (example)

Now, let's figure out how to do this.

Parts of a Table

The table below is a generic table with its parts labeled.

HTML Tags of a Table

The rest of this document contains a summary of the most common table tags and attributes.

The table itself must be defined using the table tags <table> and </table>. All of the items and attributes contained within that table must appear between these two tags.

A title or caption may be defined for the table by placing the <CAPTION>...</CAPTION> tag immediately after the <table> tag.

The next layer down is to define the rows. A table's row is defined with the tags <tr> and </tr>. All of the items and attributes contained within that row of the table must appear between these two tags.

The lowest level of the table is the table data. Each item of the table is defined between the tags <td> and </td>. You may place just about any page component within the table data tags, even another table.

The HTML for a basic table is shown below.

<table border="1"> <caption>Table Caption</caption> <tr> <td> Row 1, col 1 item </td> <td> Row 1, col 2 item </td> <td> Row 1, col 3 item </td> </tr> <tr> <td> Row 2, col 1 item </td> <td> Row 2, col 2 item </td> <td> Row 2, col 3 item </td> </tr> </table>

The resulting table is shown below.

Table Caption

Row 1, col 1 item	Row 1, col 2 item	Row 1, col 3 item
Row 2, col 1 item	Row 2, col 2 item	Row 2, col 3 item

Note that I had to add the "border=1" attribute to define the cells of the table with lines.

Table Attributes

The following is a brief list of the attributes definable for a table. All of these attributes must be contained between the keyword "table" and the greater than bracket of the <table> tag.

Borders

The border around the outside of the table can be edited by width and color. To change the width of the table's border, use the attribute border="p" where p = number of pixels wide the border should be. Note that using this attribute also adds borders to the cells.

The table below has a border of 10 pixels. This is done with the table tag <table border="10">.

Item 1	Item 2
Item 3	Item 4

To have no border, set border="0".

Item 1	Item 2
Item 3	Item 4

Colors and Backgrounds

To change the border's color, use the attribute bordercolor="color" where color is the same format as all the other web colors we've been using. The table below has the bordercolor set to #ff00ff with the table tag <table bordercolor="#ff00ff">.

Item 1	Item 2
Item 3	Item 4

To change the background color, use the attribute bgcolor="color". The table below has its background color set to #00ff00 with a table tag of <table bgcolor="#00ff00">.

Item 1	Item 2
Item 3	Item 4

To set a tiled background for a table, use the background="URL", where filename is the name of the tiled graphic to be used. For example, in the same directory where these notes are found is a graphics file bg.gif. The table below uses it as a background by using the table tag <table background="bg.gif">

Item 1	Item 2
Item 3	Item 4

Cell Spacing

The spacing between the cells can be increased with the cellspacing="p" attribute where p equals the number of pixels to put between cells. The example below obtains a cell spacing of 10 pixels with the table tag <table cellspacing="10">

Item 1	Item 2
Item 3	Item 4

Cell Padding

The spacing around an item within each cell can be increased with the cellpadding="p" attribute where p equals the number of pixels to put between the item and the end of the cell. The example below obtains a cell padding of 10 pixels with the table tag <table cellpadding="10">.

Item 1	Item 2
Item 3	Item 4

Table Alignment

Item 1	Item 2
Item 3	Item 4

You can also specify how the table is placed horizontally within the browser's window using the align attribute. Its format is align="alignment" where alignment equals left, center, or right. If you set the alignment to left or right, text flows around the table as it does with the table to the right of this paragraph. Center, however, does not allow text to flow around it resulting in a simple centered table as shown below.

Item 1	Item 2
Item 3	Item 4

Table Width

Just like horizontal rules, a table's width can be defined in terms of a percentage of the overall browser window width or as a specific number of pixels. The first table uses WIDTH="50%" to define its width as 50% of the width of the window. (The resulting table will depend on the width of your browser window.)

Item 1	Item 2
Item 3	Item 4

The next table is defined as 50 pixels wide using the attribute WIDTH="50".

Item 1	Item 2
Item 3	Item 4

Table Data Attributes

The following is a brief list of the attributes definable for a single cell of the table, i.e., a single piece of table data. All of these attributes must be contained between the keyword "td" and the greater than bracket of the <td> tag.

The table data uses the next three attributes in the same way that the table tag uses them.

• To change the background color of a single cell, use the attribute bgcolor="color" inside the <td> tag.
• To add a tiled background image to a single cell, use the attribute background="URL" inside the <td> tag.
• To set the width of a single cell, use the attribute width="w" where w is either a percentage of the table's width (e.g., "25%") or a fixed number of pixels (e.g., "25").

The cell, however, adds a few additional attributes. First, it allows the user to define the verticle and horizontal alignment of an item within a cell. The diagram below shows the different attributes for horizontal and vertical alignment within a cell.

Lastly, you may force a cell of a table to span more than one column or row using the attribute COLSPAN="n" or ROWSPAN="n" where n=the number of columns or rows to span.

This table data spans the first two columns. (COLSPAN="2")

This table data spans the last two columns. (COLSPAN="2")

This table data spans the first two rows. (ROWSPAN="2")

Embedding Tables

As stated earlier, just about any component of a web page may be inserted into a table as table data. Below is an example of inserting a table within a table.

Each of these are single table items.	Each of these are single table items.
Each of these are single table items.	The items below (1, 2, 3, etc.) are contained within a "sub table." 1 2 3 4 5 6 7 8 9

You embed a table just by placing another table within the <td> and </td> tags.

Developed by David Tarnoff for sections of CSCI 1710 and 5011 at ETSU