Lesson 13

Efficient use of height and width

This height & width series is dedicated to Mel.

Let's talk in depth about using height & width 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 height and width 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 another.

Part 1

Case #1 - fixed table size

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

Sample Table 1
<table width="240" height="240">
cell 1 cell 2
cell 3 cell 4



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.

Sample Table 2
add width="180" to cell 2:
<td width="180">
cell 1 cell 2
cell 3 cell 4



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

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.

Sample Table 3
add height="160" to cell 4
<td height="160">
cell 1 cell 2
cell 3 cell 4



"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:

Sample Table 4
Mini Page Layout
Home Welcome
Links Main Content


Table Code


Part 2

Now let's talk more about using height & width 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 height & width 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.

Sample Table 1

cell 1 cell 2 cell 3
cell 4 cell 5 cell 6
cell 7 cell 8 cell 9


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

Sample Table 2
Add width

cell 1 cell 2 cell 3
cell 4 cell 5 cell 6
cell 7 cell 8 cell 9



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.

Sample Table 3
Add height

cell 1 cell 2 cell 3
cell 4 cell 5 cell 6
cell 7 cell 8 cell 9



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

That's right.

Now I'll add some colors bgcolors to my cells.

When we talk about gradtables, you'll know everything you need to be a table artist. WooHoo!

"Feelin' Blue"
Click for some blues: 1 2 3 4 5 6 7 8 9

   
     
     



Table Code



Just for fun, here's the same table, but the songs are in the cells.

spacer spacer spacer
spacer spacer spacer
spacer spacer spacer


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 Lesson 11. If you want an image inside a cell to be smaller, use height & width in the <img> tag where it belongs.

Conclusion: Only use height & width in table tags where you really need them. Let your table "be itself". Just go with the flow, baby. You will save yourself a lot of frustration. Trust me on this (LOL).

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 most 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.

Homework Assignment

  • Think about ways you can use height and width more efficiently in tables
  • If you had problems with some of your tables from previous lessons, take another look at the height and width values in your cells
  • Feel free to post any tables you would like to discuss in light of this topic



Lesson 14 will be about placing an image on a texture.

Table Course
Table Gallery Key Concepts and Table Tips
Understanding Gradangles
WebTV Viewer
Table Gallery
HTML Cookbook
Html.Help.Gnubee
Html Help Gnubee Chat