Online-web-design-course.com 

HTML TABLES!

Online-web-design-course.com
HOME             RESOURCES             LESSONS             DIRECTORY             ARTICLES             FORUMS

Sponsor Links

Free Image Hosting
Your source for free image hosting - upload your images!

Poker Strategies and Tips
Poker, online poker, poker terms, poker accessories, poker tips and tricks.

Photoshop Tutorials
Over 3,000 tutorials for Photoshop, Flash and 3DS Max!

6,000 Free Fonts
Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com

Buy Website Visitors
1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed.

Reading Tarot Cards
Videochat with certified tarot readers & psychics - unlimited tarot cards readings!

Affiliate Software
Start an affiliate program and design to maximize affiliates' productivity

PPC Search Engine
Low cost advertising for your website!

Technical Service Provider
Your number one source for computer repairs and network solutions
 
LESSON 1-05-03: Defining Table Width & Height
Google
 

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%):

<html>
<head>

</head>
<body>


<table border="1" width="900">
<tr>
<td>
Row 1
</td>
</tr>

<tr>
<td>
Row 2
</td>
</tr>
</table>

<br><br>

<table border="1" width="90%">
<tr>
<td>
Row 1
</td>
</tr>

<tr>
<td>
Row 2
</td>
</tr>
</table>


</body>
</html>

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 1Column 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 TopWeb Design Course Top

Home  |  Resources  |  Articles  |  Lessons  |  Directory  |  Forums

Contact  |  Submit Article  |  Submit Site

Forums Archive  |  Site Map

Copyright© 2004 Onur Özcan. All Rights Reserved.

Long Distance Phone Service
Online-web-design-course.com

You must set the "ad_network_ads.txt" file to be writable.


 
Partner Links