Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Create Simple HTML Tables

/skill level/
/viewed/
0 Times


I love tables. I know, I know. I'm a geek. But I really do.

I remember when I first discovered tables, back in the days of Netscape 1.1. I stayed up all night and had a transcendental experience around 4 a.m. Finally, I could control where things fell on a page!

Well ... kinda. Actually, the beauty of tables is that they're flexible. You can make them spread out, and take up the whole page (no matter how wide the user makes it). Or you can make them rigid, and force the page into a certain shape. The choice is yours. You're in control.

But today we're starting with the basics.

This tutorial, originally submitted by Webmonkey writer Derek Powazek, is a wiki. Portions of it may be outdated, but it is well-loved, so it has been preserved here for historical purposes.


Contents

Cans and Can'ts

The first step to understanding tables is knowing what shapes you can make with them. Start with a grid:

table1.gif

That's doable in a table. You can also begin to remove lines:

table2.gif

The grids above are also doable. But this below is not:

table3.gif

Basically, if you can draw it in a grid, and it's not shaped like an L, you can put it in a table. And if you understand what you can and can't do right from the beginning, you'll save yourself lots of hassle in the long run.

The Basics

There are three basic units in any table:the table, the table row, and the table cell. The tags for these are:

Table: Table row: Table cell:

(An aside:Why is the tag for a table cell  td¢? Well, there are two schools of thought on the matter. Some say it stands for "table data," and some say the Netscape engineers were on crack.)

The thing to remember here is that a  td¢ is always enclosed in a  tr¢, which is always enclosed in a  table¢.


Enough Already. Let's Do It!

OK. Let's make the basic table we outlined above. Here it is:

Cell 1 Cell 2
Cell 3 Cell 4

And here's the code: 

<table border>
     <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
     </tr>
     <tr>
          <td>Cell 3</td>
          <td>Cell 4</td>
     </tr>
</table>

As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the  td¢ and  /td¢ tags.

In order to see the table, I added border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in  table border="5"¢. But be warned, this can be taken too far.


Colspan and rowspan

You can also make a cell in one row stretch across two cells in another. Like this:

Cell 1
Cell 3 Cell 4

To accomplish this, you have to use the colspan modifyer. Just add colspan=2 to the  td¢, and voila! 

<table border>
     <tr>
          <td colspan=2>Cell 1</td>
     </tr>
     <tr>
          <td>Cell 3</td>
          <td>Cell 4</td>
     </tr>
</table>


You can also do this:

Cell 1 Cell 2
Cell 3

Just add rowspan=2 to the  td¢, like so: 

<table border>
     <tr>
          <td rowspan=2>Cell 1</td>
          <td>Cell 2</td>
     </tr>
     <tr>
          <td>Cell 3</td>
     </tr>
</table>

Just remember:Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.

Now you're ready for the really fun stuff:alignment, cell padding, cell spacing, and, of course, the transcendental experience tag, which are all covered in my [Format HTML Tables] article.


Retrieved from "http://www.webmonkey.com/tutorial/Create_Simple_HTML_Tables"
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year