Jump to content

Recommended Posts

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.

 

 

scorew.gif

 

 

Link to comment
https://forums.phpfreaks.com/topic/239602-how-to-make-my-table-look-like-this/
Share on other sites

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]

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.