|
|
Lesson 7: Content formatting using tables
WML tables are similar in look and operation to HTML tables. The main tag pair is
<table></table>
The opening table tag must also specify how many columns there are in the table, by setting a 'columns' attribute. It may also take an alignment attribute, 'align'. This works differently from the paragraph alignment attribute. The alignment of each column in the table is specified by one of the three letters 'R', 'L' or 'C' (for right, left and centre). The following tags describe a table that has two columns, the first of which is aligned to the centre, the second of which is aligned to the right.
<table columns="2" align="CR"></table>
The <tr></tr> tags specify the table's rows, whereas the <td></td> tags hold the data for each cell. If more cells are given than the table has columns for, the excess data seems to be placed into the rightmost cell.
Because of the idiosyncratic behaviour, as well as the small display area, tables tend not to look very good in microbrowsers. In the following example, the mode value of the paragraph tag is set to 'nowrap', so the table takes its full length.
|
1.
|
<?xml version="1.0"?>
|
|
2.
|
<!DOCTYPE wml PUBLIC
"-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
|
|
3.
|
<wml>
|
|
4.
|
<card id="card1" title="Welcome">
|
|
5.
|
<p mode="nowrap">
|
|
6.
|
<table title="demo" align="LL" columns="2">
|
|
7.
|
<tr>
|
|
8.
|
<td> Column 1, row 1</td>
|
|
9.
|
<td> Column 2, row 1</td>
|
|
10.
|
</tr>
|
|
11.
|
<tr>
|
|
12.
|
<td> Column 1, row 2</td>
|
|
13.
|
<td> Column 2, row 2</td>
|
|
14.
|
</tr>
|
|
15.
|
</table>
|
|
16.
|
</p>
|
|
17.
|
</card>
|
|
18.
|
</wml>
|
|
|
The pictures below demonstrate how this code looks in the development kit browsers from Phone.com and Nokia.
phone.com
| 
Nokia
|
Note that when we remove the mode attribute, the table formatting in the Nokia browser looks fine, but the formatting disappears in the Phone.com browser.
phone.com
| 
Nokia
|
|
|
|
|
