unstopabl3 Posted December 17, 2005 Share Posted December 17, 2005 Hello everyone i just created a simple table which is both XHTML Strict Validated and CSS Validated. You can see the table as followsCSS TableThe 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" /></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 } .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 browsersTable 2If 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 LayoutI hope this was pretty straight forward, thx in advance to all who help out. Link to comment Share on other sites More sharing options...
F-Man Posted December 17, 2005 Share Posted December 17, 2005 Yes, there is a better way to do it.For the cell widths, use the <col /> element and give widths to that instead. <table id="tut"> <colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> </colgroup>... For the different text color, just write something like: .celltitle { color: black; font-weight: bolder;}...<span class="celltitle">Name:</span> Patterns Also, instead of the attributes you have, you should use the following CSS properties for the table's presentation: "width", "border-spacing" and on its cells: "padding". Remember that you should always try to separate content from presentation using CSS the most possible. border-spacing doesn't work on IE but you're obviously not aiming for IE support since your page is application/xhtml+xml. Link to comment Share on other sites More sharing options...
unstopabl3 Posted December 17, 2005 Author Share Posted December 17, 2005 Yes, there is a better way to do it.For the cell widths, use the <col /> element and give widths to that instead.<table id="tut"> <colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> </colgroup>... How would i add width to the <col /> element ? Would it be something like this <col class="col1" "width:1%/">Secondaly which attribute are you talking about ??? I have used CSS properties to my full extent , wherever possible , did i miss something or somethings Can you point them out ??? Thx for such a fast reply Link to comment Share on other sites More sharing options...
F-Man Posted December 17, 2005 Share Posted December 17, 2005 To give widths to the cols, do this: .col1 { width: xx% }.col2 { width: xx% }etc (replace the xx with a real number of your choice) The attributes I was talking about are these: <table class="tut" width="70%" cellspacing="1" cellpadding="4">you should use an ID on your table like this:<table id="tut">And then use CSS for the rest: #tut{ border: 1px solid #496C87; border-spacing: 1px; width: 70%;}#tut td{ border: 1px solid #949CA5; padding: 4px;} Link to comment Share on other sites More sharing options...
unstopabl3 Posted December 18, 2005 Author Share Posted December 18, 2005 Ok i will do that , thx a lot Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now