Create It ~101; Basic HTML-Tables

tags.

In order to see the table, you can add border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in

Help Index

Back to

Basic Tables

Tables are 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.
Cans and can'ts
The first step to understanding tables is knowing what shapes you can make with them. Start with a grid:
+--+--+
|  |  |  
+--+--+
|  |  |  
+--+--+
That's doable in a table. You can also begin to remove lines:
+--+--+     +--+--+
|     |     |  |  |
+--+--+     +  +--+
|  |  |     |  |  |
+--+--+     +--+--+
The grids above are also doable. But this below is not:
+--+--+
|  |  |  
+--+  +
|     |  
+--+--+
Basicaly, 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:

, which is always enclosed in a

Table: Table row: Table cell: (An aside: Why is the tag for a table cell ? Well, some say it stands for "table data," )
The thing to remember here is that a
is always enclosed in a
.
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:
     
          Cell 1
          Cell 2
     
     
          Cell 3
          Cell 4
     
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

and

. But don't overdo that one ok?.

"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 do this, you have to use the colspan modifyer. Just add colspan=2 to the .

You can also do this:

Cell 1 Cell 2

Cell 3

Just add rowspan=2 to the , like so:

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.

Return to Help Index

ksv@earthling.net