Okay, now you want to add tables to your HTML document, huh?
Tables are fairly easy and not as hard as I bet you're thinking they are.
Let's get started so I can show you what I mean.
Before we begin I'm assuming you already know basic HTML, right? Good! You
won't have any problems following this tutorial then.
*See How to Make a basic Web Page if you haven't already.*
A table consist of only 3 tags.
<table> This is the main tag. It's tells the browser "this is a
table". You can also set border ,size, height & width attributes
into this tag.
<tr> This is a table row. Table rows consist of "cells" or table
data
<td>This is table data or a "cell"
| THIS -> "cell/table data" | IS-> "cell/table data" | A -> "cell/table data" | TABLE -> "cell/table data" | ROW -> "cell/table data" |
| "cell/table data" | "cell/table data" | "cell/table data" | "cell/table data" | "cell/table data" |
| "cell/table data" | "cell/table data" | "cell/table data" | "cell/table data" | "cell/table data" |
| "cell/table data" | "cell/table data" | "cell/table data" | "cell/table data" | "cell/table data" |
So how did I get that table to look like that, you ask. I'll show you but first you go open your notepad and start an HTML document
<html>
<head>
<title>My First Table</title>
</head>
<body>
</body>
</html>
now save that as tables.html in a "new" folder in "My
Documents" folder.
Now let's add a table by adding the table tag <table>
and since you should already know basic HTML you'll remember that you always
need closing tags </>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
</table>
</body>
</html>
A table needs at least one row <tr>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr>
</tr>
</table>
</body>
</html>
A table row needs at least one "cell" <td>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
*since you should already know basic HTML you'll remember to nestle the
tags.*
Okay now you need to add something inside that "cell". Let's add Nicky
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
Now save your work and take a look.
All you should see is
Nicky
Let's make it look like a table by adding border now.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="1">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
Save it again and take a look.
It should look like this now................
| Nicky |
(You continue to save and look at your web page after every new attribution.)
The border can be made bigger.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="5">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
Or you can have no border.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="0">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
*Keep in mind if you don't set a border size most browser will have a "0" border default but it's wise to set it at "0" if you don't want a border just to be safe.*
Let's go back and set it to "2" okay.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
We can make our table as big as we want it.
Like this
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
or........
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="50%">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
or............
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="30%">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
You're getting it now right?
If you don't put a size attribute then the table is only as big as it needs to be.
Like with our original table
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
Now it's important that I point out there are 2 ways to set the size of a
table.
You can set the size by Percentage 100% or by pixels 100
See the difference when we use pixels instead of %
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
now look again at the size being set using %
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
You can also set the height of a table
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
We can also decide where to put the data inside the cell at.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td align="center">Nicky</td>
</tr>
</table>
</body>
</html>
|
Nicky |
or..........
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td align="left">Nicky</td>
</tr>
</table>
</body>
</html>
|
Nicky |
or..............
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td align="right">Nicky</td>
</tr>
</table>
</body>
</html>
|
Nicky |
We can also control the vertical alignment of the data inside the cell
let's put the data vertically at the top
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td align="right" valign="top">Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
or middle...........
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td align="right" valign="middle">Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
or bottom............
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" width="100%" height="20%">
<tr>
<td align="right" valign="bottom">Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
Okay now that all that is out of the way let's move on to something fun like
adding more than one row.
Let's add Nicky's friend Bobby as a new row to our table.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
</tr>
<tr>
<td>Bobby</td>
</tr>
</table>
</body>
</html>
| Nicky |
| Bobby |
Now let's give Nicky and Bobby a friend. Let's add Shane as a another new row
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
</tr>
<tr>
<td>Bobby</td>
</tr>
<tr>
<td>Shane</td>
</tr>
</table>
</body>
</html>
| Nicky |
| Bobby |
| Shane |
Okay you know how to add rows to a table but now you're wanting to add more cells to the rows so lets go back to just one row and add on cells to that one row
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
</tr>
</table>
</body>
</html>
| Nicky |
Let's add Courtney to Nicky's row.
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
<td>Courtney</td>
</tr>
</table>
</body>
</html>
| Nicky | Courtney |
Let's go ahead and add another friend. Let's add Cody to Nicky and Courtney's
row
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2">
<tr>
<td>Nicky</td>
<td>Courtney</td>
<td>Cody</td>
</tr>
</table>
</body>
</html>
| Nicky | Courtney | Cody |
Okay now we need to talk about cellpadding and cellspacing.
Let's start with cell spacing:
Cellspacing is the amount of space between
the cells.
Below is cellspacing set at 6
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" cellspacing="6">
<tr>
<td>Nicky</td>
<td>Bobby</td>
</tr>
</table>
</body>
</html>
| Nicky | Bobby |
Cellspacing set at 20
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" cellspacing="20">
<tr>
<td>Nicky</td>
<td>Bobby</td>
</tr>
</table>
</body>
</html>
| Nicky | Bobby |
Okay now let's look at cellpadding.
Cellpadding is the amount of space between the cell text and the cell
border. In other words, the amount of "padding" around the text.
Let's set the cellpadding at 6
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" cellpadding="6">
<tr>
<td>Nicky</td>
<td>Bobby</td>
</tr>
</table>
</body>
</html>
| Nicky | Bobby |
Okay now set cellpadding at 20
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="2" cellpadding="20">
<tr>
<td>Nicky</td>
<td>Bobby</td>
</tr>
</table>
</body>
</html>
| Nicky | Bobby |
There you go now you know how to build a table! Congratulations!
Just to make sure you've got it let's quickly build a 3x3 table.
1)set the border at 4
2)set the width at 50%,
3)the cellspacing at 2 and the cellpadding at 2.
4)align all table data to center
5)vertically align table data in the middle
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="4" width="50%"
cellspacing="2"
cellpadding="2">
<tr>
<td align="center" valign="middle">Nicky</td>
<td align="center" valign="middle">Courtney</td>
<td align="center" valign="middle">Cody</td>
</tr>
<tr>
<td align="center" valign="middle">Bobby</td>
<td align="center" valign="middle">Kevin</td>
<td align="center" valign="middle">Terry</td>
</tr>
<tr>
<td align="center" valign="middle">Shane</td>
<td align="center" valign="middle">David</td>
<td align="center" valign="middle">Brandon</td>
</tr>
</table>
</body>
</html>
| Nicky | Courtney | Cody |
| Bobby | Kevin | Terry |
| Shane | David | Brandon |
Click *here* to learn how to put pictures, color, and backgrounds into your tables!
Click *here* to return to the main site-index.