How do you center several tables side by side on a single row?

[vanbc]

Hi,
I have 4 tables that need to be on a single row and centered on the
page. The easiest way I've done it is to nest the 4 tables in a table.

Would anyone know how do this without nesting as some validators
won't pass it.

using "float: left;" will push all the tables to the left, but i want
it centered. Anyone have any suggestions?

Some sample code - the width: 200px helps a bit...still nothing as
nice nesting tables:

<div style="text-align: center; ">
<div style="margin: 0 auto; width: 200px; text-align: left; ">
<table style="background: #99FF33; float: left;">
<tr>
<td>one AAA
</td>
<td>two
</td>
</tr>
<tr>
<td>three
</td>
<td>four
</td>
</tr>
</table>
<table style="background: yellow; float: left;">
<tr>
<td>one
</td>
<td>two
</td>
</tr>
<tr>
<td>three
</td>
<td>four
</td>
</tr>
</table>
</div>
</div>

 

[Beauregard T. Shagnasty]

I have 4 tables that need to be on a single row and centered on the
page. The easiest way I've done it is to nest the 4 tables in a
table.

Four tables side-by-side? Hey, I have never seen any kind of tabular
data that needed four of them in one horizontal row.

Methinks your design needs a Rethink. If you could give a URL with some
real-world content, perhaps someone would have a Better Ideaâ„¢.

 

[Paul Watt]

Four tables side-by-side? Hey, I have never seen any kind of tabular
data that needed four of them in one horizontal row.

Methinks your design needs a Rethink. If you could give a URL with some
real-world content, perhaps someone would have a Better IdeaT.

Just as an untested idea, could you have a horizonatal list with the tables
as list items?

--
Cheers

Paul
le singe est dans l'arbre
http://www.paulwatt.info

 

[dorayme]

Hi,
I have 4 tables that need to be on a single row and centered on the
page. The easiest way I've done it is to nest the 4 tables in a table.

Would anyone know how do this without nesting as some validators
won't pass it.

using "float: left;" will push all the tables to the left, but i want
it centered. Anyone have any suggestions?

Yes, right, nesting tables has this advantage: It is a nice
object of the phrase, "you might as well be hung for a sheep as
for a lamb"

Why would not floats work? Have you tried a wrapper div for the
4, the wrapper to be centred?

 

[vanbc]

Yeah, it's pretty rare to have tables side by side. The one I'm
working on is a calendar function that returns a table. 7 columns
representing each day and a row for each week.

I'm trying to figure out how to align a couple months in a single row
eg. April, May, June. It seems that you need specify the width or
float: left goes all the way to the left edge. As I mentioned before
nesting tables works perfectly.

Here's some code for a horizontal list with tables inside (as
suggested by a previous poster) that somewhat works...but not in IE.

thx again

<div align="center" style="background:yellow;">
<ul style="background: pink; padding: 0; margin: 0;">
<li style="display: inline;list-style-type: none; background: green;">
<table style="background: purple;display: table-row;">
<tr>
<td>one
</td>
<td>two
</td>
</tr>
<tr>
<td>three
</td>
<td>four
</td>
</tr>
</table>
</li>
<li style="display: inline;list-style-type: none; background: blue;">
<table style="background: orange;display: table-row;">
<tr>
<td>one
</td>
<td>two
</td>
</tr>
<tr>
<td>three
</td>
<td>four
</td>
</tr>
</table>
</li>
</ul>
</div>

 

[Harlan Messinger]

Hi,
I have 4 tables that need to be on a single row and centered on the
page. The easiest way I've done it is to nest the 4 tables in a table.

Would anyone know how do this without nesting as some validators won't
pass it.

Validators have nothing against table nesting because nothing in HTML
syntax prohibits it. If the validators weren't passing your code, it's
because there were mistakes in it.

using "float: left;" will push all the tables to the left, but i want it
centered. Anyone have any suggestions?

Some sample code - the width: 200px helps a bit...still nothing as nice
nesting tables:

[snip]

Without seeing the page that your code generates, I can't see what might
need to be fixed so it's hard to help you fix it.

 

[Spartanicus]

I have 4 tables that need to be on a single row and centered on the
page. The easiest way I've done it is to nest the 4 tables in a table.

Would anyone know how do this without nesting as some validators
won't pass it.

using "float: left;" will push all the tables to the left, but i want
it centered. Anyone have any suggestions?

The correct way to do this is by setting "display:inline-table" and then
"text-align:center" on the containing block element. Alas the CSS2
"inline-table" value is not supported by Mozilla or IE.

You can feed IE an "inline" value instead, IE being the badly broken
thing it is will effectively treat "inline" as "inline-table".

You can also feed Mozilla a "inline" value instead, on occasion this may
appear to result in the desired behaviour, but the snags are:

1) Mozilla will no longer accept a specified width on the table
2) A border around the table itself will collapse to the applicable
line-height (regardless of the table's content)
3) Attempting to set vertical alignment triggers a long standing Mozilla
bug that causes the tables to be displayed on top of the preceding block
level content, and the vertical alignment doesn't work in Mozilla.

http://homepage.ntlworld.ie/spartanicus/inline_tables.htm

 

[Andy Dingley]

using "float: left;" will push all the tables to the left, but i want
it centered. Anyone have any suggestions?

Wrap each <table> in a <div>, float the <div>s sideways and then align
the <table> within each <div>?

If you want tables to stay in a rectilinear grid, despite what happens
to resizing of the overall container window, then that's itself a
table. In your case it's a table of tables, and it's a legitimate use
of nested <table>s.