View Full Version : Need help with table and cell width.

04-09-2011, 03:05 AM
Hi all,

I am trying to make a webpage that will fit an iphone screen: 320x480px.

My page consists of a table with 2 rows, 3 columns. Each cell has an image in it, and the images are sized at 200x200px. They are larger than needed in the off chance that the website is visited on the iPad.

My goal was to create the table in such a way that it get the width of the device the webpage is being loaded on using the following HTML Meta tag:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Unfortunately that doesn't really fix the issue as the table is still too large for the screen and one has to scroll to the right and to the bottom.

My next idea was to confine the table to a fixed size of 320px wide and forget about iPad users. Hence I incorporated the below CSS and HTML:

CSS code:

body {
font-family: Helvetica, Arial;
-webkit-user-select: none;
margin: 0 auto;
width: 320px;

HTML code:


<table border="0" cellspacing="0" cellpadding="0" bgcolor="#3399ff">
<td><img id="blue0" onclick="blueClick(0)" /></td>
<td><img id="blue1" onclick="blueClick(1)" /></td>
<td><img id="blue2" onclick="blueClick(2)" /></td>
<td><img id="blue3" onclick="blueClick(3)" /></td>
<td><img id="blue4" onclick="blueClick(4)" /></td>
<td><img id="blue5" onclick="blueClick(5)" /></td>

Unfortunately this doesn't work as when I test with my browser the width is not 320px.

Therfore, is there a way to set each cell of the table as being 33% of the device width?

Any help will be appreciated. Thank you.

04-09-2011, 05:13 PM
Try to add the width="320" attribute in <table> tag, then width="33%" in each <td>, or width="33%" in the <img> tag.