[Zim]

Stuggling with a layout/rendering issue...

I want to have

TABLE A TABLE B

but I always get

TABLE A
TABLE B

even if I specify widths of 10%, etc.

I do NOT want to embed these tables in another table (reasons too long to go into, and I have tried, but they'd need to be in the same TD which gives the same result shown above).

Been looking for some kind of BODY/wrap style/tag, but can't find anything... ideas?

Thanks,
Mike

[Simon Mundy]

Originally posted by Zim:
Stuggling with a layout/rendering issue...

I want to have

TABLE A TABLE B

but I always get

TABLE A
TABLE B

even if I specify widths of 10%, etc.

I do NOT want to embed these tables in another table (reasons too long to go into, and I have tried, but they'd need to be in the same TD which gives the same result shown above).

Been looking for some kind of BODY/wrap style/tag, but can't find anything... ideas?

Thanks,
Mike

< table border="0" width="100" ...etc... "style: float: left">

[Chris O'Brien]

Originally posted by Simon Mundy:
< table border="0" width="100" ...etc... style="float: left">

Fixinated.

Long day, Simon?

[Phil Sherry]

Originally posted by Black Book:
Long day, Simon?

probably a few too many VB's at the barbie

[Zim]

thanks!

Mike

[Simon Mundy]

Originally posted by Black Book:
Fixinated.

Long day, Simon?

Long year.

Originally posted by the poster formerly known as Prince:
probably a few too many VB's at the barbie

Despite enormous peer pressure I don't drink the stuff any more. It reminds me of the smell of sick that stays in your nose after a huge chunder. Misspent youth, eh?

HOWEVER... I can highly recommend James Boags, Mountain Goat or Coopers if you ever happen to stumble across 'em. And most good pilseners. And stout. And... etc... etc...

[Phil Sherry]

Originally posted by Simon Mundy:
Despite enormous peer pressure I don't drink the stuff any more. It reminds me of the smell of sick that stays in your nose after a huge chunder. Misspent youth, eh?

i've heard stories of such stuff, sure. *cough*

gimme a cold Crownie, any day. well, any day when i'm back down under. whenever that may be.

[Zim]

Ok, just to never be satisfied...

The tables now do not always wrap as they did before (which is good)
but how do I get them to "justify" within a cell?

ie. before I got
A
B
C

now I get

ABC

I'd be tickled to get

A .. B .. C (spaced to 100% width)


Thanks,
Mike

[Simon Mundy]

Originally posted by Zim:
Ok, just to never be satisfied...

The tables now do not always wrap as they did before (which is good)
but how do I get them to "justify" within a cell?

ie. before I got
A
B
C

now I get

ABC

I'd be tickled to get

A .. B .. C (spaced to 100% width)


Thanks,
Mike

What happens if all those table widths are set to 33%?

[Zim]

Well the deal is that I _may_ print up to three tables A,B,C, but in some cases the script will decide not to... so what I wanted was simply that the tables either center or justify

...A...C... or
.A.......C.

when B is not printed.

But I ran across problem #1 which was that the tables seem to inherently want to render on a new line.

A float of left gets them all on one line, which is "ok". A float of center (or was it middle) just gives me

...A...
...B...
...C...

So what I want is to simply tell the $%@% things to stop deciding to add a new-line and just print as space permits.

I can't use 33% or 50% b/c I am not sure how many tables will print (it is based on user permissions in the script).

Mike

[Simon Mundy]

If the output of the tables is scripted, then why can't you determine how many tables will be output? You can simply apply 100/table_count to the width for each one.

[Zim]

Originally posted by Simon Mundy:
If the output of the tables is scripted, then why can't you determine how many tables will be output? You can simply apply 100/table_count to the width for each one.

In theory yes. In practice that will be a fair bit of recoding.

Simply put, I wanted to stop the tables from having their (default?) behaviour of starting each on "new line". That is the answer I am looking for.

I have a partial solution float:left, seeing if there is one better.

Mike

[Alex Duffield]

Originally posted by Zim:
Well the deal is that I _may_ print up to three tables A,B,C, but in some cases the script will decide not to... so what I wanted was simply that the tables either center or justify

...A...C... or
.A.......C.

when B is not printed.

But I ran across problem #1 which was that the tables seem to inherently want to render on a new line.

A float of left gets them all on one line, which is "ok". A float of center (or was it middle) just gives me

...A...
...B...
...C...

So what I want is to simply tell the $%@% things to stop deciding to add a new-line and just print as space permits.

I can't use 33% or 50% b/c I am not sure how many tables will print (it is based on user permissions in the script).

Mike

seems to me you just need to add a margin

Code:
.thestyle {
	float: left;
	margin-right: 10px;
}

[Simon Mundy]

OK, here's a step in the right direction. This doesn't work in IE PC at the moment (that's probably a whole new world of pain) but this seems to do what you want:-

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
</head>
<body>

<div style="margin: 0 auto; text-align: center">

<table style="background: red; display:inline-table; margin: 0 auto">
	<tr>
		<td>A test one</td>
	</tr>
</table>
<table style="background: green; display:inline-table; margin: 0 auto">
	<tr>
		<td>A test one</td>
	</tr>
</table>
<table style="background: blue; display:inline-table; margin: 0 auto">
	<tr>
		<td>A test one</td>
	</tr>
</table>

</div>

</body>
</html>

[Zim]

No love under Mozilla 1.4 (what we have on Suns at work). I get

A test one
A test one
A test one

all centered on the page.



Mike

[Synotic]

I realize that you said you didn't want to put all your tables into another container table, for reasons not mentioned (perhaps it's too messy for you), but seeing as you at least tried, it would seem that there are no technical reasons that you can't do it. I'm also unsure why "they have to be in the same td" or what you're referring to exactly. Either way, I'm fairly certain that the effect you're going for is impossible without using embedded tables, or at least one container table— the contents can be divs, paragraphs, etc... whatever you want. If I understand what you're trying to do, the following code should fulfill your needs... the container tables should be able to accomodate any number of content cells, which in turn contain tables. But again, there might be reasons why you don't want to do this.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />

		<title>tables</title>

		<style type="text/css">
			body { margin: 1em; background: #bbb; font: 12px 'Trebuchet MS' }
				table { width: 100%; margin: 0 0 1em; background: #fff }
					table table { margin: 0 }
					.table1 { background: red }
					.table2 { background: green }
					.table3 { background: blue }
		</style>
	</head>

	<body>
		<table border="1" cellpadding="5" cellspacing="0">
			<tr>
				<td><table border="1" class="table1"><tr><td>table 1</td></tr></table></td>
			</tr>
		</table>

		<table border="1" cellpadding="5" cellspacing="0">
			<tr>
				<td><table border="1" class="table1"><tr><td>table 1</td></tr></table></td>
				<td><table border="1" class="table2"><tr><td>table 2</td></tr></table></td>
				<td><table border="1" class="table3"><tr><td>table 2</td></tr></table></td>
			</tr>
		</table>

		<table border="1" cellpadding="5" cellspacing="0">
			<tr>
				<td><table border="1" class="table1"><tr><td>table 1</td></tr></table></td>
				<td><table border="1" class="table2"><tr><td>table 2</td></tr></table></td>
			</tr>
		</table>
	</body>
</html>

[Zim]

Thanks, I appreciate the efforts.

What I'm trying to do is (but have been trying to avoid getting into detail), is have a container/wrapper table that has several rows. What I'm trying to avoid is the restriction on columns lining up as for this script, I will have a variable # of potential items/columns on each row (depending on who is logged in and what permissions they have). These items may be of differing width, so shifting from column to column can have a big impact on overall rendering. And I'd like each of these items to be visually separated, as a cell border would do.

My thought was to instead make each row one single TD and then make each item a table inside the cell. Each table would have its own border (one goal accomplished), and if they would just bloody well not try to start on new lines then I could print a variable # of tables in ech row, center them up, and the result would be reasonably aesthetic (IMO).

B/C I have an unknown # of items, precomputing hardcoded widths would be ugly.

Perhaps instead of tables I could use SPANs or DIVs, or something.. assuming those can have borders (will have to go check).

[edit: looks like DIVs want to new-line too, but not SPANs. Quick hack ugly code..

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />

		<title>tables</title>
</head>
<body>

<table border = 1 width=95%>
<tr>
<td> 1 </td>
<td> 2 </td>

</tr>

<tr>
<td colspan = 2 align=center>
<span style="border:1; background:red;">
1
</span>
<span style="border-style: solid; border-width: 10px; border-color: red; width:200px; background:green;padding: 2pt; margin: 30pt;">
2
</span>

</td>
</tr></table>
	</body>
</html>

but width for SPANs doesn't seem to work as % (at least not in Moz 1.4)
Cheers,
Mike

[Zim]

Just to add insult to injury...

So the SPAN thing seemed like it might work... til I put it in my code...

it would seem that FORMs that should appear inside the SPAN, completely ignore it?

ie.

Code:
<span style='border-style: solid; border-width: 1px; border-color: black; background:green; padding: 2px; margin: 20px;'>
hello
<form ....>

</form>
</span>

only the word "hello" appears inside the span colored box.



Mike

[Synotic]

I know this is going to seem really obnoxious but I think it would be fairly beneficial to read through BrainJar's CSS Positioning guide. I've also found WestCiv's [urll=http://www.westciv.com/style_master/academy/css_tutorial/]CSS Tutorial[/url] particularly useful... it's a full reference but it can be read linearly. I think if you dedicate an hour or so to reading those two guides that a lot of your problems will go away a lot more easily.

In direct regards to your problem... do you have an image/mockup of what you're trying to do? If you only give us part of the problem... and then say it doesn't work for the full implementation of the problem which we aren't exactly sure of, it makes it hard to give a working solution. Often a technique is very dependant on the specifics of a design/layout that you're trying to achieve. For what it's worth, what I can picture through your written descriptions, it doesn't seem like it's too hard to do at all... the main problem is that I'm/we're not entirely sure what you're trying to do.

P.S. Oh and just as an example of what reading through those guides will tell you... spans are inline objects and forms are block elements. You can't put a block element in an inline element... like putting a paragraph in an "emphasis" markup. Validating your code also probably wouldn't hurt— it'd tell you of problems like putting a form in a span.

[Zim]

I plan to start looking into the CSS "way" of tables, but that will be a somewhat massive overhaul..

in the short term, here is sample code

Code:
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>

<table summary="nav" border="1" width="95%">
<tr><td colspan='3'>something wide</td></tr>
<tr><td colspan='3' align='center'>
<table border='1' style='float:left;'>
<tr><td align='center'>
<form method="post" action="script.cgi">
<input type="hidden" name="action" value="2" />
<input type="submit" value="Create Record" /></form>
</td></tr></table>
<table border='1' style='float:left;'><tr><td align='center'>
<form method="post" action="script.cgi">
<input type="hidden" name="action" value="3" />
<select name="edit_type">
<option value="edit" name="edit" selected="selected">Edit</option>
<option value="view" name="view">View</option>
</select>
<input type="submit" value="Record" />
<input type="text" value="" size="5" name="id" /></form>
</td></tr></table>
<table border='1' style='float:left;'><tr><td align='center'>
<form method="post" action="script.cgi">
<input type="hidden" name="action" value="4" />
<input type="submit" value="stats" /></form>
</td></tr></table>
</td></tr>

</table>
</html>
</body>

What I'd like is to find a way to move the 3 forms (wrapped in tables right now) off the left, centered, and maybe even spaced as 3 TDs would do (again I prefer not to use TD b/c in some cases I may only print 2 of these, or 1. Also want a visual border around each (hence the initial use of TDs.

In Moz 1.4 this currently renders as
--------------------------------------------
something wide ............................ |
---------------------------------------------
button button button .....(lots of space)...|
---------------------------------------------

Mike

[Zim]

It would appear that

display:inline

is what I want to stick on the tables.

Mike