For example, this page--in fact, this whole tutorial--has been developed using a four-column table. The best way to understand tables is to look at the following illustration.
The structure of a table
Every table is wrapped by the <table>...</table> tag. Then, the columns are surrounded by the <tr>...</tr> tag. You can have one column or as many as you want. In the above illustration, we are looking at three columns. Now each column has its own tag: <td>...</td>. Although these columns appear horizontally in code, they actually represent vertical columns. So the above illustration represents a set of columns like this:
Tables can be very complex. However, we will create a simple column format. Using some of the basic HTML tags you have learned so far, let's create a new Web page with tables.
Step 1 Open up a text editor (remember, Simple Text for Mac and Notepad for Windows.
Step 2 Enter the following code:
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="ffffff" text="000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
<td>This is column three</td>
</tr>
</table>
</body>
</html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="ffffff" text="000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
<td>This is column three</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table1.html
Step 4 Opening Mozilla Firefox
Step 5 View the page in the browser.
Notice that I've included a border with a value of 1. When designing a page, it helps to keep the border attribute in the code just so you know where things are. Then after you are pleased with the design, you can take out the border attribute. Some folks like the border on all the time. It's your choice--you're the designer.
Now let's add some copy to our columns. And see what happens. Add the code listed in red.
Step 1 Open the file table1.html
Step 2 Add the code highlighted in red:
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td bgcolor="#000000">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.</font>
</td>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td bgcolor="#000000">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.</font>
</td>
<td bgcolor="#bee3c2"> <b>This is column two</b></td>
<td bgcolor="#ff8000">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
<td bgcolor="#ff8000">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table2.html
Step 4 Opening Mozilla Firefox
Step 5 View the page in the browser.
Table width
As you can see from the two examples above, the column widths change as you add text (or an image). What you need is some control. And you have it in two ways:
As you can see from the two examples above, the column widths change as you add text (or an image). What you need is some control. And you have it in two ways:
- Setting the pixel measurement for the table and its columns as a fixed measurement.
- Setting the widths based on the percentage of the screen's width.
Both ways are used by designers. It's really a matter of choice. Let's look at both methods.
Pixel table measurement
The average screen (across all platforms) measures at 595 pixels (width) by 295 pixels (length). Any wider than 595 and some screens will run your text and images straight through the right-hand side of your screen. Not a good option.
The average screen (across all platforms) measures at 595 pixels (width) by 295 pixels (length). Any wider than 595 and some screens will run your text and images straight through the right-hand side of your screen. Not a good option.
So you definitely want to keep your full table size at 595 pixels using the width attribute. Each column within that table should not individually add up to more than 595. Let's use our code as a way to learn:
Step 1 Open up your file table2.html.
Step 2 Now add the code in highlighted in red.
Step 2 Now add the code in highlighted in red.
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1" width="595">
<tr>
<td bgcolor="#000000" width="20">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="100">
<b>This is column two</b>
</td>
<td bgcolor="#ff8000" width="475">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1" width="595">
<tr>
<td bgcolor="#000000" width="20">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="100">
<b>This is column two</b>
</td>
<td bgcolor="#ff8000" width="475">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table3.html Now view it in Firefox.
Step 4 If all went well, you page should look like this in your browser
Notice the width in each column. If you add up the widths in each column, you will find it comes to 595 pixels. It's important to do your math when you're working with columns.
Notice the width in each column. If you add up the widths in each column, you will find it comes to 595 pixels. It's important to do your math when you're working with columns.
Play around with the code, change the width numbers and see what happens. When you're done, let me show you another way to control your table widths.
Control table width by percentages
The other way to control the width of your columns is by using percentages. This makes your page more "dynamic" because the tables and columns adjust according to the screen size. If the screen is 595 pixels wide, it will fit within 595 pixels. But if your screen is 640 or more, the table will spread out to fit the entire 640. Let's try it with your current page.
The other way to control the width of your columns is by using percentages. This makes your page more "dynamic" because the tables and columns adjust according to the screen size. If the screen is 595 pixels wide, it will fit within 595 pixels. But if your screen is 640 or more, the table will spread out to fit the entire 640. Let's try it with your current page.
Step 1 Open table3.html and save it as table4.html
Step 2 Add the changes indicated in red.
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables<h1>
<table border="1" width="100%">
<tr>
<td bgcolor="#000000" width="20%">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="60%"> <b>This is column two</b></td>
<td bgcolor="#ff8000" width="20%"><font color="#804000"><b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables<h1>
<table border="1" width="100%">
<tr>
<td bgcolor="#000000" width="20%">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="60%"> <b>This is column two</b></td>
<td bgcolor="#ff8000" width="20%"><font color="#804000"><b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table4.html. Now view it in Mozilla.
Step 4 If all went well, you page should look like this in your browser.
Wow, you deserve a break. One last chapter--more stuff on tables. It's a pretty big topic.
Download in PDF Format HERE:
Learning HTML
Posts
No comments:
Post a Comment