Sizing The Overall <table>

In the tables we've made so far, the table sized itself according to the size of the content in the cells. The larger the content, the larger the cell that holds it and the other cells resize themselves proportionately.

We can control how wide our tables and individual cells are by using the WIDTH and HEIGHT attributes. Lets start by using WIDTH to stretch a simple 2x2 table across the entire page:

<table width="100%">

<tr>

<td>Cell #1</td>
<td>Cell #2</td>

</tr>

<tr>

<td>Cell #3</td>
<td>Cell #4</td>

</tr>

</table>

The code above will stretch the table to the full width (100%) of the page. We can use either a percentage of the page width or an exact pixel value (px). Below is the rendered table.

Here's the same table sized to a WIDTH of 200 pixels -- <table width="200px"> OR <table width=200>:

The HEIGHT attribute is more rarely used. It defines the height of the overall table. A pixel value is generally used, but a percentage can be used as well. A percentage value would be a percentage of the entire page (think "scrolling"), not just what is on the screen. Here's a <table> sized to 200 pixels across and 300 pixels vertically:

<table width=200 height=300>

<tr>

<td>Cell #1</td>
<td>Cell #2</td>

</tr>

<tr>

<td>Cell #3</td>
<td>Cell #4</td>

</tr>

</table>

Below is the rendered table:

Aligning The Overall <table>

When a table doesn't stretch all the way across a page, we can align it left, right, or center using the ALIGN attribute in the <table> tag. Lets center the table we just made above:

<table width=200 height=300 align="center">

Here's what the ALIGN="center" does:

You can use "left" (default), "right", and "center" to align your table. Remember that attributes in the <table> tag effect the entire, overall table.

Exercises

It's a good idea to start out with the basic tags without attributes just to layout the table. Add the content in the <td> tags and check to make sure the overall layout of rows and columns is correct before adding the sizing and aligning attributes.

Be sure you can make tables similar to the ones below before moving on:

This is the first cell.

Cell #1	This table is aligned to the right.
	This table stretches half way across the page.

To Next Advanced HTML Lesson

Back To Advanced HTML Index