How To Make A Table For Your Web Page

Web Design Tutorials

Make A Simple Page
Make A Simple List
Make A Link
Make An Email Link
Embed An Image
Embed A Flash Movie
Make A Table
Hide Content
Error Check Your Page

In This Tutorial, I Show You How To Make A Table

Have you heard that using tables to make web pages is a "no-no?"

Well, that's not true. It's how tables are used that's the issue, not that they are used at all.

Like anything to do with (X)HTML, it's what you do with it that matters.

Tables are used for the presentation of tabular data and hence, you may have heard the term "data table." What's a data table? Anytime you have information that needs to be organized into rows and columns, that's a data table. Calendars, chart info, trains schedules are some good examples.

What you don't use tables for is web page layout. Sure, people have and always will use them, but it is not the best practice. When it comes to all matters of style - and that certainly includes page layout - you'll want to use Cascading Style Sheets.

So let's make a table to display data.

Let's Break This Down

My table consists of 4 rows and 4 columns. I start with an open table tag <table> and end up with a close table tag </table>. The rows are formed with <tr></tr> pairs. The columns (cells of the table) are made with either a <th></th> pair or <td></td>.

Here we go. This is your bread and butter data table.

Code View

<table border="2" summary="This is a data table that has 4 rows and 4 columns"> <caption>Meal Costs Comparison Of 3 Cities</caption>

<tr> <th></th> <th>New York, NY</th> <th>Cleveland, OH</th> <th>Winslow, AZ</th> </tr>

<tr> <th>Breakfast</th> <td>$12.00</td> <td>$8.00</td> <td>$2.25</td> </tr>

<tr> <th>Lunch</th> <td>$25.50</td> <td>$13.75</td> <td>$3.25</td> </tr>

<tr> <th>Dinner</th> <td>$50.00</td> <td>$27.50</td> <td>$4.25</td> </tr>

</table>

A couple of pointers

I showed the borders in the table ( border="2" ) to see how the information is set up inside of each cell. Before I launch the page, I'll remove the lines ( border="0" ).
I also used summary="This is a data table that has 4 rows and 4 columns" for those who use screen readers to read web pages. The summary attribute is not something you'll see in the Browser View.
Being a data table, I like using the <caption> tag to briefly describe what's in the table.
When the information is at the start of a row or column, I use <th>. I think of this tag as a special <td> tag because it works just like it. But the only time I use it is when the information is at the head of a row or column. Browsers generally display the contents of these table header cells in bold text centered horizontally and vertically in the cell. (Note that I used an empty <th></th> for the first cell. That's not my favorite practice but I'll let you get away with it).

This is what it all adds up to.

Browser View

Meal Costs Comparison Of 3 Cities
	New York, NY	Cleveland, OH	Winslow, AZ
Breakfast	$12.00	$8.00	$2.25
Lunch	$25.50	$13.75	$3.25
Dinner	$50.00	$27.50	$4.25

Go Ahead, Try It Yourself

Copy and paste the above list code in the box below or feel free to write your own code. Then click the "GIVE IT A TRY" box and check it out.

Test Your Code In This Box - The Code Tester

Yeah, but...

What can be done to spice up a bland data table?

Here's the same table - same (X)HTML code - but this time I jazzed it up using a touch of CSS.

Meal Costs Comparison Of 3 Cities
	New York, NY	Cleveland, OH	Winslow, AZ
Breakfast	$12.00	$8.00	$2.25
Lunch	$25.50	$13.75	$3.25
Dinner	$50.00	$27.50	$4.25

What About Other Tags To Use For Tables

So maybe you've seen and wondered what <thead>, <tbody>, and <tfoot> do.

Any - or all - of those tags are used to group rows and columns as necessary. Because CSS can be applied to ANY (X)HTML tag (element), you can hang your style rules on those 3 tags as well.

In my example I didn't use any of these tags, but I certainly could have used <thead> and <tbody>.

Want To Learn More?

You're at the right place because I will teach you this and much more, one-on-one, in my online web design Workshop, Introduction To XHTML And CSS. Now here's the good news. You can start right now!!