An htm4l example - tables and lists
Often when I'm laying something out in html for the first time, I want
to make a list of items. My first reaction used to be to make the
list using <ul> ... </ul> like this:
<ul>
<li> Here is the first item in my list.
<li> This is the second item.
</ul>
which gets rendered as
- Here is the first item in my list.
- This is the second item.
But if I then decide that the list should be centered, and I whack
<center> ... </center> around it, I get the following:
- Here is the first item in my list.
- This is the second item.
Which is not what I wanted at all! I want the left hand edge to be
even. There's an easy solution, make a table with 2 rows and one
column and center the table. Then this input:
<center>
<table>
<tr>
<td>
Here is the first item in my list.
</td>
</tr>
<tr>
<td>
This is the second item.
</td>
</tr>
</table>
</center>
produces this output...
|
Here is the first item in my list.
|
|
This is the second item.
|
Which is exactly what I wanted. But what a lot of editing to get from
one form to the other. None of the table data changed at all, I simply
had to spend 5 minutes munging it from one syntax to the other. What
if I now want to look at an ordered list, or decide I want the data in
a one row and two column table? Again, none of the data need be
touched, you merely have to do three weeks of mind-numbing rearranging
of supporting html.
Happily, htm4l can relieve you of all this hassle. To get the first
<ul> ... </ul> appearance, use this
m4_ul(`
m4_item(`Here is the first item in my list.')
m4_item(`This is the second item.')
')
To change to an nx1 table, simply change m4_ul to
m4_nx1_table. To get an ordered list or a 1xn table, use
m4_ol or m4_1xn_table instead.
Because I like red stars so much at the moment, I even have a special
redstar_nx1_table in my private macro collection. You could
also do it this way:
define(`blob', `<img src="http://www.teclata.es/terry/images/redstar-t.gif">')
<center>
m4_nx1_table(`
m4_item(`blob Here is the first item in my list.')
m4_item(`blob This is the second item.')
')
</center>
which produces
 Here is the first item in my list. |
| This is the second item. |
To remove the red stars, I can simply change the initial definition of
blob:
define(`blob', `')
or simply
define(`blob')
The ability to easily switch back and forth between 1xn and nx1 tables
and lists without having to change anything except the intial macro
name is achieved by having each of these macros define what an m4_item
is. The m4 for this is a little hairy. You'll need to be careful
when you include text with single quotes (acute or grave) and commas
in an m4_item. Fortunately, html provides escape sequences
for these which you can fall back if you can't figure out what's
happening to your quotes.
Back to the htm4l
home page.
Back to the htm4l
examples page.
© Terry Jones (terry <AT> jon.es).
Last modified: Mon Oct 2 02:21:32 CEST 2006