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 But if I then decide that the list should be centered, and I whack <center> ... </center> around it, I get the following:
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="">') <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> Last modified: Mon Oct 2 02:21:32 CEST 2006