Tweaking The Width On Our Tables
Originally Published: 2002-05-18
Revised: 2006
Ok, we've seen the basic table markup and played with it a little. Now let's see how one can tweak the width of the table - in one of two ways!
We've come a long way from the basic table appearance. We've explored adding padding, spacing, and border plus captions, headers, and summary. I have, believe it or not, only touched the surface of what we can do with tabled data through HTML!
By now you may understand why I warned you in advance that this particular markup can become complex, confusing, and where comment markup can come in handy!
Turning our focus, for now in this article, back to the opening <table> markup - I will share how to tweak the width of the table itself through an attribute you can slip in. The width can be specified in one of two ways: percentage and pixels.
Using percentage values allows the table to fluctuate in size with the rest of the content according to the reader's viewing preferences. In other words, the table is fluid. Here's an example using a percentage value; I will slip in for the table to take up as much room as possible within the white section of this page:
<table cellpadding="10" cellspacing="10" border="1" summary="Table presented for example." width="100%">
<tr>
<td>This is Cell #1's Data. Another sentence for filler.</td>
<td>This is Cell #2's Data. Another sentence for filler.</td>
</tr><tr>
<td>This is Cell #3's Data. Another sentence for filler.</td>
<td>This is Cell #4's Data. Another sentence for filler.</td>
</tr>
</table>
Appearance on the Web:
| This is Cell #1's Data. Another sentence for filler. | This is Cell #2's Data. Another sentence for filler. |
| This is Cell #3's Data. Another sentence for filler. | This is Cell #4's Data. Another sentence for filler. |
Now I will lower the percentage value to around 2/3 of the white area's space:
<table cellpadding="10" cellspacing="10" border="1" summary="Table presented for example." width="65%">
<tr>
<td>This is Cell #1's Data. Another sentence for filler.</td>
<td>This is Cell #2's Data. Another sentence for filler.</td>
</tr><tr>
<td>This is Cell #3's Data. Another sentence for filler.</td>
<td>This is Cell #4's Data. Another sentence for filler.</td>
</tr>
</table>
Appearance on the Web:
| This is Cell #1's Data. Another sentence for filler. | This is Cell #2's Data. Another sentence for filler. |
| This is Cell #3's Data. Another sentence for filler. | This is Cell #4's Data. Another sentence for filler. |
If you adjust your screen resolution to a larger or smaller size, the table will adjust itself to covering 65% of the white area. Likewise, if you manually take your browser to half-size, then the table will likely shift with that change to maintain the 65% coverage. On smaller tables, the text of the rest of the page will sometimes automatically flow beside it.
Fluid tables have their perks, and generally this is what you will want your tables to do on a page - fluctuate in size. Yet, there are times you may want to have a table take up a set amount of room regardless of screen resolution of the reader. In that case, then you will need to use pixels to set the width with. Below I will set the table to take up 340 pixels in width in the white section of this page:
<table cellpadding="10" cellspacing="10" border="1" summary="Table presented for example." width="340">
<tr>
<td>This is Cell #1's Data. Another sentence for filler.</td>
<td>This is Cell #2's Data. Another sentence for filler.</td>
</tr><tr>
<td>This is Cell #3's Data. Another sentence for filler.</td>
<td>This is Cell #4's Data. Another sentence for filler.</td>
</tr>
</table>
Appearance on the Web:
| This is Cell #1's Data. Another sentence for filler. | This is Cell #2's Data. Another sentence for filler. |
| This is Cell #3's Data. Another sentence for filler. | This is Cell #4's Data. Another sentence for filler. |
You can change your screen resolution or just half-size your browser, and that table will cover 340 pixels of the viewing space. A percentage table is regarded as fluid; a pixel table is regarded as fixed.
As a note: If considering using a table to create a template for your site's contents ... do not use a fixed width in the opening table tag; you want the template to be fluid, so use percentage value of 100% or so instead.
Although I mention about screen resolutions of, for example, 800 x 600 [pixels]; this by no way means the viewer is actually seeing 800 x 600 pixels. Their monitor may shortchange by around 30 or more pixels in height and width. If you try to set the template to being 800 pixels in width, you may be having a horizontal scroll result for your site if the person is using 800 x 600 or less in screen size resolution. On the other hand, if the reader comes in using 1124 x 780 resolution, your page will only take up 800 pixels in width of their screen.