This is my CSS: @charset "utf-8"; /* CSS Document */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color:#000000; background-image: url(../php/images/main_bg.gif); margin: 0px; } a:link {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #CCFF99; text-decoration: none} a:active {color: #CCFF99; text-decoration: none} table { border-top-width: thin; border-right-width: thin; border-top-style: solid; border-right-style: solid; border-top-color: #333333; border-right-color: #333333; background-color: #999999; } td { border-bottom-width: thin; border-left-width: thin; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #333333; border-left-color: #333333; padding: 3px; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; color: #ccff99; text-align:center; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; color: #000000; } textfield { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: normal; background-color: #666666; border: 1px solid #333333; } Code (markup): What code do I have to put if I want ONLY the top row of every table a different colour?
Hard to answer, as you didn't provide the table's markup. Can't apply css without a structure to apply it to. Show us the table. cheers, gary
This is the finished table, but I want it to have the background color #666 when I open a new table without me having to do that on every page:
I can't imagine a good reason to use a table for this, but here's a start for you. <!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 name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ table { background-color: #999; width: 450px; margin: 0 auto; border-collapse: collapse; } td, th { padding: 3px; } thead th { background-color: #666; } tbody th { background: white url("images/gradient3_white.png"); } /*]]>*/ </style> </head> <body> <table summary=""> <thead> <tr> <th colspan="4"> MY USERPANEL <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> <div align="center"> . </div> </th> </tr> </thead> <tbody> <tr background="images/gradient3_white.png"> <th colspan="2"> Add / Delete Friend </th> <th colspan="2"> Block / Unblock User </th> </tr> <tr bgcolor="#999999"> <td width="65"> Action: </td> <td width="147"> <select name="select" id="select"> <option> Add Friend </option> <option> Delete Friend </option> </select> </td> <td width="66"> Action: </td> <td width="146"> <select name="select2" id="select2"> <option> Block User </option> <option> Unblock User </option> </select> </td> </tr> <tr bgcolor="#999999"> <td> Username: </td> <td> <input type="text" name="textfield" id="textfield" /> </td> <td> Username: </td> <td> <input type="text" name="textfield2" id="textfield2" /> </td> </tr> <tr bgcolor="#666666"> <td> </td> <td> <input type="submit" name="button" id="button" value= "Submit" /> </td> <td> </td> <td> <input type="submit" name="button2" id="button2" value= "Submit" /> </td> </tr> </tbody> </table> </body> </html> Code (markup): What are all the empty <div>s for? They're simply ignored by the browsers. cheers, gary
Usually that's a telltale of someone working in a wysiwyg like dreamweaver or frontpage... the align property on each of them further enhances that view. I agree a table is inappropriate, though if I was to isolate just the 'top row' I'd make it a th, since it appears to be a header - just as kk5st did. Still, looking at it I'd probably reduce the source for that down to: <div id="myUserPanel"> <h2>MY USERPANEL</h2> <div class="controlBox"> <h3>Add / Delete Friend</h3> <label for="select">Action:</label> <select name="select" id="select"> <option>Add Friend</option> <option>Delete Friend</option> </select> <label for="textfield">Username:</label> <input type="text" name="textfield" id="textfield" /> <input type="submit" name="button" id="button" value="Submit" /> </div> <div class="controlBox"> <h3>Block / Unblock User</h3> <label for="select2">Action:</label> <select name="select2" id="select2"> <option>Block User</option> <option>Unblock User</option> </select> <label for="textfield2">Username:</label> <input type="text" name="textfield2" id="textfield2" /> <input type="submit" name="button2" id="button2" value="Submit" /> </div> </h3> Code (markup): Though being two separate columns I'd make that two separate forms.
just create a new class with background as u require. add it to the first <tr> tag of the table. that will be simple. <example:> .bgnew{background:#000;color:#fff} <table> <tr class="bgnew"><td>title</td></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </table> I hope this will help.
Thx for the help everyone but maybe it was misunderstood. I am looking to make the top row of any table I make, automatically be #666 and all other rows #999 in my CSS sheet, if this is possible. All the div. tags are markups so to speak, just a guide at the moment until I can find a professional PHP/MySql coder to sit and go through the site I made. It's a text based game.
Well, presumably the top row is a header row. My suggestion should work just fine once you use well structured, semantic markup. cheers, gary