Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Designing a simple Table in CSS

    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

    The code for the table is *** follows
    Code:
    <!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

    Code:
    <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
    Code:
    }
      .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
    Code:
    <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
    Code:
    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

    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

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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    #blah {
    color:#0000FF;
    }
    Code:
    <span id="blah">Text</span>

  • #5
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by _Aerospace_Eng_
    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.
    Code:
    #blah {
    color:#0000FF;
    }
    Code:
    <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

    Code:
    <!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>

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #7
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by _Aerospace_Eng_
    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

    Code:
    <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 ???

    Code:
    <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

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <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.

  • #9
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by _Aerospace_Eng_
    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
    Code:
    <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
    Code:
    <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 ???

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <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.

  • #11
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by _Aerospace_Eng_
    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
    Code:
    <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

    Code:
      #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

    Code:
    .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 ???

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Maybe. 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.

  • #13
    New Coder
    Join Date
    Jul 2004
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by _Aerospace_Eng_
    Maybe. 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

    Code:
      #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 ....

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay now I see it was getting late, and yeah that is too much code, just use classes for similar styles.

  • #15
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Okay now I see it was getting late, and yeah that is too much code, just use classes for similar styles.
    Yup, instead of -

    Code:
    #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 -

    Code:
    .blacktext { color: #000 }
    .greentext { color: #496C87 }
    How much simpler is that, lol.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •