HTML Tutorial 006 - Tables
Other Tutorial Options:
 |
Tables are very common in HTML websites. Tables help organize and show information in
a much cleaner way than without it. People who do not know CSS rely on tables to create
the layout of their web pages. Tables are also notorious for the use of many tags and
attributes, causing a simple HTML page to look quite messy and complicated.
To define a table we use the <table></table> tags. Everything that is going to be put
into your table must be within these tags. If you haven’t already, open up your text
editor and web browser and then make sure your HTML coding looks something like this.
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<table>
</table>
</body>
</html>
With that coding you can see that we have told the browser that we have tables we want rendered. However, we need to add a bit more to our coding. Tables work in HTML work in rows. So for every row within your table you must use the <tr></tr> tags. This defines a row. Even now you cannot just throw a few rows into your code and put some text into it. Now you have to add another pair of tags, <td></td>, to define what goes within each cell of your table. ‘td’ means table data. So let’s add two rows and two columns into our site. Your table should look like this.
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
This is all done before we have even put any information into our table. If you open your HTML page into your browser there will be nothing to see. Now we can put some data into our table.
<table>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
Anything that is put in between the <td></td> tags will be rendered in your browser window. If you look at your page in your browser now you will see something a like this:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Now, lets say you wanted to add a title to your table. One way is to add the <th></th> tags. These are the table header tags. Just like the <td></td> tags, these must be inbetween the <tr></tr> tags. Add a table header into your table and refresh your browser window to see the outcome:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<table>
<tr><th>This is my table!</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
</body>
</html>
Typically, the information put into a table header will be bolded (if it is text). You can use the <th> tags the same way you use the <td> tags. The only issue we have with our table is that the header cell causes the ones beneath it to stretch out. Since this may be an undesirable look, we can use an attribute called colspan=””. In this situation it would look like this:
<table>
<tr><th colspan="2">This is my table!</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
The colspan attribute just tells your <td> or <th> tags to span across multiple columns (cols).
You can also do the same thing with rowspan=””. Instead of columns, the cell would span over multiple
rows. If you refresh your browser you should see that the table header spreads across both of the cells.
This is hardly the limit of tables. Let’s add some color and borders to our table. Just like in the
background of the whole site you use the same attribute to change the background of your table
(bgcolor=””). To add borders all we have to do is add the border=”” attribute. The value used in
the border is a numerical value telling the browser the width of our table’s borders in pixels.
<table bgcolor="gray" border="2px">
<tr><th colspan="2">This is my table!</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
Try this out in your HTML page and refresh your browser. You should see borders and a gray
background (unless you chose a different color). One thing to note is that the attribute bgcolor
is not limited to the <table> tag. You can also use this in the <tr>,<td>,
and <th> tags. This would allow you to give each of your cells a different color.
Another popular attribute is the width attribute. You can use this attribute in the
<table>, <th>, or <td> tags. Instead of the browser automatically choosing the side
you just tell it the amount of pixels you want your table, or cell to span.
<table bgcolor="gray" border="2px">
<tr><th colspan="2">This is my table!</th></tr>
<tr><td width=”200px”>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
Test this out in your browser. As you can tell change the width of one cell will also change
the width of all the ones below and above it. You cannot alternate the width of your cells within
one column. If you have two different sizes the browser will typically chose the largest one. You
can also use the height=”” attribute in the same way.
Also, there is no limit to what you can put within a table cell. You are free to do anything you
want within the <td> or <th> cells. If you can put it in between the <body> tags, it can
be put into table cells. And yes, you can put tables, in tables, in tables.
There are many different things you can do with tables. Feel free to experiment with them. Some
other attributes you can use in the <table> tag are cellspacing=””, cellpadding=””, and align=””.
The first two are defined by a numerical value followed by ‘px’ (5px for example). Cellspacing is
the space between each of the cells, cellpadding is the space between a cell’s content and its
border, and align positions your table. For align you can use left, center, or right.
|
|
 |