10. WML
Tables
To
create tables and place some data in them, you need the <table>,
<tr> and <td> WML tags. A table (<table>) has a
number of rows (<tr>) and each row has a number of cells
(<td>). Data is placed in table cells. The markup structure
should be like this:
<table> <tr> <td>Data
is placed here</td> </tr> </table>
The
columns attribute of the
<table> tag specifies the number of columns of a table. It is a
mandatory attribute. The columns
attribute value must match the number of <td></td> tag
pairs in a row. For example, if the columns
attribute value is 3, then each <tr></tr> must contain
three <td></td> tag pairs.
The
following WML example demonstrates how to create tables and place
data in table cells:
(tablesEg1.wml)
<?xml
version="1.0"?> <!DOCTYPE wml PUBLIC
"-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">
<wml> <card
id="page1" title="Table in WML"> <p> <table
columns="3"> <tr> <td>Cell
A</td> <td>Cell
B</td> <td>Cell
C</td> </tr>
<tr> <td>Cell
D</td> <td>Cell
E</td> <td>Cell
F</td> </tr> </table> </p> </card> </wml>
The
result of the above WML example in some mobile phone emulators is
shown below:
 Sony
Ericsson T610
|
 Sony
Ericsson T68i
|
 Nokia
Mobile Browser 4.0
|
WML
allows you to set the horizontal text alignment of a column in a
table. The align attribute of the <table> tag is used
for such purpose.
Now
let's say your table has three columns. To specify the horizontal
text alignment of the columns, you need to assign three letters to
the align attribute. Each letter represents the horizontal
text alignment of a column. The letter can be L, C, or R. Their
meanings are shown in the following table:
Letter
|
Meaning
|
L
|
Left
alignment
|
C
|
Center
alignment
|
R
|
Right
alignment
|
If
you want the following settings to be applied to your table:
First
table column -- Left-aligned
Second
table column -- Center-aligned
Third
table column -- Right-aligned
Then
you should set the value of the align attribute to LCR.
The
following example can help you understand better what we are talking
about:
(tablesEg2.wml)
<?xml
version="1.0"?> <!DOCTYPE wml PUBLIC
"-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">
<wml> <card
id="page1" title="Table in WML"> <p> <table
columns="3" align="LCR"> <tr> <td>Col
1</td> <td>Col 2</td> <td>Col
3</td> </tr>
<tr> <td>A</td> <td>B</td> <td>C</td> </tr>
<tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table> </p> </card> </wml>
The
result of the above WML example in mobile phone emulators is shown
below. As you can see, the first table column is left-aligned, the
second table column is center-aligned and the third table column is
right-aligned.
 Sony
Ericsson T610
|
 Sony
Ericsson T68i
|
 Nokia
Mobile Browser 4.0
|
Note
that WML does not allow the nesting of tables, which means the
following example markup is invalid in WML:
<table
columns="1"> <tr> <td> <table
columns="1"> <tr> <td>Hello,
welcome to our WML
tutorial.</td> </tr> </table> </td> </tr> </table>
Feedback Form ( ExpandCollapse)
|