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. Link to comment https://forums.phpfreaks.com/topic/239602-how-to-make-my-table-look-like-this/ 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. Link to comment https://forums.phpfreaks.com/topic/239602-how-to-make-my-table-look-like-this/#findComment-1231920 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? Link to comment https://forums.phpfreaks.com/topic/239602-how-to-make-my-table-look-like-this/#findComment-1232015 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] Link to comment https://forums.phpfreaks.com/topic/239602-how-to-make-my-table-look-like-this/#findComment-1232031 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.