...

View Full Version : Designing a simple Table in CSS



unstopabl3
12-17-2005, 01:44 AM
Hello everyone i just created a simple table which is both XHTML Strict Validated and CSS Validated. You can see the table as follows
CSS Table (http://www.vxdesigns.com/table.php)

The code for the table is *** follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>OMG</title>
<style type="text/css">
body {
font-family: tahoma;
font-size: x-small;
color: #496C87;
}
.tut{
border:1px solid #496C87;
}
.tut td{
border:1px solid #949CA5;
}
.icon{
width:1%;
}
.name{
width:47%;
}
.author{
width:33%;
}
.report{
width:20%;
}
.level{
width:47%;
}
.added{
width:33%;
}
.views{
width:20%;
}
.description{
width:80%;
}
</style>
</head>
<body>

<table class="tut" width="70%" cellspacing="1" cellpadding="4">
<tr>
<td class="icon" rowspan="3">
<img src="patterns.jpg" width="50" height="50" alt="Photoshop Tutorials: Patterns By www.vxdesigns.com"></img></td>
<td class="name"><b>Name: </b>Patterns</td>
<td class="author"><b>Author: </b>Bugz</td>
<td class="report"><b>Report</b></td>
</tr>
<tr>
<td class="level"><b>Level: </b>Intermediate</td>
<td class="added"><b>Added: </b>28 Aug 2005</td>
<td class="views"><b>Views: </b>1000000</td>
</tr>
<tr>
<td class="description" colspan="3"><b>Description: </b>test test tes</td>
</tr>
</table>

</body>
</html>

I am not very good in CSS so i coded this table with help of a friend. Now two things i would like to know.
1) Firstly i wanted to change the width of the cells (which are represented by <td> tags offcource) so i tried add width attrb to it directly within the code as follows


<td width="80%"><b>Level: </b>Intermediate</td>

But then the XHTML Strict validation gave me errors saying the width attrb is not valid and that i should try using CSS to set the width. Took me a while but i added it through CSS. As you can see there are 7 cells so i made a different class for each cell and added desired width attribute to them as follows

}
.icon{
width:1%;
}
.name{
width:47%;
}
.author{
width:33%;
}
.report{
width:20%;
}
.level{
width:47%;
}
.added{
width:33%;
}
.views{
width:20%;
}
.description{
width:80%;
}


And labelling the cells as follows

<td class="icon" rowspan="3">
<img src="patterns.jpg" width="50" height="50" alt="Photoshop Tutorials: Patterns By www.vxdesigns.com"></img></td>
<td class="name"><b>Name: </b>Patterns</td>
<td class="author"><b>Author: </b>Bugz</td>
<td class="report"><b>Report</b></td>
</tr>
<tr>
<td class="level"><b>Level: </b>Intermediate</td>
<td class="added"><b>Added: </b>28 Aug 2005</td>
<td class="views"><b>Views: </b>1000000</td>
</tr>
<tr>
<td class="description" colspan="3"><b>Description: </b>test test tes</td>


Now i want to know is there a better way to do this ??? As you can see thats alot of code , and i am just practicing and playing around , yet this works for me, but if theres a better easier way to do this please tell me.

2)Secondaly i have set the font colour for the table like this

body {
font-family: tahoma;
font-size: x-small;
color: #496C87;
}

Which offcource turns all the font in the whole table to #496C87 colour. Now i would like to know is it possible to have fonts of different colors in the same cell using CSS???

For example check out the below page , i have set up a table using frontpage but its not CSS or XHTML Strict Validated and i want my table to be that so it works good in all browsers
Table 2 (http://www.vxdesigns.com/test.php)

If someone can code a better table in CSS with the above samples and ideas in mind and post the code i will greatly greatly appreciate it. Please remember it should have the same table layout as following table and should be CSS and XHTML Strict validated.

Table Layout (http://www.vxdesigns.com/test.php)

I hope this was pretty straight forward, thx in advance to all who help out.

_Aerospace_Eng_
12-17-2005, 01:50 AM
Because your widths vary, there really isn't much you can do from what you have done already, if a width is the same as another width, you can use that same class more than once rather than making another class for the same width. As for having different colors for the text well you could give that cell a class or id and just give the color to that cell.

unstopabl3
12-17-2005, 04:04 AM
1) thx for the first suggestion
2) how can i assign id tags to my font ??? Can you please show me or provide me with a link to such topic ??? Thx

_Aerospace_Eng_
12-17-2005, 04:08 AM
Use a span, you would give it an id="blah" then reference the id in your CSS by using a # in front of the id.

#blah {
color:#0000FF;
}

<span id="blah">Text</span>

unstopabl3
12-17-2005, 05:15 AM
Use a span, you would give it an id="blah" then reference the id in your CSS by using a # in front of the id.

#blah {
color:#0000FF;
}

<span id="blah">Text</span>

Ok Aerospace i read your first post and searched around. I found out what id is and what's it used for , and i was able to add <span id="blacktext"> to my black text and <span id="greentext"> to my green text before even reading your second post , so your first post greatly helped :) and a noob like me learnt a few things. Thx for that one

Now theres a problem before i added the <span id> bit to the code for my table was both CSS and XHTML Strict validated but now when i revalidated it, it gave 26 errors all being that i should use the class attrb. istead of the id attrb. Heres my new updated code. Can you come up with a solution for it to be validated both CSS and XHTML Strict validated and keeping the same text coloring in mind ??? I will greatly appreciate it, thx



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>OMG</title>
<style type="text/css">
body {
font-family: tahoma;
font-size: x-small;
}
.tut{
border:1px solid #496C87;
}
.tut td{
border:1px solid #949CA5;
}
.icon{
width:1%;
}
.name{
width:47%;
}
.author{
width:33%;
}
.report{
width:20%;
}
.level{
width:47%;
}
.added{
width:33%;
}
.views{
width:20%;
}
.description{
width:80%;
}
#blacktext { color: #000000 }
#greentext { color: #496C87 }
</style>
</head>
<body>

<table class="tut" width="70%" cellspacing="1" cellpadding="4">
<tr>
<td class="icon" rowspan="3">
<img src="patterns.jpg" width="50" height="50" alt="Photoshop Tutorials: Patterns By www.vxdesigns.com"></img></td>
<td class="name"><span id="blacktext"><b>Name: </b></span><span id="greentext">Patterns</span></td>
<td class="author"><span id="blacktext"><b>Author: </b></span><span id="greentext">Bugz</span></td>
<td class="report"><span id="blacktext"><b>Report Link</b></span></td>
</tr>
<tr>
<td class="level"><span id="blacktext"><b>Level: </b></span><span id="greentext">Intermediate</span></td>
<td class="added"><span id="blacktext"><b>Added: </b></span><span id="greentext">28 Aug 2005</span></td>
<td class="views"><span id="blacktext"><b>Views: </b></span></span><span id="greentext">10000</span></td>
</tr>
<tr>
<td class="description" colspan="3"><span id="blacktext"><b>Description: </b></span><span id="greentext">test test test
test test test test test test test test test</span></td>
</tr>
</table>

</body>
</html>

_Aerospace_Eng_
12-17-2005, 05:20 AM
Yeah an id can only be used one time in the xhtml, a class can be used more than once in the xhtml. Change your ids to classes, be sure to change the appropiate CSS as well.

unstopabl3
12-17-2005, 05:29 AM
Yeah an id can only be used one time in the xhtml, a class can be used more than once in the xhtml. Change your ids to classes, be sure to change the appropiate CSS as well.

Huh ? If you have seen my code you should have figured out that i am already using classes to set the width for my cells as follows


<td class="name"><span id="blacktext"><b>Name: </b></span><span id="greentext">
Patterns</span></td>

Can i use two classes in one line, something like as below without getting errors ???


<td class="name"><td class="blackcolor"><b>Name: </b></td> <td class="greencolor">
Patterns</td>

I think i can't do two same tags in one line right ??? Well then can YOU show me how would YOU overcome this problem ??? Any ideas ??? Thx in advance

_Aerospace_Eng_
12-17-2005, 05:36 AM
I know you were using classes but that was for your widths, you were using the same id="blacktext" more than one time same as id="greentext" you CAN'T do that, you can ONLY use an id ONE time. I would probably do something like this

<td class="name blackcolor"><b>Name: </b></td> <td class="greencolor">
Patterns</td>
The way you had it would be invalid, it wouldn't validate. You can put multiple classes in the same class attribute by seperating them with a space.

unstopabl3
12-17-2005, 05:47 AM
I know you were using classes but that was for your widths, you were using the same id="blacktext" more than one time same as id="greentext" you CAN'T do that, you can ONLY use an id ONE time. I would probably do something like this

<td class="name blackcolor"><b>Name: </b></td> <td class="greencolor">
Patterns</td>
The way you had it would be invalid, it wouldn't validate. You can put multiple classes in the same class attribute by seperating them with a space.

Hmm i don't know if i followed you exactly but i did it as follows

<td class="name blacktext"><b>Name:</td> </b><td class="greentext">Patterns</td>

And now Name is in one cell and Patterns is in another cell , i am pretty sure its because of the two <td> tags i just added in this ... How can i fix this ???

_Aerospace_Eng_
12-17-2005, 05:50 AM
<td class="name blacktext"><b>Name:</b><span class="greentext">Patterns</span></td>
If I were you, I would actually go read about html so you can understand it better. www.w3schools.com is a good place to start. www.htmldog.com is another good place for both CSS and HTML.

unstopabl3
12-17-2005, 06:07 AM
I know you were using classes but that was for your widths, you were using the same id="blacktext" more than one time same as id="greentext" you CAN'T do that, you can ONLY use an id ONE time. I would probably do something like this

<td class="name blackcolor"><b>Name: </b></td> <td class="greencolor">
Patterns</td>
The way you had it would be invalid, it wouldn't validate. You can put multiple classes in the same class attribute by seperating them with a space.

That was your second last post sir , and all due respect i just copied and pasted your code, i did saw the two <td> tags in there and knew that it would creat two cells , but hey a pro like you posted it so i just copied exact thing. I know i know its my mistake i should have proof read it , but hey i do know a little bit CSS and HTML and i am surely going to learn it in more depth.

I did two different experiments with the table after your two last posts and heres my conclusion code

You told me i can't use an id more then once in the code so i named 7 different id's just like i did for the cell width with the class attrb. The code is as follows



#blacktextone { color: #000000 }
#greentextone { color: #496C87 }
#blacktexttwo { color: #000000 }
#greentexttwo { color: #496C87 }
#blacktextthree { color: #000000 }
#greentextthree { color: #496C87 }
#blacktextfour { color: #000000 }
#greentextfour { color: #496C87 }
#blacktextfive { color: #000000 }
#greentextfive { color: #496C87 }
#blacktextsix { color: #000000 }
#greentextsix { color: #496C87 }
#blacktextseven { color: #000000 }
#greentextseven { color: #496C87 }


<table class="tut" width="70%" cellspacing="1" cellpadding="4">
<tr>
<td class="icon" rowspan="3">
<img src="patterns.jpg" width="50" height="50" alt="Photoshop Tutorials: Patterns By www.vxdesigns.com"></img></td>
<td class="name"><span id="blacktextone"><b>Name: </b></span><span id="greentextone">
Patterns</span></td>
<td class="author"><span id="blacktexttwo"><b>Author: </b></span><span id="greentexttwo">
Bugz</span></td>
<td class="report"><span id="blacktextthree"><b>Report Link</b></span></td>
</tr>
<tr>
<td class="level"><span id="blacktextfour"><b>Level: </b></span><span id="greentextfour">
Intermediate</span></td>
<td class="added"><span id="blacktextfive"><b>Added: </b></span><span id="greentextfive">
28 Aug 2005</span></td>
<td class="views"><span id="blacktextsix"><b>Views: </b></span><span id="greentextsix">
10000</span></td>
</tr>
<tr>
<td class="description" colspan="3"><span id="blacktextseven"><b>Description: </b></span><span id="greentextseven">
test test</span></td>
</tr>
</table>


This worked like a charm but too much code. So i tried the last updated method you posted once again and its as follows



.blacktext{
color: #000000;
}
.greentext{
color: #496C87;
}

</style>
</head>
<body>

<table class="tut" width="70%" cellspacing="1" cellpadding="4">
<tr>
<td class="icon" rowspan="3">
<img src="patterns.jpg" width="50" height="50" alt="Photoshop Tutorials: Patterns By www.vxdesigns.com"></img></td>
<td class="name blacktext"><b>Name: </b><span class="greentext">Patterns</span></td>
<td class="author"><span id="blacktexttwo"><b>Author: </b></span><span id="greentexttwo">
Bugz</span></td>
<td class="report"><span id="blacktextthree"><b>Report Link</b></span></td>
</tr>
<tr>
<td class="level"><span id="blacktextfour"><b>Level: </b></span><span id="greentextfour">
Intermediate</span></td>
<td class="added"><span id="blacktextfive"><b>Added: </b></span><span id="greentextfive">
28 Aug 2005</span></td>
<td class="views"><span id="blacktextsix"><b>Views: </b></span><span id="greentextsix">
10000</span></td>
</tr>
<tr>
<td class="description" colspan="3"><span id="blacktextseven"><b>Description: </b></span><span id="greentextseven">
test test</span></td>
</tr>
</table>


This as well works like a charm. So i have perfected both methods but i am going to use the two classes method as its less messy and i have to use less code :)
I want to say this that " If all people were so straight forward and helpfull as yourself Aerospace there wouldnt be noobs like me begging for help around, instead they would learn a thing or two themselves, by just reading your replies and honest help"
Honeslt i didnt know anything about CSS when i started to code this table and with your help i am thinking of myself as a pro :) Thx a bunch again, is there a way to +Rep you somehow ??? :D

_Aerospace_Eng_
12-17-2005, 06:22 AM
Maybe (http://www.codingforums.com/showthread.php?t=71444). Your first method is still wrong, you used an id more than once in your html, you can't use the same id in your html more than once. Note I said html not CSS.

unstopabl3
12-17-2005, 02:50 PM
Maybe (http://www.codingforums.com/showthread.php?t=71444). Your first method is still wrong, you used an id more than once in your html, you can't use the same id in your html more than once. Note I said html not CSS.

But i havent used SAME id more then once .... I have 14 id's in total and all named differently lolz



#blacktextone { color: #000000 }
#greentextone { color: #496C87 }
#blacktexttwo { color: #000000 }
#greentexttwo { color: #496C87 }
#blacktextthree { color: #000000 }
#greentextthree { color: #496C87 }
#blacktextfour { color: #000000 }
#greentextfour { color: #496C87 }
#blacktextfive { color: #000000 }
#greentextfive { color: #496C87 }
#blacktextsix { color: #000000 }
#greentextsix { color: #496C87 }
#blacktextseven { color: #000000 }
#greentextseven { color: #496C87 }


Why is this wrong ? I havent repeated the id or its name again ....

_Aerospace_Eng_
12-17-2005, 04:36 PM
Okay now I see it was getting late, and yeah that is too much code, just use classes for similar styles.

mark87
12-17-2005, 04:40 PM
Okay now I see it was getting late, and yeah that is too much code, just use classes for similar styles.

Yup, instead of -


#blacktextone { color: #000000 }
#greentextone { color: #496C87 }
#blacktexttwo { color: #000000 }
#greentexttwo { color: #496C87 }
#blacktextthree { color: #000000 }
#greentextthree { color: #496C87 }
#blacktextfour { color: #000000 }
#greentextfour { color: #496C87 }
#blacktextfive { color: #000000 }
#greentextfive { color: #496C87 }
#blacktextsix { color: #000000 }
#greentextsix { color: #496C87 }
#blacktextseven { color: #000000 }
#greentextseven { color: #496C87 }

You could just have -



.blacktext { color: #000 }
.greentext { color: #496C87 }


How much simpler is that, lol. :)

unstopabl3
12-18-2005, 02:13 AM
Yup i have done that already , thx :) Btw Aerospace i have nominated you in this thread. Nominated (http://www.codingforums.com/showthread.php?t=71444&page=4) :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum