The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> 2 diffrent tables on one page?
fensi88
post Dec 6 2011, 03:38 PM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
I have page with 2 tables , table 1 is without border, 2nd one is with border. They are differnet width.


code for 1st table:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<style type="text/css">
body
{
background-color:green;
}
h2
{
color:yellow;
text-align:center;
font-size:30px;
}
p
{
font-family:"Times New Roman";
font-size:20px;font-weight: bold
}

table,th,td
{
border:hidden;width:40%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

img.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a:link {color:white;}    
a{text-decoration:none;cursor:crosshair;font-weight:700;}
a:visited{color:white;}
a:hover{color:red;}

</style>
</head>

<body>
<body style="text-align:center;">

<table>

<tr>
<td style='width: 15%'>
<img src="gocaavatar1.gif" alt="avatar" width="100" height="100" class="center" />
</td>
<td style="text-align:center;"><h2>HORARY SPORTS ASTROLOGY</h2></td>
</tr>
</table>

</body>


</body></html>


Code for 2st table:
CODE



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<style type="text/css">
body
{
background-color:green;
}
h2
{
color:yellow;
text-align:center;
font-size:30px;
}
p
{
font-family:"Times New Roman";
font-size:20px;font-weight: bold
}

table,th,td
{
border:1px solid white;width:30%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

a:link {color:white;}    
a{text-decoration:none;cursor:crosshair;font-weight:700;}
a:visited{color:white;}
a:hover{color:red;}

</style>
</head>

<body>

<body style="text-align:center;">

<table>

<tr>
<td style='text-align:center;'><a  href="index.html">HORARY SPORTS  
ASTROLOGY</a></td>

</tr>
</table>

</body>


</body></html>


How to merge it in one file and how to tell "page" which one style sheet to use for each table? [i]

Thanks for explanation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 6 2011, 03:51 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
You need to add a class or id element to each table, and then update the selectors in your CSS to use those class or id values. See:
http://htmlhelp.com/reference/css/structure.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fensi88
post Dec 7 2011, 05:12 AM
Post #3


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
QUOTE(Darin McGrew @ Dec 6 2011, 03:51 PM) *

You need to add a class or id element to each table, and then update the selectors in your CSS to use those class or id values. See:
http://htmlhelp.com/reference/css/structure.html


Thanks, I will try!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fensi88
post Dec 7 2011, 05:29 AM
Post #4


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
Unfortunately, I tried but did not make it. Here is my new code:
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<style type="text/css">
body
{
background-color:green;
}
h2
{
color:yellow;
text-align:center;
font-size:30px;
}
p
{
font-family:"Times New Roman";
font-size:20px;font-weight: bold
}

table,th,td
{
border:hidden;width:50%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

img.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a:link {color:white;}    
a{text-decoration:none;cursor:crosshair;font-weight:700;}
a:visited{color:white;}
a:hover{color:red;}

#table2
body
{
background-color:green;
}
h2
{
color:yellow;
text-align:center;
font-size:30px;
}
p
{
font-family:"Times New Roman";
font-size:20px;font-weight: bold
}

table,th,td
{
border:1px solid white;width:30%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

a:link {color:white;}    
a{text-decoration:none;cursor:crosshair;font-weight:700;}
a:visited{color:white;}
a:hover{color:red;}

</style>
</head>

<body>

<body style="text-align:center;">

<table>

<tr>
<td style='width: 15%'>
<img src="gocaavatar1.gif" alt="avatar" width="100" height="100" class="center" />
</td>
<td style="text-align:center;"><h2>HORARY SPORTS ASTROLOGY</h2></td>
</tr>
</table>

<id="table2">
<body style="text-align:center;">
<table>
<tr>
<td style='text-align:center;'><a  href="index.html">HORARY SPORTS  
ASTROLOGY</a></td>
</tr>
</table>


</body></html>


Do you see some errors? On first one borden is not hidden and it is not wider from 2nd one althought in code it must be? And one more problem. In MF tables are not centerd as in IE?

This post has been edited by fensi88: Dec 7 2011, 06:16 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2011, 08:35 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Yeah.

CODE
<id="table2">
<body style="text-align:center;">
<table>


ID isn't a "tag" of its own. It's an attibute. You can only have one BODY and it shouldn't be in the middle of itself. Remove this one.

CODE
<table id="table2>


You also have two BODY in the beginning. That's one too many.


CODE
#table2
body
{
background-color:green;
}


You don't want to style that BODY you are going to remove. You want to style #table2.

CODE
#table2
{
background-color:green;
}


Then, the other rules for #table2. It doesn't help to place them after the above rule. The selector for each rule is what decides what it styles. Therefor you need to have #table2 in every selector. If you want it to match the TDs in the second table you write

CODE
#table2 td


and so on. The above is called a contextual selector (or descendant selector). It means "match any td that's contained in an element with the id #table2"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fensi88
post Dec 7 2011, 11:06 AM
Post #6


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
Pandy, thank you so much for your explanation and examples, finaly I got one without border and 2nd with border. But wider is same still and still in MF they are not centered.
Here is new code:
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<style type="text/css">
body
{
background-color:green;
}
h2
{
color:yellow;
text-align:center;
font-size:30px;
}
p
{
font-family:"Times New Roman";
font-size:20px;font-weight: bold
}

table,th,td
{
border:hidden;width:30%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

img.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a:link {color:white;}    
a{text-decoration:none;cursor:crosshair;font-weight:700;}
a:visited{color:white;}
a:hover{color:red;}

#table2
#table2 th,#table2 td
{
border:1px solid white;width:50%;
}
#table2 th
{
background-color:green;
color:white;height:30px;
}
#table2 td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

</style>
</head>

<body style="text-align:center;">

<table>

<tr>
<td style='width: 15%'>
<img src="gocaavatar1.gif" alt="avatar" width="100" height="100" class="center" />
</td>
<td style="text-align:center;"><h2>HORARY SPORTS ASTROLOGY</h2></td>
</tr>
</table>


<table id="table2">

<tr>
<td style='text-align:center;'><a  href="index.html">HORARY SPORTS  
ASTROLOGY</a></td>
</tr>
</table>

</body></html>


Do you see errors?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2011, 03:19 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I'm a little confused about what you want to do. But to start somewhere, this selector

CODE
#table2
#table2 th,#table2 td


matches a TH that's inside an element with the id table2 that's inside another element with also has the id table3 (and it also matches a TD that's inside an element with the id table2). That is, that first table2 spoils the soup.

I'm wondering if you use the two tables just to have something to hang the styling on? Because in that case you don't need them. You can apply those CSS rules directly to normal page elements like headings and paragraphs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fensi88
post Dec 7 2011, 04:41 PM
Post #8


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
Thanks! Now I have different width but still they are not centerd in MF. Here is new code:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<style type="text/css">
body
{
background-color:green;
}
h2
{
color:yellow;
text-align:center;
font-size:30px;
}
p
{
font-family:"Times New Roman";
font-size:20px;font-weight: bold
}

table,th,td
{
border:hidden;width:30%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

img.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a:link {color:white;}    
a{text-decoration:none;cursor:crosshair;font-weight:700;}
a:visited{color:white;}
a:hover{color:red;}

#table2
{
border:1px solid white;width:50%;
}
th
{
background-color:green;
color:white;height:30px;
}
td
{
font-family:"Times New Roman";
font-size:20px;text-align:right;padding:3px;background-color:green;
color:white;
}

</style>
</head>

<body style="text-align:center;">

<table>

<tr>
<td style='width: 15%'>
<img src="gocaavatar1.gif" alt="avatar" width="100" height="100" class="center" />
</td>
<td style="text-align:center;"><h2>HORARY SPORTS ASTROLOGY</h2></td>
</tr>
</table>


<table id="table2">

<tr>
<td style='text-align:center;'><a  href="index.html">HORARY SPORTS  
ASTROLOGY</a></td>
</tr>
</table>

</body></html>

Please check for errors about centering these 2 tables. Thanks.

This post has been edited by fensi88: Dec 7 2011, 04:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 7 2011, 04:58 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
If you tell me why you use the tables. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fensi88
post Dec 8 2011, 02:08 AM
Post #10


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
QUOTE(pandy @ Dec 7 2011, 04:58 PM) *

If you tell me why you use the tables. happy.gif


1st table:Because I want at the top of the page to put image and tittle text besides it but middle centered regarding pic and because title is usually long I do not want it to be in one row, but 2 or 3 rows, so all that I get with table without border because they have cells which I can style.
2nd table I use to people easy see link to main page.
(This is all for learnig process it will not be on page like this, I want to learn code for 2 defferent tables on one page in case I need it in future).

This post has been edited by fensi88: Dec 8 2011, 02:12 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2011, 08:17 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Well, you don't need tables for that.

text-align: center doesn't center block level elements.
http://www.w3.org/Style/Examples/007/center.html

You'd better use a long doctype and get the page out of Quirks Mode.
http://hsivonen.iki.fi/doctype/

You don't need to read and understand all that. Just understand that browsers have two rendering modes and they are triggered by the doctype. You typically want Standards Mode (AKA Strict Mode) or browsers will emulate older versions of themselves with all their bugs and shortcoming. In this case you need Standards Mode to make IE behave. Change your doctype to the long version for HTML 4.01, the one with an URL.
http://htmlhelp.com/tools/validator/doctype.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fensi88
post Dec 9 2011, 05:42 AM
Post #12


Newbie
*

Group: Members
Posts: 17
Joined: 2-December 11
From: Beograd
Member No.: 15,993
QUOTE(pandy @ Dec 8 2011, 08:17 PM) *

Well, you don't need tables for that.

text-align: center doesn't center block level elements.
http://www.w3.org/Style/Examples/007/center.html

You'd better use a long doctype and get the page out of Quirks Mode.
http://hsivonen.iki.fi/doctype/

You don't need to read and understand all that. Just understand that browsers have two rendering modes and they are triggered by the doctype. You typically want Standards Mode (AKA Strict Mode) or browsers will emulate older versions of themselves with all their bugs and shortcoming. In this case you need Standards Mode to make IE behave. Change your doctype to the long version for HTML 4.01, the one with an URL.
http://htmlhelp.com/tools/validator/doctype.html

Thanks for this explanations and usefull links! I will read and try.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:35 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC