Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How do you center several tables side by side on a single row?

Reply
Thread Tools

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

 
 
vanbc
Guest
Posts: n/a
 
      08-01-2006
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>
 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      08-01-2006
vanbc wrote:

> 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™.

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
 
 
 
Paul Watt
Guest
Posts: n/a
 
      08-01-2006



"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:VkJzg.202965$(E-Mail Removed)...
> vanbc wrote:
>
>> 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 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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      08-01-2006
In article <Q5Jzg.297991$Mn5.19008@pd7tw3no>, vanbc <(E-Mail Removed)>
wrote:

> 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?

--
dorayme
 
Reply With Quote
 
vanbc
Guest
Posts: n/a
 
      08-01-2006
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>
 
Reply With Quote
 
Harlan Messinger
Guest
Posts: n/a
 
      08-02-2006
vanbc wrote:
> 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.
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      08-02-2006
vanbc <(E-Mail Removed)> wrote:

>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/spartani...ine_tables.htm

--
Spartanicus
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      08-02-2006

vanbc wrote:

> 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
RDOC: several related modules in several C files Victor \Zverok\ Shepelev Ruby 3 03-16-2007 04:15 PM
Can you spread our music library with Winodws Media Center over several drives? Marc Computer Support 0 11-01-2006 03:43 PM
Naming of core NASA center with the words "Mission Control Center" & mass use of religious anthem sounding word "Mission" in Context of Space Exploration & the Moon Landing Hoax moonlandinghoaxreligious@yahoo.com Digital Photography 0 09-27-2005 08:28 PM
best way to extract the data from several tables into a file mike hengins Java 11 08-19-2005 05:18 AM



Advertisments