Table Problem

Tygra · 08-02-2009

Hi all, I'm creating a table, but something isn't working right. I'm specifying for there to be a border at the bottom of every table row and a border at the top, but I'm only getting a border at the very top and bottom of the table. I want all the rows to have border's underneath them.

Here, this is what I'm getting...

Here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Table Example</title>
<style type="text/css">
body {background: black;
color: white;}

table {border-top: 4px ridge white;
padding: 4px;
border-bottom: 4px ridge white}

</style>

</head>
<body>
<table cellspacing="15">
<tr align="left"><th colspan="2">Table 10.5</th><th colspan="2" align="left">Values for the white-space Property</th></tr>
<tr align="left"><th colspan="2">Value</th><th colspan="2">Effect</th></tr>
<tr align="left"><td colspan="2">normal</td><td colspan="2">Do Normal word wrapping and whitespace condensing.</td></tr>
<tr align="left"><td colspan="2">nowrap</td><td colspan="2">Condense whitespace, but don't wrap lines.</td></tr>
<tr align="left"><td colspan="2">pre</td><td colspan="2">Don't condense whitespace, and wrap lines as in the source markup.</td></tr>
</table>
</body>
</html>

Help would be very much appreciated. Thanks...

Sir Trews · 08-02-2009

Hello Tygra!

I've no doubt that our talented Tech and helpful members will have an answer for you.

I'll mark this as open to encourage all to come and take a look.

I thank you for your patience

Tygra · 08-03-2009

Thanks Sir Trews, doesn't look like anyone has the answer yet though.

upgrader · 08-05-2009

Hi Tygra,

You are only getting borders at the top and bottom of the whole table, as that is the CSS selector you have used for those properties. To do it for table rows you will need to add this code to your CSS.

Code:

tr {
border-top: 4px ridge white;
border-bottom: 4px ridge white;
}

You should notice that now we are using tr, so the CSS will be applied to that HTML property.

Tygra · 08-05-2009

Upgrader, I already tried that and then tried it again after reading your response and it's not working. I'm still just getting borders at the top and bottom.

Thinking about it though it should definatley work using "tr" as the selector. So I don't know why it's not working.

What do you think?

DarkLord7854 · 08-05-2009

You can't put CSS styles on TRs, you need to use TD/THs to do it, I suggest changing your write-up to this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Table Example</title>
        <style type="text/css">
        body {
            background-color: #000000;
            color: #FFFFFF;
        }
        
        table {
            border-top: 4px ridge #FFFFFF;
            padding: 4px;
            border-bottom: 4px ridge #FFFFFF
        }
        
        th, td { 
            border-top: 4px ridge #FFFFFF;
            border-bottom: 4px ridge #FFFFFF;
            padding-bottom:10px;
            padding-left:10px;
            padding-top:10px;
        }
        </style>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0">
            <tr align="left">
                <th colspan="2">Table 10.5</th>
                <th colspan="2" align="left">Values for the white-space Property</th>
            </tr>
            <tr align="left">
                <th colspan="2">Value</th>
                <th colspan="2">Effect</th>
            </tr>
            <tr align="left">
                <td colspan="2">normal</td>
                <td colspan="2">Do Normal word wrapping and whitespace condensing.</td>
            </tr>
            <tr align="left">
                <td colspan="2">nowrap</td>
                <td colspan="2">Condense whitespace, but don't wrap lines.</td>
            </tr>
            <tr align="left">
                <td colspan="2">pre</td>
                <td colspan="2">Don't condense whitespace, and wrap lines as in the source markup.</td>
            </tr>
        </table>
    </body>
</html>

It's also always a good idea to do proper indentation for easier reading and to use hex code for colors.

You can, and should, add classes and IDs to turn off borders on a certain row, etc, so it looks nicer, I just did that in a few mins to show you.

Tygra · 08-05-2009

Thing is though DarKLord that by using the "th, td" selectors gives me borders that aren't as wide as the very top border and very bottom, they indent other side by about 5 pixels. What I'm trying to create is borders the same width all the way down.

Thanks for your help though.

08-02-2009	#1
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Table Problem Hi all, I'm creating a table, but something isn't working right. I'm specifying for there to be a border at the bottom of every table row and a border at the top, but I'm only getting a border at the very top and bottom of the table. I want all the rows to have border's underneath them. Here, this is what I'm getting... Here is the code. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Table Example</title> <style type="text/css"> body {background: black; color: white;} table {border-top: 4px ridge white; padding: 4px; border-bottom: 4px ridge white} </style> </head> <body> <table cellspacing="15"> <tr align="left"><th colspan="2">Table 10.5</th><th colspan="2" align="left">Values for the white-space Property</th></tr> <tr align="left"><th colspan="2">Value</th><th colspan="2">Effect</th></tr> <tr align="left"><td colspan="2">normal</td><td colspan="2">Do Normal word wrapping and whitespace condensing.</td></tr> <tr align="left"><td colspan="2">nowrap</td><td colspan="2">Condense whitespace, but don't wrap lines.</td></tr> <tr align="left"><td colspan="2">pre</td><td colspan="2">Don't condense whitespace, and wrap lines as in the source markup.</td></tr> </table> </body> </html> Help would be very much appreciated. Thanks...

08-02-2009	#2
Sir Trews Moderator Join Date: Mar 2006 Location: West Coast.. you pick... Posts: 2,618 PC Experience: Back on the West side	Re: Table Problem Hello Tygra! I've no doubt that our talented Tech and helpful members will have an answer for you. I'll mark this as open to encourage all to come and take a look. I thank you for your patience __________________ Saesa omentien lle (Pleasure meeting you) ◊*Prework* ◊ *PC Specs ◊* *Da Rulez◊Donation!* ≈Toshiba≈GRC≈CCleaner≈WCG≈Memtest≈Speedfan≈**

08-03-2009	#3
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Re: Table Problem Thanks Sir Trews, doesn't look like anyone has the answer yet though.

08-05-2009	#4
upgrader Tech Support Team Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,309 PC Experience: Some Experience	Re: Table Problem Hi Tygra, You are only getting borders at the top and bottom of the whole table, as that is the CSS selector you have used for those properties. To do it for table rows you will need to add this code to your CSS. Code: tr { border-top: 4px ridge white; border-bottom: 4px ridge white; } You should notice that now we are using tr, so the CSS will be applied to that HTML property. __________________ PCHF Rules--PCHF Prework--PCHF Downloads

08-05-2009	#5
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Re: Table Problem Upgrader, I already tried that and then tried it again after reading your response and it's not working. I'm still just getting borders at the top and bottom. Thinking about it though it should definatley work using "tr" as the selector. So I don't know why it's not working. What do you think?

08-05-2009	#7
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Re: Table Problem Thing is though DarKLord that by using the "th, td" selectors gives me borders that aren't as wide as the very top border and very bottom, they indent other side by about 5 pixels. What I'm trying to create is borders the same width all the way down. Thanks for your help though.

Similar discussions...
Thread	Thread Starter	Forum	Replies	Last Post
Solved: Issue with HTML table	pandattackannon	Web Design	9	05-17-2009 08:50 AM
Can someone fix this xml table for me please?	jay2	Programming	3	04-27-2009 01:59 PM
Solved: html table	jenny_smith188	Web Design	8	03-08-2009 04:53 PM
Solved: Text into a Table	redders	Office Software	3	06-23-2008 11:40 PM
fetch array in a 3x3 table	spellbyte	Web Design	2	01-07-2007 12:52 PM

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode