Help with html table layout - html

Question

I want to show the below layout using html tables.
foo : jack
products : bag
bat
ball
shoes
blah : olah
I tried this but its not working as my expectations.
<table border="1">
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
<tr>
<th>row 1</th>
<td>
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
</td>
</tr>
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
</table>

Answer 1

Does this have to be a table? It seems that something like a definition list might be more appropriate to your usage, so I'd suggest the following as an option:
HTML:
<dl>
<dt>Foo:</dt>
<dd>Jack</dd>
<dt>Products:</dt>
<dd>Bag</dd>
<dd>Bat</dd>
<dd>Ball</dd>
<dd>Shoes</dd>
<dt>Blah:</dt>
<dd>Olah</dd>
</dl>
CSS:
dl {
width: 50%;
margin: 0 auto;
}
dt, dd {
font-size: 1em;
line-height: 1.2em;
}
dt {
width: 49%;
display: inline-block;
margin-top: 0.2em;
}
dd {
width: 49%;
display: block;
margin-left: 51%;
}
dt + dd {
display: inline-block;
margin-left: 0;
margin-top: 0.2em;
position: relative;
}
dt + dd:before {
content: " : ";
position: absolute;
left: -1em;
}
And the JS Fiddle demo.

Answer 2

Well this can be achieved by using rowspan

Answer 3

I think the problem is that, in your embedded table...
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
...you forgot to also wrap them in <td> elements:
<table>
<tr><td>foo1</td></tr>
<tr><td>foo2</td></tr>
</table>
But then, of course, you have the problem where the corresponding <th> is aligned in the middle of the table cell, instead of the top. But that can be fixed with the valign property:
<th valign="top">row 1</th>

Answer 4

<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
Produces:
The key is that the colons are in a column of their own.

Answer 5

You can handle it using many way, but i just create it in quick way.
http://jsfiddle.net/dXU8D/
<table width="300" border="1">
<tr>
<td width="88">foo      : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99">products : </td>
<td><table width="200" border="1">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td height="59">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23">blah     : </td>
<td>olah</td>
</tr>
</table>
Or you can use rowspan to achieve this.
http://jsfiddle.net/Mzyzx/
<table width="300" border="1">
<tr>
<td width="88">foo      : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td height="23">blah     :</td>
<td>olah</td>
</tr>
</table>

Answer 6

<table>
<tr>
<td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
</tr>
<tr>
<td>products </td><td>:</td><td>bag</td>
</tr>
<tr>
<td colspan="2"> </td><td>bat</td>
</tr>
<tr>
<td colspan="2"> </td><td>ball</td>
</tr>
<tr>
<td colspan="2"> </td><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
one more example to be complete. http://jsfiddle.net/2ufsD/