CSS - Css Table Styling Help
Hi I wonder if you can help me im just doing some stuff with css as practice and need to know about table bordering basically i can border the intire table and all the cells but i just want to be able to put a border around the rows not the individual cells but the rows in the table
Similar TutorialsI have a CSS table that is rendering well with no problem in IE browser but it is skipping three rows in the Firefox browser. I can't figure out why it is skipping those three rows which are rows 2, 4, 8. Here's the code: Code: <body> <div align="center"><link href="../css/theme2.css" rel="stylesheet" type="text/css"> <tbody><tr> <td style="background-repeat: no-repeat;" background="/images/chart-header.jpg" height="44"><table width="720" border="0" cellpadding="8" cellspacing="0" height="34"> <tbody><tr> <td class="chart_head border" width="150" height="34">PROVIDER<span class="provider border">your name here</span></td> <td class="chart_head border" width="53">PRICE</td> <td class="chart_head border" width="98">SPACE</td> <td class="chart_head border" width="150">HOSTING BONUSES</td> <td class="chart_head border" width="98">REVIEWS</td> </tr> </tbody></table></td> </tr> <!----- Row 1 -----> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150"> </td> <td class="price border" width="53">$4.95</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" />free domain for life</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!---- Row 2 ------> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$1.98</td> <td class="space border" width="98">1GB</td> <td class="bonuses border" width="150"><img src="/images/support.png" alt="hosting support" width="16" height="16" />customer support<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" /> free domain for life</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!----- Row 3 ------> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$1.99</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/support.png" width="16" height="16" />customer support<br><img src="images/panel.png" width="16" height="16" />easy control panel</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!------ Row 4 ------> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$3.95</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/computer.png" alt="free domain" width="16" height="16" /> free domain & setup<br><img src="/images/software.png" width="16" height="16" /> free website builder<br><img src="images/support.png" width="16" height="16" />customer support</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!----- Row 5 -------> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$2.49</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/video.png" alt="video hosting" width="16" height="16" />FFMPEG hosting<br><img src="/images/computer.png" width="16" height="16" /> free website transfers<br><img src="images/support.png" width="16" height="16" />customer support</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!------ Row 6 -----> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$4.95</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/support.png" width="16" height="16" />24/7 Tech Support</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!----- Row 7 -----> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$3.49</td> <td class="space border" width="98">150 GB</td> <td class="bonuses border" width="150"><img src="/images/transfer.png" alt="transfer" width="16" height="16" />unlimited traffic<br><img src="/images/software.png" width="16" height="16" />website builder<br><img src="images/shopping_cart.png" width="16" height="16" />eCommerce software</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!----- Row 8 ------> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$3.50</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/security.png" width="16" height="16" /> free security suite <br><img src="images/computer.png" width="16" height="16" /> free domain for life</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!----- Row 9 ------> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$6.95</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/software.png" alt="website builder" width="16" height="16" /> free site builder<br><img src="/images/coins.png" width="16" height="16" /> $50 free Ad Credits<br><img src="images/computer.png" width="16" height="16" />free domain with signup</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> <!----- Row 10 ----> <tr> <td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56"> <tbody><tr> <td class="provider border" width="150">your name here</td> <td class="price border" width="53">$4.95</td> <td class="space border" width="98">Unlimited</td> <td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/battery.png" width="16" height="16" /> critical data backup<br><img src="images/computer.png" width="16" height="16" /> free domain</td> <td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td> </tr> </tbody></table></td> </tr> </body> </html> </body> Hi All, I have 2 questions, 1st one is I have a caption above my table, which sits on the extreme left. I also want to have the word 'Download' in the caption but want this to sit on the extreme right any ideas? Also I have lots of data to display so have designed up my css so all the table look the same. The only issue is that because some of the headings aren't very long some of the data is moving onto the next line, do I have to manually set a column width in pixels/percent inside every single table? Or can I add something to my css? This is how my caption looks... [code] <table width="700" border="0" cellspacing="0" cellpadding="0"> <caption>MEMBERS - SEARCH Download Details</caption> <thead> <tr> <th scope="col" class="left">NAME</th> <th scope="col">DOB</th> <th scope="col">ADDRESS</th> <th scope="col">PHONE</th> <th scope="col" class="right">MOBILE</th> </tr> </thead> How would one go about adding the styling normally defined by the depreciated attributes bordercolorlight & bordercolordark of the TABLE Html element, using CSS? Hi, The local styling of my table, td objects is suppressed by CSS. Please help. Simple html file: test.html Code: <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> Table 1 <table border=0 bgcolor=blue> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table> <body> </html> Corresponding CSS: test.css Code: th, td { font-size: 75%; border-width: 1px; padding: 1px; border-style: solid; border-color: red; background-color: white; } table { border-width: 2px; border-style: solid; border-color: black; border-collapse: collapse; background-color: white; } http://www.tonglebeak.com/articles/styletablecaptions.php After searching for a way endlessly to style table captions cross-browser wise, I finally found that way, and wrote an article on it (can't you tell I passed my AP english test @_@). What I'm wondering is if anyone else discovered this? Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take. I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway. this is a page with the menu as it shows right now.... http://www.seesawusa.com/products/ this is the page with the basic idea of what im trying to do http://www.seesawusa.com/pages/74/ Things i'v tried 1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers. 2. put the UL and the FORM inside a table with 2 cells... in FF, i get the result i want... except the LI and INPUT field are not aligned to the right in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one? Thanks for the glance. P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented. I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet. The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page. Bottom of the Page http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/ The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code. One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags. The following class style did not produce the <textarea> desired attributes. Code: pre.CodeExample { /*background-color: transparent;*/ border: medium inset #CCCCCC; font-family: "Courier New", Courier, monospace; margin: 1em 2em 1em 2em; overflow: auto; padding: .5em .5em .5em .5em; white-space: nowrap; } Please let me know what are the default CSS attributes for the <pre> and <textarea> tags. Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link. http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed. div.ExampleOutput pre.CodeExample Hi Guys, Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table. All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad. I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this? Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table? Charlie I see that layout on my site is completely broken in IE7... funnyfurniture.net Could anybody help me to fix my css... I have a menu constructed <div><ul><li><a><img><p>. The li is margined as 16% to space a given number of links across the page in the 100% div. I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work. Any ideas how I can get the <a> border to surround the <img><p> tags? Hi, my xml code is: <room> <features> <pool/> <Aircon/> <Radio/> <DVD/> <beds double="2"/> </features> </room> <room> <features> <pool/> <TV/> <VCR/> <beds twin="1" double="2"/> </features> </room> i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list. This is the code i have so far: features{ } features:before { content:"Features"; font-weight:bold; } beds:before{ content:"Beds: "; } beds[sofa-bed]:after{ content:attr(sofa-bed)" x Sofa-bed "; } beds[double]:after{ content:attr(double)" x Double "; } beds[twin]:after{ content:attr(twin)" x Twin "; } The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed. Any idea's? how can i create a halo shadow around the textbox on focus? an example can be seen at http://www.macromedia.com when you click on the search box, it changes its style. thanks for the help in advance. i have the following to change the background but not the outlines <input type="text" name="textfield" onblur="toggleColor(this)" onfocus="toggleColor(this)" class="normal"> function toggleColor(objElement) { if (objElement.className=='normal') objElement.className='focus'; else objElement.className='normal'; } .normal { background-color: #cccccc; color: #000000; } I wrote a little div based expandable tree but am having trouble setting some of the conditional styling when a div has children. What I'd like, is that when a div has children, the "font-weight" should be set to bold. Ideally, I'd also like to use the "div:after" property to append a '>' indicating that the div has children, but that's not critical. I tried the following but it didn't work right: Code: /* Styles the child, not the parent */ div.tnode > .tnode { display: none; font-weight: bold; } /* Doesn't do anything */ div.tnode:after > .tnode { content: '>'; } And here's the basic css with html Code: <html> <head> <style> /* Node container styles */ div.tcontainer { width: auto; height: auto; font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 12; color: black; padding: 5 5 5 30; } /* Node styles */ div.tnode { display: inherit; padding: inherit; } div.tnode:hover { cursor: pointer; } /* Node child styles */ div.tnode > .tnode { display: none; font-weight: bold; } div.tnode:hover > .tnode { display: block; } /* doesn't work div.tnode:after > .tnode { content: '>'; } */ </style> </head> <body> <div class='tcontainer'> <div class='tnode'>North America <div class='tnode'>USA <div class='tnode'><img src='http://images.infoplease.com/images/states_imgmap.gif' /></div> <div class='tnode'>States/Provences</div> </div> <div class='tnode'>Canada <div class='tnode'><img src='http://www.infoplease.com/images/mapcanada.gif' /></div> <div class='tnode'>States/Provences</div> </div> <div class='tnode'>Mexico <div class='tnode'><img src='http://www.infoplease.com/images/mmexico.gif' /></div> <div class='tnode'>States/Provences</div> </div> </div> </div> </body> </html> Any help appreciated Thanks Ken I am displaying a Google feed on my site through an asp script that converts RSS to HTML. There is no room for images where the feed is, so we just take them out by setting display: none;. That solves one issue, but then the text is way off. I'm having trouble acessing the text after the picture so I can use absolute positioning and keep it left justified. See http://www.lsuhospitals.org/Hospitals/Bogalusa_Med_Center.htm for an example. Here's the RSS to HTML source tabbed out as best I could. This conversion isn't perfect and still needs some work. What's in red is what I need CSS access to, but only when an image is present. Whew! Code: <html><head><title></title><LINK REL="StyleSheet" HREF="../../StyleSheets/HCSD.css" TYPE="text/css" MEDIA="screen"><style>body{margin: 0px; padding:0px; background-color:white;}</style></head><body> <table width="140px" class="BodyTextHeading1" cellspacing="0" cellpadding="0"> <tr> <td> BMC IN THE NEWS </td> </tr> </table> <table> <tr> <td class="rsscontainer"> <br> <table border=0 width= valign=top cellpadding=2 cellspacing=7> <tr> <td valign=top> <a href="http://news.google.com/news/url?sa=T&ct=us/0-0&fd=R&url=http://www.edailynews.info/articles/2007/01/04/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ"> Two perish in accidents as 2006 comes to close </a> <br> <font size=-1> <font color=#6f6f6f> Bogalusa Daily News, LA - </font> <nobr> Jan 4, 2007 </nobr> </font> <br> <font size=-1> Bonnett said the incident is still being investigated and oxicology tests are still being conducted. The initial 911 call was made to WPSO and came from the LSU-<b>Bogalusa Medical Center</b> where Johnson had been brought by private vehicle. </font> <br> </table> </td> </tr> <tr> <td class="rsscontainer"><br> <table border=0 width= valign=top cellpadding=2 cellspacing=7> <tr> <td width=80 align=center valign=top> <a href="http://news.google.com/news/url?sa=T&ct=us/1i-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ"> <img src=http://news.google.com/news?imgefp=lpU8D0_YzTEJ&imgurl=www.edailynews.info/content/articles/2007/01/02/news/news04.jpg width=79 height=37 alt="" border=1> </a> </td> <td valign=top> <a href="http://news.google.com/news/url?sa=T&ct=us/1-0&fd=R&url=http://www.edailynews.info/articles/2007/01/02/news/news04.txt&cid=0&ei=RKemRfDvO8qMsgGgwJmXDQ">Tim Augustine, Regina Runfalo to reign over MCCA XXVII festivities</a> <br> <font size=-1> <font color=#6f6f6f> Bogalusa Daily News, LA - </font> <nobr>Jan 2, 2007 </nobr> </font> <br> <font size=-1>Runfalo, a registered nurse, serves as assistant administrator of LSU <b>Bogalusa Medical Center</b>, where she has been employed 26 years. </font> <br> </table> </td> </tr> </table> And here are the relavent styles that I created. I have consulted my book "The Web Professional's Handbook" by glasshaus publishing. They have a decent CSS section (selectors on pgs. 96-97), but to no avail. Code: .rsscontainer { font-family: Verdana; color: black; width: 140px; background-color: white; padding: 0 0 0 0; margin: 0 0 0 0; } .rsscontainer table tr td font{ font-size: 10px; line-height: 1.3; } .rsscontainer table tr td a img { display:none; } .rsscontainer table tr td a { font-family: Verdana; font-size: 10px; color: #461D7C; text-decoration: underline; } .rsscontainer table tr td a:hover { font-family: Verdana; font-size: 10px; color: #7549B1; } .rsscontainer table tr td a:visitied { font-family: Verdana; font-size: 10px; color: #7549B1; text-decoration: underline; } I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size).. Is there an easy way to do this? for example http://member.classifieds.com/userjoin.php the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this. I set up a class (named "emphasized") to be bold, italic and color #087112. The color is being applied but for some reason the font is not appearing bold or italicized. (See "Introduction to EFT" text.) The bullets (set up in css as id selector "li") are not being styled either (same thing, the color is applied but not the list styling). Since I'm a new user I'm not allowed to put links in my post but you can see the pages he HTML page can be found at tinyurl dot com /da97nb CSS can be found at tinyurl dot com /de9tqe Help! And thank you! Hi, This will be a quick question. Why cant I style ul inside a div as: .css-tabs { margin:0 !important; padding:0; height:30px; border-bottom:1px solid #666; background:#EFEFEF none repeat scroll 0 0; } <!-- Left column --> <div class="floatLeft width73"> <!-- the tabs --> <ul class="tabsss"> <li><a href="#first">Tab 1</a></li> <li><a href="#second">Tab 2</a></li> <li><a href="#third">Tab 3</a></li> </ul> </div> Hi is there anyway of making the height of the textbox smaller. I know you an change the width of it Thanks For some reason, the styling of the ul's and li's on part of my website doesn't seem to be working in IE. It works perfectly in every other browser. The URL is: wakeforestlawreview .com/category/the-journal The part that isn't styling correctly is the "sidebar" with the Links, Law Blogroll and Archives. Anyone have any ideas what's up with that? Similarly, in IE, the search box is like, too low. It should be centered in the brown box, but it's like pushed down too far for some reason. Again, it looks right in every other browser. Ideas? Thanks! I am trying to add sub navigation to my footer area. I tried codes below but didnt work. http://www.pearl.ru/isdunyasi/ #footer { width:800px; font-size:10px; color:#aaaaaa; } #footer .navigation{ width:800px; background:#aaaaaa; } #footer .navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; white-space:nowrap; } #footer .navigation li a{ display:block; padding:0 5px; font-size:12px; text-transform:uppercase; color: #FFFFFF; } #footer p { padding:0; margin:0; text-align:center; } |