Width and Height

Let's talk about using width and height in tables. During this lesson, keep in mind that your table will automatically adjust itself to whatever you put in it.

I used to put width and height in all my table cells, but a lot of the time it is just not necessary. Let's see what happens when we use them judiciously.

This lesson comes in parts. Take your time so that you understand one part before you move on to the next.

Part 1 - fixed table size

We'll start with a 2x2 table and set the size at 240x240. Since I haven't used width & height in any cells yet, both rows will share the total height equally. Both columns will share the width equally.

OK, we have a table with a fixed size, but we want to change the cell sizes.

Key Concept: all cells in the same column have the same width.

If we add width to any cell, the other cell(s) in the same column will take on that width. In this table, I want cell 2 to be wider, so cell 4 will also be wider. I'll use pixels, but you could also use percentage.

Now I want cell 4 to be taller, so I'll add height in that cell.

Key Concept: all cells in the same row have the same height.

If we add height to any cell, the other cell(s) in the same row will take on that height. In this table, I want cell 4 to be taller, so cell 3 will also be taller. I'll use pixels, but you could also use percentage since the table has a fixed size.

"Hey, Gnubee, what about height and width in the other cells?!?"

Good question. You don't need them. Since this table has a fixed size, the other cells just get what's left over. It's that simple. We see that one width & one height control the entire table! They could be in any of the cells.

"There's gotta be more to it. I can feel it."

Nope.

Now I'm ready to finish my table off by adding bgcolors to my cells:

Part 2

Now let's talk more about using width & height in tables where we don't care what size the table is. We want cells with a fixed size. Keep in mind that your table will automatically adjust itself to whatever you put in it.

Only use width and height in table tags where you really need them.

Case #2 - no fixed table size

We'll start with a 3x3 table and adjust our cells from there.

Well, that doesn't look like much, does it? Let's add some width attributes. We'll put them in the first 3 cells and that will control all 3 columns. I'll just choose some numbers: 70, 150 & 100.

Hmm, that's a little better. Let's add some height. I only need to do this in 1 cell per row. I'll use height="40" in cell 1, height="80" in cell 4 & height="60" in cell 7.

"C'mon, Gnubee, is that all I really need?

That's right.

Now I'll add some bgcolors to my cells.

Just for fun, here's the same table, but the songs are in the cells. There has to be something to click on, so I used my clear gif set at the dimensions from the table above.

Part 3

Let's say you use height & width in a table cell, but you put something in the cell that is larger than the size you specify.

The content of the cell will overide the values you entered.

For example, if your cell contains an image that is larger than the height & width you used in the <td> tag, the size of the cell will be determined by the size of the image instead of the height & width that you put in your <td> tag.

Likewise, if you have another cell in the same row that is "taller", that cell's height will overide the height you entered in the original cell, because the height of a row is determined by the "tallest" cell in the row.

And, if you have a cell in the same column that is wider, that cell's width will overide the width you entered in the original cell, because the widest cell in a column determines the width of the column.

You cannot use height & width in a table cell to restrain the size of something inside the cell that is larger, whether it is an image, a block of text, whatever you may put in it. You can use height & width in a cell to make the cell larger than its content. This is useful for putting a small image on top of a larger background image, as we did in our last discussion.

If you want an image inside a cell to be smaller, use height & width in the <img> tag where it belongs.

Part 4: What do pc's see?

Finally, do pc's see the same thing we do? No, they don't. Using height in a cell to make the cell "taller" does not work for many browsers!!!

"Oh no, whatever shall we do?"

There is a simple solution: use a blank image in the cell to determine the height. I use a clear 1x1 gif.

If you want a cell to be 100 pixels high, for example, just add the image anywhere in the cell:
<td>
<img src="1x1clear.gif" border=0 width=1 height=100 alt="spacer"/>
The rest of your content goes here.
</td>

This technique also works for browsers that do not read the spacer tag.

Table Lab

Make a decorative table with width and height.

As always, questions and comments are welcome.

Happy tabling,
Gnubee