In this lesson you will learn how to use the three basic table attributes.
You will construct a basic table of one row and one data cell.
You will also learn how to use a few attributes to make your simple table more interesting.
- <table></table>
- The container tag.
It must be closed at the end of everything you put into it.
- You can also add other attributes. See further below.
- <tr></tr>
- Table Row (horizontal)
Close at the end of each row.
- Usually no attributes added.
- <td></td>
- Table Data cell
Commonly referred to simply as cell.
- Close each cell
- The container for text and/or image.
- Certain other attributes can be added here.
OPENING TAGS
- the first tag of each pair above.
CLOSING TAGS
- the 2nd tag of each pair above.
UPPER VS LOWER CASE:
It is not necessary to capitalize any of the tags. Browsers prefer lower case these days
- <table>
- <tr>
- <td>
- Text, images go here.
- </td>
- </tr>
- </table>
Use these 3 basic tags in the order outlined above.
DEFAULT SETTINGS - border, and cellspacing (in a future lesson), is one or two pixels wide for most browsers.
These defaults will show up in the table, unless you change them.
FRAMING AN IMAGE
Open a new file and c/c/p the code below and substitute your own image:
BORDER
- Makes a visible boundary around the table.
- Sized in pixels, 0 to many.
- The "0" makes an invisible border.
- Default on most browsers will be about 2 pixels; shows as a line around the table.
BGCOLOR
- Colors the table, but not the border. In this case, the border makes a black "frame" around the gif, which has its own white background.
- Some browsers will render the border flat, while others will give it a beveled look. Netscape users see a white border; Netscape does not recognize the bgcolor attribute when included in the table tag
Copy the codes.
Experiment: Substitute your own border widths, including border="0," and bgcolor if you use a border of one pixel or larger.
FRAMING OR CONTAINING
A TEXT SECTION
Instead of an image, you can put a text paragraph of any length in the data cell.
Cell length will grow to accommodate length of paragraph.
This is an example of putting text inside a table and using the table border attribute to create a reddish brown frame around the paragraph.
I added a white background color to the Table Data cell.
Then I specified the font size and color and typed the text.
Finally I used the closing tags in the reverse order that I used them above. |
The code for the table above:
WIDTH:
- Specify in pixel numbers for the table and/or the data cell.
- If not, the browser will configure the table's size minimally to contain the data that's put into it and no larger, as you see in the table above.
HEIGHT:
- With width established, the height will grow to accommodate the length of the text.
CELLPADDING
- The space around text or image.
- Add to the table tag: cellpadding="10" - or whatever size space you'd like.
- With images, the cellpadding attribute looks like the mat around a framed picture.
So our text paragraph isn't jammed up against the border, the table below uses the cellpadding attribute:
This is an example of putting text inside a table and using the table border attribute to create a brownish frame around the paragraph.
Then I added 15 pixels with the cellpadding attribute to give the text a border all around it.
Also I added a white background color to the table data cell. Then I specified the font size and color. |
So play around with this simple table format, changing each of the above attributes in turn until you understand what effect each will give you. You have one row with one data cell in it. When you think you understand this, we'll proceed to adding more data cells in the same row.
| 
