Defining Table Width & Height @ OWDC

LESSON 1-05-03: Defining Table Width & Height

Web Design Lessons > Lesson 1-05-03: Defining Table Width & Height

Previous Lesson | Lesson Index | Next Lesson

Next in our free online web design course, we're going to learn how to define the "width" and "height" of our table. These two attributes can be defined in two ways: either as a fixed length (i.e. width="360") or a percentage (i.e. width="80%"). When you define your width as a percentage, your table will expand or impend depending on the total width/height of your browser window and your screen resolution. Therefore it is much more sound to use a percentage to define the width/height of your tables.

Copy and paste the HTML code below to create a two tables - one with a fixed width (900 pixels) and the other with a percentage width (90%):

If you save this HTML code and open it as an HTML page, you'll get a page with two tables. The first one will remain fixed however you resize your browser window, but the other one will adjust itself to fit the 90% of the total width of the resized window. Note that the "height" attribute acts in the same manner as the "width" attribute.

Defining The Size Of HTML Table Cells

You can also set the width and height of each individual cell by using the "width" and "height" attributes along with the <td> tag:

<html>
<head>

</head>
<body>

<table border="1">
<tr>
<td width="100" height="50">
Column 1
</td>
<td width="200">
Column 2
</td>
</tr>
</table>

</body>
</html>

Our output will be:

Column 1

Column 2

Notice that the height of the whole row has been defined by adding a height value to only one of the <td> tags. You do not need to define the "height" attribute in each column - only one will suffice. Same with the "width" attribute and rows.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

We're through with the "width" and "height" attributes. In the next lesson of our online web design course, we're going to learn how to "merge" table cells.

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-03 Basic Text Formatting
• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables

• Lesson 1-05-01 Building simple tables

• Lesson 1-05-02 Cellpadding & cellspacing

• Lesson 1-05-03 Defining table width & height

• Lesson 1-05-04 Merging table cells

• Lesson 1-05-05 Creating site layout by using tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

Back To Top

HTML TABLES!

Defining The Size Of HTML Table Cells