CSS and tables

bluedollar · Aug 10, 2003

I have created a website and have hard coded all the formatting into the HTML, what I want to do is use css to achieve what I am doing at the moment. However I am having problems with text that is displayed in tables, eg:

================================================
NON CSS

echo'<P>Dates: <br><br> <table border="1">';

echo'<tr><th bgcolor="#999999"> Start Date:</th><td>'.$date_start[2].'/'.$date_start[1].'/'.$date_start[0].'</td></tr>';

echo'</table>';

===============================================
USING CSS

Does not display the same as:

echo'<style type="text/css">';
echo'';
echo'</style>';

echo'<P>Dates: <br><br> <table border="1">';

echo'<tr><th><h2>Start Date:</h2></th><td>'.$date_start[2].'/'.$date_start[1].'/'.$date_start[0].'</td></tr>';

echo'</table>';

============================================

The first example shows as:

--------------------------------------
:gggg header ggggg : :
--------------------------------------

g = gray = #999999

The second example shows as:

--------------------------------------
: gggg header ggggg : :
: : :
--------------------------------------

Question

- What can I do to rectify this.

Any help would be greatly apprecaited.

Thanks

Dan

Vragabond · Aug 10, 2003

there are a lot of attributes set to h2 tag, which you did not define. they're probably causing problem. replace H2 in style with TH, like so

<style type="text/css">

</style>

then get rid of h2 tag in the code:

echo'<tr><th>Start Date:</th><td>'.$date_start[2].'/'.$date_start[1].'/'.$date_start[0].'</td></tr>';

btw, you don't have to echo/print entire site with php. you can open/close php as many times as you like. just use it for code

cucurig1 · Aug 11, 2003

Try this:

http://www.sitepoint.com/books/css1/.

You'll see there the presentation of the book "HTML Utopia: Designing Without Tables Using CSS" by Dan Shafer.
"Now You Too Can Easily Create Modern ‘Table-free’ Websites Using CSS from scratch".
You can also download a few chapters in pdf format for free.
Hope to be of great help.

ChrisHunt · Aug 11, 2003

You're getting different results because you're doing different things. This is your HTML:
[tt]
<th bgcolor="#999999">Start Date:</th>
[/tt]
This, in effect is your CSS version:
[tt]
<th><h2 style="background-color:#999999">Start Date:</h2></th>
[/tt]
The CSS is being applied to a bit of text within the table cell, the bgcolor attribute was being applied to the whole cell.

What you need to do is apply your CSS to the cell instead, something like this:
[tt]
<style type="text/css">
.formlabel {background-color: #999999;}
</style>

...

<th class="formlabel">Start Date:</th>
[/tt]
Note that I'm using a named class rather than linking it to a particular tag, and that I've resisted the temptation to call the class "greybg", naming it after what it's used for rather than what it looks like. That way, if you decide to change the colour scheme your class names still make sense.

Incidentally, you should really put your CSS declarations in a seperate stylesheet file, rather than putting them inline in the <head> of each page - it's much easier to maintain that way.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS and tables

bluedollar

Programmer

Vragabond

Programmer

cucurig1

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor