aligining tables

**Jmacp** · Mar 13th, 2006, 08:03 AM

Have asked this before but will try and explain better.

Have incoming data to a php file that gets output to aonther php file in html format.

So what i do is, on the first run open a txt file with a sytlesheet and 7 headers then add this to the ouputted php/html, a blank text file(flag) is then created so that this only happens on the first run so i have a heading with 7 td's. After that the php/html is opened for append and the incoming data is added.

so looks like, (these are different sizes of words and use td tags(th tags instead?)

|Head1| |Head2| |Head3| |Head4| |Head5| |Head6| |Head7|

|cell1| |cell2| |cell3| |cell4| |cell5| |cell6||cell7|
|cell1| |cell2| |cell3| |cell4| |cell5| |cell6||cell7|

and on.....
the txt file with the sytlesheet has this,

HTML Code:

<html>
<head>
<title>Title</title>
<style>

* { font-family:verdana; font-size:11px; }
body { margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; background-color: #123456; 
background-image:url('image.jpg');
	background-attachment:fixed;
	background-repeat:repeat;
}
</style>

</head>
<body>
<img src = "image.gif">

<table cellspacing="10"><tr>
<td><td >head1</td>
<td>head2</td>
<td>head3</td>
<td>head4</td>
<td>head5</td>
<td>head6</td>
<td>head7</td>
</tr></table>
<tr><td>&nbsp;</td></tr>

Now i need all cells to be a fixed width and word wrap if needed and also need to align the headers with the cells but just cant get it, all out of alignment as the incoming data's cell will reszie according to the size of the data.

any ideas?

**Merri** · Mar 13th, 2006, 08:23 AM

Originally Posted by Jmacp

Have incoming data to a php file that gets output to aonther php file in html format.

Code:

Incoming data -> PHP file -> HTML -> Another PHP file
                    ^
                    |
Get something else -+

That wasn't a very clear explanation.

Hmm. Then:

you get text file with HTML and CSS
output to HTML file
do this only once on the first run (make empty file and check for existence)
after the first run only add rows

Hmm. All this was pretty much irrelevant. Your error is simply in HTML:

Code:

</tr></table>
<tr><td>&nbsp;</td></tr>

You close a table before the end. Then you don't open up a table, but instead just add rows (which leads to broken HTML and new data is not in the same table as the headers). Now on how to solve:

You need three files: index.php is what user will use to see the table
Second file is the output of the rows, the text file. There will only be <tr><td>...</td><td>...</td></tr> rows.
Third file is the process file that adds the new rows to the text file.
The first file, index.php will contain the stylesheet, the table and the headings.
The second file is added before </table> tag in index.php

In code:

Code:

<?php
// index.php
?><html>
	<head>
		<title>Title</title>
		<style type="text/css">
* { font-family : verdana; font-size : 11px; }
body {
	margin : 10px;
	padding : 0;
	background-color: #123456;
	background-image:url('image.jpg');
	background-attachment:fixed;
	background-repeat:repeat;
}
table {
	border-spacing : 10px;
}
td,th {
	width : 14.29%
}
		</style>
	</head>
	<body>
		<img alt="" src="image.gif">
		<table>
			<tr>
				<th>head1</th>
				<th>head2</th>
				<th>head3</th>
				<th>head4</th>
				<th>head5</th>
				<th>head6</th>
				<th>head7</th>
			</tr>
<?php require_once('rowdata.txt'); ?>
		</table>
	</body>
</html>

I formatted the file closer to being valid, although it would require a DOCTYPE to validate.

**Jmacp** · Mar 13th, 2006, 09:39 AM

Thanks!

what i took from that was that i was closing the table thus when all in the same table all is aligned and it works fine, but i now obvioulsy lose the space inbetween the tables which was a nice effect for this, can i add some kind of space between what were tables so i can see the background picture through it. It wouldn't make much sense if i could but maybe you have a trick up your sleeve.

**Merri** · Mar 13th, 2006, 10:55 AM

Yes, you can do something with CSS. I haven't played much with table CSS, but if you don't have any borders, you can simply do:

Code:

th {
    padding-bottom : 20px;
}

I'm not sure if margins work. That will look bad if you have borders as it expands the cells from inside. Hmm, other solutions:

Code:

th {
    border-bottom : 20px solid white;
}

This will remove the border if there is any and turns it into a white 20px block.

**Jmacp** · Mar 13th, 2006, 11:58 AM

didnt work but never mind gave line under each th or td but were dashed(length of the th).

Have googled this last question, again cant find it.

Can i add a header images to the css, like a banner image ?

**Merri** · Mar 13th, 2006, 12:08 PM

Can you make an example image of what you want to be the end result? Might ease so I don't need to assume things

Oh, and th CSS works only if you've set the header cells as th tags and not td.

**Jmacp** · Mar 13th, 2006, 12:54 PM

well in my above example i had,

HTML Code:

<html>
<head>
<title>Title</title>
<style>

* { font-family:verdana; font-size:11px; }
body { margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; background-color: #123456; 
background-image:url('image.jpg');
	background-attachment:fixed;
	background-repeat:repeat;
}
</style>

</head>
<body>
<img src = "image.gif">

<table cellspacing="10"><tr>
<td><td >head1</td>
<td>head2</td>
<td>head3</td>
<td>head4</td>
<td>head5</td>
<td>head6</td>
<td>head7</td>
</tr></table>
<tr><td>&nbsp;</td></tr>

so the <img src = "image.gif"> loads an image which is the banner of the page, now i found a script to lets you change the css onclick of say a checkbox, so i want a different image banner for each css, i know you can change the background url from the css but how about i link,

<img src = "image.gif">

from the css otherwise, no idea how i'd use a different banner for each css.

puesdo css,

{background-image:url('rock.JPG');
background-banner:url('banner.jpg');
}

**Merri** · Mar 13th, 2006, 01:09 PM

Make it a real header in the first place:

Code:

...
    <style type="text/css">
#header {
    background : url('banner.jpg') no-repeat center;
    height : 50px;
    width : 500px;
}
    </style>
</head>
<body>
<h1 id="header"></h1>

...

Also, if the page will be available for search engines to index and/or if blind people might come in with a screen reader, you might want to set somekind of heading within the header and hide it via CSS:

Code:

HTML:

<h1 id="header"><span>This is a page</span></h1>


CSS:

#header span { display : none; }

Although screen readers might not read elements that are hidden with display : none; but that'll be a different issue and can be solved with an aural stylesheet. And a completely different thing anyways in this case.

Thread: aligining tables

Thread Tools

Display

aligining tables

Re: aligining tables

Re: aligining tables

Re: aligining tables

Re: aligining tables

Re: aligining tables

Re: aligining tables

Re: aligining tables

Posting Permissions