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:

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:

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.

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>

Previous Page

Page 15 of 50

Next Page