Table Attributes

You can define a width to the table <table width="400"> and also to the cells <td width="200">. Let's take control of this table. Since the overall width is 400 pixels let's make each cell 200 pixels.

<table width="400"> <tr> <td width="200">First Row,<br>First Cell or Field</td> <td width="200">First Row,<br>Second Cell or Field</td> </tr> <tr> <td width="200">Second Row,<br>First Cell or Field</td> <td width="200">Second Row,<br>Second Cell or Field</td> </tr> </table>

Here is how this table will look:

First Row, First Cell or Field	First Row, Second Cell or Field
Second Row, First Cell or Field	Second Row, Second Cell or Field

We can also set the size with percentages. Have a look below where we have substituted percentages to our table instead of a fixed pixel width. The 400 pixel width is now 100% and the 200 pixel cells are now 50%. Same thing right? Well, no not exactly. View it below where I have added it to the same page as the above table and see the difference.

<table width="100%"> <tr> <td width="50%">First Row,<br>First Cell or Field</td> <td width="50%">First Row,<br>Second Cell or Field</td> </tr> <tr> <td width="50%">Second Row,<br>First Cell or Field</td> <td width="50%">Second Row,<br>Second Cell or Field</td> </tr> </table>

Here is how this table will look:

First Row, First Cell or Field	First Row, Second Cell or Field
Second Row, First Cell or Field	Second Row, Second Cell or Field

Notice how the second table, which is set to 100%, is a little wider than our first table which is set to 400 pixels. The table has now taken up all the horizontal screen space, which in our case in the width of our main text area which is 468 pixels.

The table we are working on right here is actually nested inside a table that the entire page is setup in. More on nesting tables soon. The 100% will expand to the resolution of the screen it is being displayed on, or the width of the column you are in. In this case it has spread out to 468 pixels wide, which is the width of the column in the table that it resides in. The overall table the page resides in hold our little demonstration tables. Nested one inside the other.

Now if I visit your site with a screen resolution of 800 x 600 and Joe visits your site with a resolution of 1600 x 1200 we will both see the table spread out across our screens from left to right. When we define a pixel width the table will only occupy that many pixels across the screen.

This gives us control over how things display on screen with different resolutions.

At the risk of confusing you, everything about resolution is relevant. Even though I may have my screen set to 640 x 480 resolution I'm still going to see everything on your page, left to right same as Joe will with his 1600 x 1200 resolution. I'm going to see it a bit smaller though! Everything you put on your page left to right will show up within 640 pixels if my resolution is set that way, or within 1600 if my resolution is set that way. It's relevant to your screen resolution. If you set up your page to a 1600 wide resolution and I visit with my 800 wide setup, I will get a scroll bar along the bottom of my browser so I can scroll back and forth. I hate that!

The screen resolution equals the number of dots (pixels) on the entire screen. A 640x480 pixel screen is capable of displaying 640 dots horizontally and 480 dots vertically. That all equates to 307,200 pixels to the entire screen (mileage varies with physical screen size). 480 horizontal lines of dots and 640 vertical lines of dots. If you need an average try something like 50 dots to a one inch line.

If you have a hard time understanding this don't worry, it will make sense to you as you progress and make more and more pages. If you are adventurous take a few moments when you are not working on something and go into your control panel and change the resolution of your monitor. You'll see the difference. Make note that everything changes size yet it still displays the same content left to right on your screen. Be sure to set the resolution back to how you had it!

At the time of this original publication, late 2003, the majority of users have a screen resolution set to 800 x 600. Design efforts should probably be focused on this resolution.

Try some experiments on your own and view them in your browser. Try 50%, 100%, etc. You'll see how it works. That's the width attribute ... what's next?