HTML Tables Within Tables - html

Question

I am a bit of a noob with HTML and CSS. I am wondering what is the best way to:
1) Arrange 4 tables on a page in a square formation -- ie, each table is a quadrant, or
2) Put 4 tables within another table.
Any advice is appreciated.
Regards.

Answer 1

If you're want to split the page to a 2X2 table best way is to use Divs (also easier to apply css on divs)
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-1
</div>
<div style="float:left; width:50%">
x-2,y-1
</div>
<div style="clear:both"></div>
</div>
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-2
</div>
<div style="float:left; width:50%">
x-2,y-2
</div>
<div style="clear:both"></div>
</div>
http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables

Answer 2

To answer the "Put 4 tables within another table." part of your question: as Jonthan Sampson said in his comment to your quesiton: create one table with two rows and two cells per row. In each of these cells, put one table within the td tags:
<table>
<tr>
<td>
<table>
<tr>
<td>
Table 1/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 2/4
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Table 3/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 4/4
</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 3

<table>
<tr>
<td> Top left Information Here </td>
<td> Top right Information here </td>
</tr>
<tr>
<td> Bottom left Information Here </td>
<td> Bottom right Information here </td>
</tr>
</table>​
JSFiddle
http://jsfiddle.net/DNYwc/

Answer 4

This seems to be reducible to the question “to display four elements in a two by two formation, should I use a table or some other method?” Whether the elements are tables or something else seems to be irrelevant to the basic question.
If the four elements logically constitute a 2 × 2 table, make it such a table in markup. If the two by two formation is just the preferred rendering in some situations, then you could some other approach, such as floats, something like
<div style="float: left">A</div>
<div>B</div>
<br clear=all>
<div style="float: left">C</div>
<div>D</div>
<br clear=all>
This would result in a 2 by 2 rendering if there is enough width, but in a narrow window, A, B, C, D would appear in a 4 by 1 formation. If you use a table, then a narrow window would force horizontal scrolling. The choice really depends on which alternative is better for the content and structure.

Answer 5

Honestly, it sounds like you want 1 table, 2 rows, 2 cells per row.
<table>
<tbody>
<tr>
<td>Top Left</td><td>Top Right</td>
</tr>
<tr>
<td>Bot Left</td><td>Bot Right</td>
</tr>
</tbody>
</table>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/
If it's layout you're after, there's a better way...
Please note that although this may give you the layout structure you're desiring, using tables for non-tabular data (think of a spreadsheet) is an illegal use of the element.
If you're attempting to layout a page, there are far better options available to you. You could use four div elements, positioned in a fixed fashion to the viewport:
<div class="panels">
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Left</div>
<div>Bottom Right</div>
</div>
​​​​​​
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/2/