14 Tables

Tables are a way of creating rows and columns of data boxes or cells within the display. Use tables sparingly if at all, the screen is simply too small for anything elaborate. Additionally some browsers ignore tables

Tables are formed horizontally, row by row, and can contain (in theory) any number of vertical columns, and any number of horizontal rows.

Tables start with an opening <table> tag, with a required columns attribute. Next we specify the opening table row <tr> tag. The table data cell <td> tags nest inside the table row. The number of table data cells on each row must coincide with the columns attribute. The table itself must nest inside a paragraph. Each data cell can contain text, images and links.

An optional alignment tag can be used alongside the columns attribute in the opening table tag. This aligns all contents of each column, no matter how many rows the column spans. By default all contents align left. To change this use a list of positioning commands, one for each column and written as capitals, L for left, C for center, R for right. For example align="CC" would be used in a two column table to align both columns centrally.

Care must be taken with nesting when writing the table code. Missing a closing tag is very easy. In wml tables cannot be nested within each other.

<p> <table columns="2" align="LR"> <tr> <!-- table row starts here --> <td> T Left </td> <td> T Right. </td> </tr> <!-- end of top row --> <tr> <!-- start of second row --> <td> B Left </td> <td> B Right </td> </tr> <!-- end of second row --> </table> </p>

This forms a simple two row, two column table, with the left column aligned left, and the right column aligned right. Any number of rows can be added, and just by including extra <td> tags in each row more columns (cells per row) are possible, but do remeber the required columns attribute.

Note the use of comment tags, when first using tables these can help make sense of your code.

< BACK   NEXT >