The Basics: Web Developers Forum

Purple Haze

This tutorial is split among four sections in this post. This is how the tutorial is organized: - Introduction to Tables
- Required tags
- Formatting tables
- Rowspan and colspan attributes
- Other table tags

1. Introduction to Tables

Tables are a way of representing data and consist of cells within rows and columns. Pretty much every website you see uses tables in some way. They can be formatted to be made to look any way you could possibly imagine. Common uses for tables are displaying database entries, making calendars, and showing organized information.

Note: Tables should not be used to outline a website’s design; that is a common misconception made by webmasters, and that use is what CSS is made for.

2. Required tags

To make the most basic table, you need to know the following three tags:
<table> Begins a table, a table won't display unless it starts with this tag.
<tr> - Starts a new table row.
<td> Creates a table cell.

Below is the organization of a basic table:
When you view that HTML, you won’t see anything because there is no formatting to the table, nor is there anything within any of the cells. Here is a table with some text:
Now you can see that there is table with two rows and two columns. The table has two <tr> tags to create two rows and there are two <td> tags within each row to create two columns.

3. Formatting tables

Our current table looks pretty boring, so now we need to add some effects to it. Tables are very unique in the way they handle attributes because of inheritance of the attributes. When you add an attribute to the <table> tag, it is applied to the entire table, and when you include an attribute in a <tr> tag, it is applied to the whole row. Another way to think of it is that as the table tags get more specific, they override the general tags. Here is a little diagram to help illustrate the inheritance of attributes within a table:

<td> attributes ----take priority over---> <tr> attributes ----take priority over---> <table> attributes

Attributes for the <table> tag
border - This tells how thick the border should be around the table. If you use 0, the table will have no border. If you use something like 20, it will be very thick.
cellspacing - Tells how big the space should be between cells.
cellpadding - Tells how big the space should be between the cell border and the cell’s content.
width - The width attribute tells how wide the table should be, either in pixels, or as a screen width percentage. If you used 100%, the table will be as wide as the user's screen. Using a percentage is useful so that you know the table won't go off the user's screen creating horizontal scrollbars.

Now let's try some of these out. I will use our old code for the table, except I will now be adding in some attributes to make our table look different.
You will notice that our table now looks a little different. It has a border, its width is now set, and the cells are spaced farther apart. Now, let’s add some more effects to our table and demonstrate the inheritance of attributes.

Attributes for the <td> and <tr> tags
align - This tells how the data in the table cell or row will be aligned, possible values are "right" or "center" (default is "left").
valign - This is the vertical alignment for a table cell or row. You can use "top" and "bottom" for the value (default is “middle”).

NOTE: The width and height attributes have been depreciated in XHTML 1.0 for the <td> tag; instead use the "style" attribute. The "style" attribute is a standard attribute that works for almost all tags.

You would specify the width of something like this: style="width: 250px"
You can do the width and the height in one style attribute: style="width: 100%; height: 100%"

Let's try putting some of these attributes into our table.
You'll notice that more changes have occurred to our table. The left cells are 25% of the width of the table, and the right cells are 75% of the width. Also, the content of the two right cells are aligned to the right. However, you will notice that the top-left cell is aligned to the center because of the align attribute in the <tr> tag was inherited by the cell.

4. Rowspan and colspan attributes

The rowspan and colspan attributes are very important aspect of tables. These attributes allow table cells to span over a certain amount of columns or rows. The rowspan attribute spans cells over rows, and the colspan attribute will span cells over columns. Here is how the attributes work:
Notice how the top cell spans over two columns? That's how the colspan attribute works, and since we are making one table cell span over two columns, there is no need for a second table cell in that row.

Now let's try out the rowspan attribute:
The left cell spans over two rows in this example. Since the first table cell of the first row is spanning over two rows, there is no need to make the first table cell in the second row.

You can make your tables as complex as you want with these attributes, here is an example of a more complicated table:
The top-left cell of the table uses the rowspan attribute to span over two cells, and the top-right cell uses the colspan attribute to span over two columns.

5. Other table tags

Now that you know how to make a table, I will show you some extra table tags, which you may or may not find useful.

First, we will go over the <caption> tag. This tag must come right after the <table> tag. The text inside <caption> and </caption> will be centered above the table. It's not a necessary tag to know, but some people like to use it. Here is an example:


Another tag that you will find to be useful is the <th> (table heading) tag, which is used to define a header cell in a table. This tag is used the exact same was as the <td> tag; however, anything inside the <th> cell will be centered, and text inside it will be bold. Let's try it out:
The text in the top two cells is bold and centered without using anything but the <th> tag. Remember to end the <th> tag with </th>, not </td>.

And there you have it! That’s all there is to tables.

Archaic Sage

Another great tutorial.

Teach them how to do CSS and XHTML next! The best combination since PHP and SQL :d.

Purple Haze

Revised the tutorial a bit.

__________________
Sticky Icky

Lars

Great tutorial - Next on the agenda would be a CSS tutorial explaining how to design tableless, so that you don't get all the newbies caught up in table design like I already am

__________________
Current Projects
[ Lars-Christian dot com ] [ Web Developers Forum ] [ WebDev Blog ]