mike12255 Posted June 17, 2011 Share Posted June 17, 2011 I got a table designed on photoshop (see below) and Im just curious how to do it. I assume That I would just make a div with the background image of the spiraley things that are inbetween the <Tr>'s and I can replace the background image of the Tr's with the gradiant image I have. My only issue is IF you can do both of those how do I space the Tr's out enough so that there is a little crack between them and you can see the div background image. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 19, 2011 Share Posted June 19, 2011 I would combine the gradient and the dashes to 1 image really, saves you calculating. Quote Link to comment Share on other sites More sharing options...
mike12255 Posted June 20, 2011 Author Share Posted June 20, 2011 like as a background for the div? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 20, 2011 Share Posted June 20, 2011 Not sure what you mean with 'like' but what i meant is to make a combined image and use that as a background for the table row. see attachment, that is what i mean. Than give a height to the table row, assign a background and set the table to border-collapse:collapse; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title></title> <style type="text/css"> #score{text-align: center;border-collapse: collapse;} #score tr{ background:url("images/tablerow.png") repeat 0 -5px; height:30px; vertical-align: top; } #score td{ min-width: 60px; } </style> </head> <body> <div id="wrapper"> <table id="score"> <tbody> <tr id="head"><th>subject</th><th>wins</th><th>ties</th><th>loses</th></tr> <tr class="data"><td>online</td><td>245</td><td>6</td><td>67</td></tr> <tr class="data"><td>lan</td><td>245</td><td>2</td><td>10</td></tr> <tr class="data"><td>overall</td><td>490</td><td>8</td><td>77</td></tr> </tbody> </table> </div> </body> </html> next time just start coding and play around, you learn much more when you do it yourself. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.