Welcome to Developer's Home Monday, April 21, 2014
Home - DevelopersHome.com

WML Tables


Preferences - Do not show ads

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>


Page 15 of 50 Previous Page | Next Page
Contents at a Glance
Print this Web Page | | Back to Top
Custom Search

Feedback Form (Expand)

What do you think about this web page?






WML Tutorial Table of Contents WML Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page