More Table Attributes

This is the second of four pages detailing tables. This page assumes that you have read and have at least a rudimentary understanding of the material presented on the last page. If you need to take another look, you can click here to go back. Since tables are a fairly advanced subject, I am going to assume that you can remember the basic table tags from section to section. Therefore, I will show only the relevant portions of HTML in each section of this and following pages detailing table attributes. If you want to keep more than one open at a time, click the hypertexts below to open a copy of the indicated document in a new window.

Table Width

A default table is only as wide as the data stored within it. This can be okay, but sometimes a table needs to fit within a single, unchanging space. To modify the width of the entire table, we use the width attribute. This is expressed as a number of pixels, or as a percetage of the page's total width.

<table border="5" width="66%">

<table border="5" width="100%">

<table border="5" width="33%">

Changing the Width of Individual Cells

The neatest tables in the world will have cells that are all the same size. To acomplish this feat, we still use the width tag, but instead of placing it indide the <table> command, we put it into the first <td> or <th> in a given column. You only need to specify the cell width for the first row of cells. Tables form with all cells in evenly sized columns; all cells beneath the first will match the size of the cell you specified a width for. If you try to specify more than one cell width for a given column, the browser will simply use the largest stated value.

<th width="33%">Pine Trees</th>
<th width="33%">Spruces & Firs</th>
<th width="33%">Other Evergreens</th>

If the text in a given cell is longer than your pre set limitations, then the text will spill over onto a second line; this will also affect the vertical height of all other cells in that row.

Of course, cell widths don't need to be the same....

<th width="25%">Pine Trees</th>
<th width="55%">Spruces & Firs</th>
<th width="20%">Other Evergreens</th>

Just make certain that the percentages add up to 100%, or that the amount of pixels adds up to the total pixel width of the table. If you end up with a larger or smaller number, the browser will modify the overall size of the table to match.

Cellpadding

Cellpadding is extra space around the data in the cells of your table. It is always expressed as a number of pixels.

<table border="5" cellpadding="15">

<table border="5" cellpadding="30">

Cellspacing

Cellspacing is similar to cellpadding, except that this attribute adds the space outside the cell instead of inside it. More accurately, cellspacing modifies the size of a cell's walls. Like it's cousin, cellspacing is expressed in pixels.

<table border="5" cellspacing="15">

<table border="5" cellspacing="30">

Captions

Captions are not created by an attribute, but by as separate command. Still, without the presence of a table, they do nothing. To create a caption, type <caption> Caption Text </caption > immediately following the <table> tag.

<table border="5" width="50%>
<caption>Famous Muscle Cars</caption>
<tr>

By modifying the tag to <caption align=bottom> Caption Text </caption>, you can move the caption to the bottom of the table:

Moving Right Along...

Wow! Two sections down. This means only one thing...yup...two sections to go. (I can hear you groaning...) Click here to move on to the next (even more exciting) section.

Tables:1-3-4