Learning HTML
For Kids!
12. More on tables
So far, we've covered some of the basics to table design. Now let's dig deeper to learn how to change them to suit our needs.
First, let's again look at the table code illustration used in Chapter 11.
Table Tag
To create a table you must used the following container tag:
<table>...</table>
This let's the browser know that a table is forthcoming.
Row Tag
Each table has at least one row and within that row are columns or what is also
referred to as cells. The row tag looks like this:
<tr>...</tr>
See how the row tag wraps around the column (cell) tags? You can have several rows, which will be exploring in this chapter.
Column/Cell tag
And finally, to complete your table you must have the column or cell tag--this is
where you information and images go. The column/cell tag looks like this:
<td>...</td>
Notice that I keep on using the words column and cell together. That's because in HTML tables, these words are often used to mean the same thing. It can be confusing at times.
Maybe an illustration can help. Here is a table with lots of rows and cells (columns).
Notice how this table is like a grid made up of rows and cells. The word "cell" is also referred to as a "column" and there lies some confusion. So when you work with tables, try to remember that the word cells and columns are often used to mean the same thing. Sometimes it will be hard to remember, so refer back to this chart to remind you.
A table with multiple rows and
columns/cells
Now that we've gone through the table tags and have a beginning understanding of
rows and columns, let's create a table with several rows and a couple of columns each.
Step 1 Open up your text editor.
Step 2 Enter the following code.
<html>
<head>
<title> Rows </title>
</head>
<body>
<h1>Here's a table with two rows</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
</tr>
<tr>
<td>This is column A</td>
<td>This is column B</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as rows.html
Step 4 Open Netscape Navigator
Step
5 View the page in the browser.
If all went right, you now have two rows and two columns/cells. Now let's
examine the column/cell tag.
Column/cell tag and
its attributes
In Chapter 11, we learned about a couple of attributes--bgcolor and width. You can
use these in the table tag (<table>), and the column/cell tag (<td>). You can
also use other attributes in the column/cell tag, such as:
- align: sets your text or image to left, center or right
- valign: sets your content vertically to top, center or bottom
- colspan: expands across multiple columns/cells
- rowspan: expands over multiple rows
Let's examine each attribute separately.
Align attribute
Leaving your text or image to the left of your column is usually pretty boring, so
the align attribute lets you center things, using "center" or place them to the
right, using "right".
Valign attribute
When placing copy in a column, the browser will automatically place it in the
center of the column. You can change this default by using the valign attributes of
"top", "center" or "bottom".
Let's apply these two attributes now before we continue.
Step 1 Open up your text editor.
Step 2 Enter the following code.
<html>
<head>
<title> Alignment Attributes </title>
</head>
<body>
<h1>Here are some examples of alignment</h1>
<table border="1" width="100%">
<tr>
<td bgcolor="#ff0000" width="40%" align="right">
This is column one<br>
This is column one<br>
This is column one<br>
This is column one<br>
</td>
<td width="60%">
This is column two<br>
This is column two<br>
This is column two<br>
This is column two<br>
</td>
</tr>
<tr>
<td bgcolor="#ffff00" width="40%" align="center">
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
</td>
<td bgcolor="#0000ff" width="60" valign="bottom">
<font color="#FFFFFF">
This is column b<br>
This is column b<br>
This is column b<br>
</font>
</td>
</tr>
</table>
</body>
Step 3 Save the file as alignment.html
Step 4 Open Netscape Navigator
Step 5 View the page in the browser.
If all went well, you should have a very colorful table with two rows and four columns (cells). Now we are ready to explore expanding these rows and columns (cells) in order to add interest to a page.
Spanning rows and
columns
Ever wonder how some pages have such wonderful layouts? They're using tables. To
see what I mean, take a look at these links:
Even though some of these Web sites are using some advanced things like frames and java script (coming soon!), each one uses tables as their basic structure. Learning to span rows and columns can help you add variety to your tables too!
To begin, let's look at our previous illustration, but this time with some rows and columns expanded.
When creating a table and you want to expand a column or a row you use the following attributes:
- colspan: expands across a number of columns
- rowspan: expands across a number of rows
Let's try this with some code:
Step 1 Open up your text editor.
Step 2 Enter the following code.
<html>
<head>
<title> Rowspan and Colspan </title>
</head>
<body>
<h1>Here's a table demonstrating rowspan and colspan</h1>
<table border="1">
<tr>
<td rowspan="2">This is an example of rowspan. It is spanning two
rows.</td>
<td>This is column B</td>
<td>This is column C</td>
</tr>
<tr>
<td>This is column D</td>
<td>This is column E</td>
</tr>
<tr>
<td colspan="3">This is an example of colspan. It is spanning three
columns.</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as span.html
Step 4 Open Netscape Navigator
Step 5 View the page in the browser.
Congratulations!
You have completed this tutorial!
Although
I do not offer technical support on HTML, I am always interested in how to
improve this tutorial. Any suggestions can be forwarded to:
|
Privacy
Statement |