Tuesday, February 11, 2025

Page Layout with Tables


While there’s lots of discussion as to whether tables are the right tool for the
job, there’s no doubt that they can be very handy for laying things out on a web
page.  Here are some tips on how to use them for this purpose — you’ll
have to check the rest of the site for discussions about the virtues of using
them this way!
 

It’s curious how things tend to clump together. Cars on a
highway tend to group together with big gaps between the groups, stars gather
together in the universe in big (very big!) galaxies with billions of miles
between them and questions come in to the mentors in clusters with regard to
their subjects! Recently there has been a cluster of questions involving tables.
Not every question in this cluster mentioned tables, but they asked for help
with problems that are easily or best solved by using tables. Here then, are
some ideas for a few of the neat things tables that can do.

Tables are great for arranging things on your pages so that they go to
particular places, relative to other things on the page. For example, you might
want to have a small picture with text to the left of it and more text to the
right. Such an arrangement is easy in a table.

A table has rows and columns. A table with three rows and three columns would
look like a box with nine smaller rectangles in it. Each of these rectangle is
called a cell. It’s important to remember that programmers sometimes think of
things a little differently than "normal" people. For example, most people would
not think of a single box in terms of rows and columns, but to a programmer it
could be a table with one row and one column. Nothin’ wrong with that!

Let’s make tables! Here’s one with two rows and two columns:

<html>
<head>
<title>Table on Page</title>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
</table>

</body>
</html>

I have included the page code this time to show the table in context; the rest
of the examples will show the table only. As you can see, this table begins with
a <table> tage (with some extra attributes in this example) and ends with
</table>. Inside the table there are two rows, each defined by <tr></tr> begin
and end tags (table record begin, table record end – a row is also known as a
record, just like in a spreadsheet or database program.) Each row has two
columns defined with <td></td> table data begin and end tags. Personally, I
would have liked <tc> for table cell, but I didn’t get to vote! I have put a
non-breaking space in each cell just to give it some width. Speaking of width, I
specified border="1" as an attribute of this table so that if you look at it,
you will be able to see it. If I didn’t want to see the table borders on the
page I would use:

<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse">

Here is the table with something in each cell:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">this is text</td>
<td width="50%">
<img border="0" src="logo.jpg"></td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

I placed text to the left of the picture in the first row, and to the right of
the picture in the second row. If you make a page with this code and don’t have
a small graphic file called logo.jpg in the same directory as the page, you will
see the little red "x" placeholder instead of the picture, but you’ll get the
idea!

Cellpadding and cellspacing are great for putting some white space inside each
cell or between the cells, respectively. Try values of 2 or 5 instead of 0 to
see the effects (do cellpadding first, then cellspacing to see the difference.)
This will be easiest to see if you make a graphic like a small solid red
rectangle, call it logo.jpg and put it in the directory with this page.

It’s important that each row has the same number of columns as every other row
in the same table. Some browser are forgiving and will do their best to show the
table even if the column counts differ, but some browsers will either not show
the table or will quit showing any more of the page when they hit this error. We
don’t want that. Suppose, however, that you do want only one cell in the first
row and two in the second. "Colspan" allows for this, like this:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" colspan="2">this is text</td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

You can also do "rowspan". For me, row spanning gets hard to keep track of, so I
avoid it if I possibly can. Colspanning is hard enough to track even with well
laid out code like in the examples. Usually, it is possible to achieve even the
most complex of layouts using nested tables instead.

Nested tables are just like the ones next to your sofa! It’s a table within a
table, like this:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">this is text</td>
<td width="50%">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">&nbsp;</td>
</tr>
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="50%">
<img border="0" src="logo.jpg"></td>
<td width="50%">this is text</td>
</tr>
</table>

Here I have made a table with two rows, one column, inside the right hand cell
of the first row of my outer table. You might want to put this in your page and
look at it to see what I mean.

On more thing to mention here is the width="50%" attribute you see. The width of
a cell or of the table itself can be specified in terms of a percentage of the
available browser window or in pixels, like this:

<table border="1" cellpadding="0" cellspacing="0" width="100%">

<table border="1" cellpadding="0" cellspacing="0" width="300">

<td width="125">this is text</td>

Using tables it is possible to get very creative with the layout and placement
of everything on your page. Experiment a little with the suggestions I have
given here and you will very quickly see the effects you can create with this
powerful HTML tag set.

If you’d like to get some more examples, take a look

here
.

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured