HTML Tables Tutorial
So now you've
got some basics, let's make our webpage look nicer...with tables.
Tags you'll use for this lesson:
<table></table>
The Table tag.
<tr></tr>
The Row tag creates a row (or as many as you want) in a
table
<td></td>
The Cell tag divides the rows into "cells". The
td stands for table data (the stuff you put in the cells...i.e.
images and text). But lets just call them cells.
What is a table?
Tables are like boxes that hold
text and graphics together on a webpage. Because the contents
of a table is contained within cells, it makes aligning
text and images possible. It also gives you greater control
over the finished look of the page.
This
is a table.
| These areas
are called "cells" |
We can put text and/or graphics
in cells. |
| See the border all round
the table and between the cells? I set the "border"
attribute to 1 pixel, so you can see what's going on. Oftentimes,
you won't want borders showing. |
Because text and graphics
fit so nicely in these little boxes, everything is kept
neat and tidy. |
Now, let's make a
table
| Open
up the file you made in the last lesson "first.html"
or start a new one, and type the following text,
just as you see it:
<table width="350" border="1">
<tr>
<td>1st Cell</td>
<td>2nd
Cell</td>
</tr>
<tr>
<td>3rd Cell</td>
<td>4th Cell</td>
</tr>
</table> |
Save the file and once
again, open it in a browser
It should look like
this:
| 1st Cell |
2nd Cell |
| 3rd Cell |
4th Cell |
|
Notice that Tables start with the <table>
tag and for every row, there's a <tr> tag, for every
cell, a <td> tag.
Never forget your closing tags, it can drive you nuts tracking
down why a page looks so screwed up and often, it's just a
missing closing tag.
Blank
cells with nothing in them can look messed up on some browsers,
so it's always best to stick a non-breaking space
in an empty cell, like this: <td> </td>
Next on the agenda? Formatting
our table....
If you'd like us to alert you when new tutorials arrive,
join our email list (on the menu to the left)
You can email us at
Sorry, no individual questions answered,
though we may use yours as the basis for a new article.
©2007 www.WebsiteBeginner.com
|
