I have a table which I'm going to try to represent this way:
-------------------------
| L1 | R1 |
------------------------
| L2 | R2 |
-------------------------
My code is as follows:
<div data-role="content" id="div1" align="top" style="padding:3 !important;" >
<table border="0" align="CENTER" cellspacing="0" width="100%" style="vertical- align: text-bottom;" >
<tr>
<td></td>
<td>
<div id="question1" class="question">
<input type="text" id="question" />
<Style>
#question{
font:5px;
font-family:verdana;
}
</style>
</div>
</td></tr><tr>
<td width="50"><img id="img2" width="40" height="36" style="float:right; margin-top: 0px;" ></td>
<td style="text-align:center;">
<div class="ui-grid-b" >
<div class="ui-block-a"><button id="button1" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-b"><button id="button2" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-c"><button id="button3" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
</div>
</td>
</tr>
</table>
</div>
So basically what I'm trying to do is, there is no section L1 in my table. R1 has data and so has R2. There is an image in L2. What I'm trying to do is remove the division between L1 and L2 and the image in L2 should be centered on the table and not just in the TD for L2. How do I do that?
Also the other question I have is, in the following line of code:
<input type="text" id="question" />
when the value is populated and when I view this in a mobile, the text sometimes goes to the next line. I thought textarea was the only HTML tag which has multiline. Not sure why the text here is going multi-line and how do I avoid it?
See this bit just under <table border="0"....
<tr><td></td>
Change that to
<tr>
<td width="50" rowspan="2">
<img id="img2" width="40" height="36" style="float:right; margin-top: 0px;">
</td>
And then get rid of the <td></td> that originally held that image.