Tables.

Lesson 8. Making tables (part 1.)

Make A Simple Table.

Table's are an indispensable part of your html armour. You can display information as tables and use them to position text and images on your page. The table tag explanation, in the 3 colored boxes below, is just one example of how you can use tables.

A table is basically made up of 3 html tags.

<table></table>

This tells the computer that the information between these 2 tags will be set in a table.

<tr></tr>

TR stands for Table Row. Information placed between these 2 tags will be in a horizontal row across your table. Within each table row are a number of blocks or cells called TD.

<td></td>

TD stands for Table Data. Information placed between these 2 tags will be put in one block or table cell within a table row.

These separate boxed areas are called TD's. (Table Data Cells)

In this table, there are sixteen separate TD cells

There are 4 horizontal table rows. ( Called TR's)

And 4 TD cells in each of these separate rows.

Now, let's see these tags in action.

Open Notepad. (I know you're an expert at this by now)

Copy this basic html page outline.
Then, save it as table.html in your 'mywork'folder.

<html>
<head>
<title>Gonna make a table!</title>
</head>
<body>
</body>
</html>

After saving it, open this page in your browser. If you do this, whenever you make a change to your 'source code', you can check and see what the effect is.
Of course, everything goes between your 2 BODY tags.

4. Put in your table tags.

<body>

</body>

5. Give your table 1 row.

<body>

</body>

6. Put 1 data cell in your row.

<body>

</body>

7. Write my name in your 1 TD cell.

<body>

<table>
<tr>
<td> Kimberly </td>
</tr>
</table>

</body>

Will look like this on your page :

Kimberly

WHAT!!! All that just for one lousy looking word???
Phfft! Calm down! It doesn't look like much, but it really is a table.

Let's give your table a border.

Add border="1" in the TABLE tag and see what happens.

<body>

<table border="1">
<tr>
<td> Kimberly </td>
</tr>
</table>

</body>

Will look like this on your page:

kimberly

Let's have a look at some different border sizes.

kimberly

<table border="5">

kimberly

<table border="10">

kimberly

<table border="15">

kimberly

<table border="20">

kimberly

<table border="25">

kimberly

<table border="25">

Note : It's always good to have a border of at least 1 while you are making your table. Even if you don't intend on keeping the border on your finished table, a border helps you to see and keep track of what you are doing.