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:

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>


Previous Page Page 15 of 50 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.