|
HTML - Tables Coloring Problem
Please refer to attached screenshot below. If I wanted to change one of the colored row to another color say blue, how could I do this please? See my XHTML and CSS below:
Quote: th { background-color: #cc6600 } .cellcolor { background-color: #fcba7a; } <table summary="This table holds data about the cities I visited on my travels. I've included the date I was in each city, the temperature when I was there, and altitude and population of each city. I've also included a rating of the diners where I had lunch, on a scale of 1 to 5."> <caption>The cities I visited on my Segway'n USA travels</caption> <tr> <th>City</th> <th>Date</th> <th>Temperature</th> <th>Altitude</th> <th>Population</th> <th>Diner Rating</th> </tr> <tr> <td>Walla Walla, WA</td> <td class="center">June 15th</td> <td class="center">75</td> <td class="right">1,204 ft</td> <td class="right">29,686</td> <td class="center">4/5</td> </tr> <tr class="cellcolor"> <td>Magic City, ID</td> <td class="center">June 25th</td> <td class="center">74</td> <td class="right">5,312 ft</td> <td class="right">50</td> <td class="center">3/5</td> </tr> <tr> <td>Bountiful, UT</td> <td class="center">July 10th</td> <td class="center">91</td> <td class="right">4,226 ft</td> <td class="right">41,173</td> <td class="center">4/5</td> </tr> <tr class="cellcolor"> <td>Last Chance, CO</td> <td class="center">July 23rd</td> <td class="center">102</td> <td class="right">4,780 ft</td> <td class="right">265</td> <td class="center">3/5</td> </tr> <tr> <td>Truth or Consequences, NM</td> <td class="center">August 9th</td> <td class="center">93</td> <td class="right">4,242 ft</td> <td class="right">7,289</td> <td class="center">5/5</td> </tr> <tr class="cellcolor"> <td>Why, AZ</td> <td class="center">August 18th</td> <td class="center">104</td> <td class="right">860 ft</td> <td class="right">480</td> <td class="center">3/5</td> </tr> </table> Similar TutorialsI cant seem to come up with a nice color scheme for my site. well specifically, for a selection dialog (modal dialog) does anyone know a nice warming, inviting color for a selection dialog? hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash I made a layout in dreamweaver but im getting problems, my navigation is stretching when i add too much content to the content table, it shows fine in chrome but in firefox and IE i get this Any ideas whats causing this? I'm a 13 year old kid that's sort of experienced in HTML. I'm pretty sure tables are HTML and not css. Because I was wondering, I made a website and all, mostly out of tables and pictures. What is the code to end a table at the very bottom? Because if I just use img src, theres a small space between it. I'm trying to fix that, and I really need the code. I can't explain it any better. If you need my website, it's http://www.freewebs.com/maralake/ Look at the bottom, the layout just ends with nothing, blank. I have the bottom picture, I just don't know how to add it properly. I'd really appreciate if you help me. I have had many issues with tables but in the end they were worth it. I have 1 last problem. My website in regular view on a small screen looks great but when I maximize it on a bigger screen, the scroll bar disapears on the page because the whole page fits on the screen so its not necessary, but when it disapears, the table does not stretch to the end of the page, instead it stops where the scroll bar was and the page background takes over and gores until the end. The width of the table is set to 100 percent and it has no problem auto adjusting to any screen size except when the scroll bar disapears. How do i make this thing stretch further when there is no scroll bar? I have a table with 5 columns and it does not render correctly in IE on a 1024 x 768. The problem goes away by increasing two column widths from 5% to 8%. I have not tested the pages on platforms with a lower resolution. I prefer to use the version with the narrower columns. Please help me achieve the preferred layout, and explain what it is that I am doing incorrectly. Related data: Windows XP is used for all examples. With Firefox, Opera and Safari both widths are OK on 1024 x 768 and 1440 x 900 monitors. http://www.iaps.com/eval/courses18-5-54-5-18.html Column % widths are 18-5-54-5-18: 1024 x 768 IE6: Problem (both 5% columns do not appear) IE7: Problem (both 5% columns do not appear) 1440 x 900 IE6: No problem IE7: No problem http://www.iaps.com/eval/courses15-8-54-8-15.html Column % widths are 15-8-54-8-15: 1024 x 768 IE6: No problem IE7: No problem 1440 x 900 IE6: No problem While the page may not be very attractive, it has to render properly. Thanks in advance, Don Hi, I have made a table, with three columns, three rows. I want each of the outside columns, to stay the same size throughout, but want to be able to put images in them, but when i do, the size of the cell grows, almost double, as though, making EXTRA room for the picture. what do i do to force the cell size to stay the same, when a picture is put in. Thanks Alex Hello folks. I have this problem. I use a PHP script to echo many tables on one page. (I am posting this in the HTML forum as it requires HTML, not PHP knowledge! ). I use a class called stdDiv to get a border for the table. When I try and use <br />es and <spacer type="horizontal" size="10px" /> I do not get the effect I want. I wish for 10px between each table as described in the diagram below: However I do not get this and my table overlaps and is somehow displayed as if it is in the second row. What I get: Here is my code just for clarity: PHP Code: echo "<table class=\"stdDiv\" style=\"width:100%;\" > <colgroup><col width=\"33%\" /><col width=\"33%\" /><col width=\"33%\" /></colgroup> <tr><td colspan=\"3\" align=\"center\" class=\"title\" border=0>".$record['title']."</td></tr> <tr><td colspan=\"3\" align=\"center\" class=\"description\">".$record['description']."</td></tr> <tr><td colspan=\"3\" align=\"center\" ><img src=".$record['image']." style=\"width:128px; height:64px;\" /></td></tr> <tr><td class=\"text\" align=\"center\" style=\"border: 2px solid #999999\">Version: v".$record['version']."</td> <td class=\"text\" align=\"center\" style=\"border: 2px solid #999999\">Rating: ".$record['rating']."</td> <td class=\"text\" align=\"right\" style=\"border: 2px solid #999999\">by <b>".$record['creator']."</td></tr> </table>"; This will give out a table and it is executed with every looping. I want to know how or what code to insert to create a gap of 10px between it and the next time I want to output a table Regards and thanks in advance, mintsmike Hi I need help in tables with 100%. Actually i am keeping a table with 100% fihed width in a <td>, but when i am minimising the IE or Firefox browser the columns are reducing , how to solve the problem Hello, I learned HTML a few weeks ago, and I pretty much understood it all and scored a 100 on the final Test. However, I still got problems with Tables. My first website project (divinechaos.bplaced.net/beta) has an issue. On the right, there is a empty box with a black frame, but thats not supposed to be there. Also, on the left there is a...weirder box. I want to remove that one, too. I tried to fix it, but after spending a week on trying to fix it, I decided to post on this forum a friend told me about. So, here I am, asking for advice. If you have any ideas on how to fix that problem, please answer me. EDIT: In case you are wondering, Bplaced is only a free domain I am using for now, Ill purchase a TLD once the website is finished and working. Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts hey everyone, pretty simple question i am supposing, how do i stop the text in my tables from wrapping to fill the space inside the cell. The text in each cell flows over into a second line, and I end up getting writing that has huge spaces between each word, to try and fill out the line. I still want two lines, just normal sized spaces between words if that makes sense... I have a L shaped image that I want to put into a table as a whole rather than cut into to two oblongs. As I am not an expert I wondered if this would mean that the space surronding the L shapped image will not be accesble when place in the table.. I want to put txt into the recess against the right angle formed by the L I think that the <td><img src="Lshape"/></td > way that the table structure works that the L will have a rectangle around it and that this will prevent things butting close to it.. is there a way around it.. Apart from cutting the L shape into two pieces and putting a table within a table thanks Larry I'm starting a forum here, and I really want to get it up soon. But I can't because I'm having trouble w/ the header. On the header there's supposed to be text on top of it, but it's not. It's on the side. Can anyone help? Thank you. Here's the code:
Code: <a name="top"></a> <table cellspacing="0" cellpadding="0" border="0" width="696px" align="center"> <tr> <td bgcolor="#ddeef7"> <table border="0" cellspacing="1px" cellpadding="6" width="100%"> <tr> <td width="74%" bgcolor="#ffffff"> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top" rowspan="2"><a href="index.php"><img src="./images/oxygen/logo.png" alt="Ne-YoFan.com Online Community" border="0" /></a></td></tr> <tr> <td align="right" valign="top"><font class="smalltxt">Last active: 14-6-2008 at 08:10 PM<br /></font></td> </tr> <tr> <td align="right" valign="bottom"><font class="smalltxt">Logged in as <a href="member.php?action=viewpro&member=Erika">Erika</a><br />[<a href="misc.php?action=logout">Logout</a> - <a href="u2u.php" onclick="Popup(this.href, 'Window', 700, 450); return false;">U2U</a> - <a href="memcp.php">User Control Panel</a> - <a href="cp.php">Administration Panel</a>]</font></td> </tr> </table> Hello everyone. Im making a website for my company and i need a little help. I made a table and tried to put a fixed width on it so then I could put text in it. Problem is, -when i type with no spaces ex aaaaaaaaaaaaa the text just keeps going forever instead of dropping down to the next line Also Ive been having some other problems -if I zoom in to like 200% on IE my text doesnt stay centerd with the page, it stays centered with the screen -And if I zoom in really far in Fire Fox my background stays centered with the screen instead of the page I made the page using photoshop and exported as html to get me started so ill post the whole script. Its not a whole lot. --------------------------- <html> <head> <title>K2 Layout 3-0</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-image: url(images/bg2.jpg); background-repeat: repeat-y; background-position: center; background-color: #0d141e; } body,td,th { color: #FFF; } </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (K2 Layout 3-0.psd) --> <center> <table id="Table_01" width="1024" height="225" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/K2-Layout-3-0_01.gif" width="93" height="225" alt=""></td> <td colspan="6"> <img src="images/K2-Layout-3-0_02.gif" width="840" height="166" alt=""></td> <td rowspan="4"> <img src="images/K2-Layout-3-0_03.gif" width="91" height="225" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/K2-Layout-3-0_04.gif" width="714" height="1" alt=""></td> <td rowspan="2"> <img src="images/K2-Layout-3-0_05.gif" width="126" height="43" alt=""></td> </tr> <tr> <td> <img src="images/K2-Layout-3-0_06.gif" width="71" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_07.gif" width="211" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_08.gif" width="141" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_09.gif" width="163" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_10.gif" width="128" height="42" alt=""></td> </tr> <tr> <td colspan="6"> <img src="images/K2-Layout-3-0_11.gif" width="840" height="16" alt=""></td> </tr> </table> <table id="Table_02" fixed width="830" border="0" cellpadding="0" cellspacing="0"><tr><td> Text Here Text Here Text Here Text Here </td></tr> </table> </center> <!-- End Save for Web Slices --> </body> </html> -------------------- Any help at all appreciated Thanks Hey, i'm trying to make a simple site, and right now i have one page with a table centered. That all works good, and when you change the size of your webpage, the table always stays centered. My problem is i would like to do this with DIV, because CSS allows more positing control. Yet, when i put a DIV table somewhere when i change the size of my webbrowser the table just disapears off to the site instead of staying centered (even thou its not set to stay centered) I geuss a better question would be how can i control where the table is, but keep it relitive to the size of the window? With CSS or with HTML. Thanks. Is there anyway that in Internet Explorer I can stop it auto-resizing? I think that is the problem I'm having, I'm not sure though. The problem is this: http://i37.photobucket.com/albums/e8...66/problem.png The cell on IE adds onto the top and bottom of the image for seemingly no reason. The image on the broken cell is a link as well. I tried making the image the background of the cell and having a transparent image as the link over the top but it brings up the same problems. There's no border around the image and no cell padding. The code used for that specific cell is: Code: <TD height="74" style="background-repeat:no-repeat;" COLSPAN=2><a href="MYLINK" target="_blank"><img src="http://i37.photobucket.com/albums/e85/pxi666/seashell/seashell_layout_09.png" width="411" height="74" border="0"></a></TD> Any ideas on what could be causing this? Thanks a lot in advance, Ollie I am trying to slightly reduce the size of the left row on my pages at http://www.mustseedaily.com/. I want to grow the middle table slightly to the left, but I just can't figure out what to change. I have been puzzling over this for some time, and I can usually figure this stuff out, but this one has me baffled. The html is attached. Thanks for any help! can someone please tell me how i can do a table with just 1 border line - as when i do it in dreamweaver it always gives me 2 border lines - see below for my code ..thankyou <table width="311" border="1" bordercolor="#990000"> <tr> <td width="301" height="147" colspan="2"> </td> </tr> </table> |
|||||||