Html – Render HTML table on Windows Mobile 6.0

htmlwindows-mobile

I am trying to render a HTML table to display on Windows Mobile 6.0 device. I use Mobile Device Emulator to view the output. Here is my html, am I missing something? The table display each cell on it own row.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
           "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title></head>

<body> 
   <form name="form1" method="post" action="Default.aspx" id="form1"> 
      <div>   
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
              value="/wEPDwULLTE2MTY2ODcyMjlkZAKh+guFjex39kxMbH4g4N/KD/cn" /> 
      </div>

      <div> <ul><li>Test</li><li>Blah12</li></ul>

      <table border="1">
        <tbody>
         <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr>
         <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr>
        </tbody> 
      </table> 

      </div> 
    </form> 
</body> 
</html>

@DanHerbert's answer is user can switch the browser on the phone to "Desktop" mode. The second part of this question is there a meta tag to instruct the mobile to use "Desktop" mode instead of "Column" mode?

Best Answer

Try changing the View mode of the browser.

Windows mobile will try to "optimize" table layout if you use the default "Single Column" (or it might be called "One Column") view.

You should make sure the browser is set to use "Desktop" mode or else the columns will display incorrectly.

UPDATE:
To do this through a meta tag, add the following to your page:

<meta name="MobileOptimized" content="width">

Taken from Microsoft's documentation:

http://msdn.microsoft.com/en-us/library/ms890014.aspx