Question about tables

[Freeman]

I would like to build two tables side by side verticaly on a page. I can't figure out the correct scripting. I can make one table on one side but then the other table starts at the bottome of the other one. even if i align top or center or right. I would also like to make the table borders invisible. Thanks for the help. JF

[cam]

By default tables will align vertically. Try making one large table with 2 cells side-by-side. Put one of your content tables inside each cell and set borders="0". You can control size, borders, color, etc individually.

cam

[jscheuer1]

Tables are bad enough but, tables within tables are even worse. The more tables, the slower your page loads, especially if they are nested tables. If you give the tables the display property 'inline' you will not need to confine them in another table to get them side by side:

<table style="display:inline;">

That is, as long as their combined width isn't greater than the window width, use percentages that add up to a total of 90%, and it won't be, unless you have some huge images in them.

[Freeman]

<table align="top">

<caption align="center"><b><font size="+2" color="003466">Junior Varsity</font></b></caption>
<tr>
<th width="100">Name</th>
<th>Grade</th>

That is what the first table starts with. After I close the table I started a new one:

<table align="right">

<table style="display:inline;">

<caption align="center"><b><font size="+2" color="003466">Varsity</font></b></caption>
<tr>
<th width="100">Name</th>
<th>Grade</th>
Is this correct, cause if it is it didn't work.

[jscheuer1]

Both tables need the style="display:inline;" set for them.

[cam]

"Mad Perfesser" really isn't so mad. Obviously I wasn't thinking outside the box (table). You've also got an extra table tag in there, Freeman. If you don't want the tables flush against each other and the the left side of the page you can position them thus ...

<table style="display:inline; position:relative; top:0px; left:100px;">
<caption align="center"><b><font size="+2" color="003466">Junior Varsity</font></b></caption>
<tr>
<th width="100">Name</th>
<th>Grade</th>

<table style="display:inline; position:relative; top:0px; left:500px;">
<caption align="center"><b><font size="+2" color="003466">Varsity</font></b></caption>
<tr>
<th width="100">Name</th>
<th>Grade</th>

Ain't CSS wunnerful?

[Freeman]

Thanks for all the help. If you want to see the page and soon to be pages, its at http://www.campion.net/Sports/ms.htm Thanks alot for the help. JF

[mwinter]

Tables are bad enough but, tables within tables are even worse.

Certainly. Least of all, it becomes a maintainence nightmare trying to find parts that need to be changed in an update, and seeing how different content regions relate to one another.

If you give the tables the display property 'inline' you will not need to confine them in another table to get them side by side:

Tables do not fit the usual distinction between block and in-line boxes. In fact, in conforming browsers the table element will have the display property value, table, which indicates, in part, the special semantics that tables possess. Using inappropriate values will break rendering.

Ideally, one could use the inline-table value, but I believe only Opera understands it. Probably the next best solution is to float one, or both, tables and giving them explicit widths.

Mike