Web design development. Everything about Multi-Column Text

True multi-column text is just about impossible in any standard version of HTML. There are no tags in HTML 4.0 that allow you to create multiple columns in your document, and you can't even hope that style sheets will come to your aid. If you want to create multiple columns that will work in any browser, your only hope is to resort to tables.

To create multiple columns using tables, create a table with one row and the desired number of columns. Take the desired text flow and break it into three equal pieces, placing one piece in each column. The general idea is as follows:

<table border=0>

<tr>

  <td width=33%>

  Column 1 text goes here 

  </td>

  <td width=33%>

  Column 2 text goes here 

  </td>

  <td width=33%>

  Column 3 text goes here 

  </td>

</tr>

</table>

Once you have built this, load it into your browser and pray, the odds are near zero that you split the columns equally. After some trial and error, you will have things looking reasonably good. At this point, view it with another browser, or a different font, and watch your hard work disappear: The columns will once again be uneven.

In short, there is no way to create even, multiple columns using conventional HTML tags. But if you are willing to take a chance, Netscape offers some relief.

The <MULTICOL> tag

Supported in Netscape 4.0 and later, the <MULTICOL> tag does just what the name implies: It creates multiple columns of text from a single flow. Regardless of font, window size, or user settings, the text will be balanced among the columns.

The <MULTICOL> tag is easy to use: Add the cols attribute to set the number of columns, put any HTML content within the tag, it is as simple as that. Here's a simplistic example code:

<MULTICOL cols=3>

  Your text flow goes here, with any content element allowed

</MULTICOL>

When the <MULTICOL> tag is encountered, the browser skips a blank line, creates the desired number of columns, and flows the text accordingly. After the tag, another blank line is inserted, and the flow resumes with the next element. To ensure proper appearance on other browsers, surround the <MULTICOL> tag with <P> tags; this ensures a line break before and after the multi-column flow.

Customizing your columns

The <MULTICOL> tag accepts two attributes that provide some control over the column layout: width and gutter.

Use width to explicitly set the overall width of the entire group of columns. Without width, the entire group is made as wide as the containing text flow. Don't get confused: width is not used to set the width of a single column. It only controls the width of the entire group.

The space between columns is known as the gutter, and you can use the gutter attribute to control that spacing.

Be careful using width and gutter; you can easily render a column group unreadable.

<< BACK