Hi, how i can make from this page 2. when i try make table always have problem with border always show how can make from image 2. without white border ?
If you use HTML the solution is: <table ... border="0">...</table> If you use CSS the solution is: table {... border:0;}
I'm with Rukbat, generally better to use DIVs rather than tables unless the data you are displaying is tabular data.
@thomasdgr -- you shouldn't be recommending the border attribute, this isn't 1997. ASSUMING this is tabular data (the row coloring and number of them means it just might be) the CSS property you probably want to use is border-collapse:collapse; It gets rid of both cellspacing and the space for the borders -- though you may also want to set border:0; on all cells and the table itself. Unlike the deprecated BORDER attribute that you have no business using on websites any time over the past DECADE PLUS, the border property in CSS applies to every sub-element except for THEAD,TBODY,TFOOT and TR -- separately. You set it on a TD, it effects just that TD. You set it on a TH, it effects just that TH. You set it on table it only effects the outer edge of the table, NOT each individual cell. Take this example of a properly formed table, making use of pretty much everything that should be used when dealing with tabular data -- that 99.99% of people crapping out HTML and calling it a website seem to be blissfully unaware of the existence much less the purpose of half the tags used: (specifically CAPTION, THEAD, TBODY, TFOOT and TH) <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <style type="text/css"> #shoppingCart { border-collapse:collapse; } #shoppingCart caption { padding:0.25em 0.6em; font-weight:bold; text-transform:uppercase; color:#FFF; background:#248; } #shoppingCart thead *, #shoppingCart tfoot * { text-align:right; background:#BCF; } #shoppingCart thead *, #shoppingCart tbody * { border-bottom:1px solid #468; } #shoppingCart thead .name { text-align:left; } #shoppingCart tfoot td { font-weight:bold; color:#C00; } #shoppingCart th, #shoppingCart td { padding:0.2em 0.6em; } #shoppingCart td { text-align:right; font-family:monospace; } #shoppingCart tbody * { background:#DEF; } #shoppingCart tbody .even * { background:#F0F8FF; } #shoppingCart tbody th { text-align:left; } </style> <title> Template Design CSS </title> </head><body> <table id="shoppingCart"> <caption>Shopping Cart</caption> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col">Count</th> <th scope="col">Cost</th> <th scope="col">Total</th> </tr> </thead> <tfoot> <tr> <th scope="row" colspan="3">Grand Total:</th> <td>147.65</td> </tr> </tfoot> <tbody> <tr> <th scope="row">Widgets</th> <td>24</td> <td>1.99</td> <td>47.76</td> </tr><tr class="even"> <th scope="row">Quijadas</th> <td>10</td> <td>0.99</td> <td>9.90</td> </tr><tr> <th scope="row">Zoot</th> <td>1</td> <td>89.99</td> <td>89.99</td> </tr> </tbody> </table> </body></html> Code (markup): You have to understand the elements of a table apart from it's tags -- in the 'old' days (pre-1998) you had the attributes border, cellspacing and cellpadding. Let's review those, and then look at the CSS replacements: border -- as an HTML attribute it handles ALL borders for the table, not just the outermost one for the table element itself. It's CSS equivalent only applies to the outermost border and not each and every cell. cellspacing -- this is actually what I think you were complaining about... the extra space between cells. Setting cellspacing to zero is the 'old' way, that you may still have to resort to if you want control over the space between cells. The CSS equivalent is border-spacing but like a great many CSS2 properties Mozilla dragged their heels on implementing it properly despite moving on to CSS3... to the point it was only JUST fixed in FF15. Probably because like most open sores projects if it's not cool and sexy, don't plan on seeing it fixed in less than a decade (Now if they can just fix the fourteen year old bugzilla 915). IF you don't want that extra spacing, the border-collapse attribute merges all table cell borders with no spacing in-between. cellpadding -- the space between the cell and it's own border. The CSS equivalent is padding. I tried to use some of each of the CSS properties in the above code to show that in action. Also notice I only resorted to two classes -- one for even/miscolored rows, one for the single TH that's styled different from it's kin... which is as it should be. To see all the different bits and pieces of non-collapsed table, try the following CSS instead: #shoppingCart { border-spacing:8px; background:#0C0; border:8px solid #C0C; } #shoppingCart caption { padding:0.25em 0.6em; font-weight:bold; text-transform:uppercase; color:#FFF; background:#248; } #shoppingCart thead *, #shoppingCart tfoot * { text-align:right; background:#BCF; } #shoppingCart thead .name { text-align:left; } #shoppingCart tfoot td { font-weight:bold; color:#C00; } #shoppingCart th, #shoppingCart td { padding:1em; border:8px solid #00F; } #shoppingCart td { text-align:right; font-family:monospace; border-color:#F00; } #shoppingCart tbody * { background:#DEF; } #shoppingCart tbody .even * { background:#F0F8FF; } #shoppingCart tbody th { text-align:left; } Code (markup): The part in purple is BORDER declared on the table tag -- notice that caption renders separately OUTSIDE the table before it. The green background on the table shows the padding between the cells, with blue borders on the TH (table heading) and red borders on the TD (table data). Also adds a full EM of padding to show what padding on a cell does. IF you up the border-spacing on the table, the space between each cell will grow. Hope that helps clarify it for you... though again as everyone else is saying, only do this if it's tabular data. P.S. This also illustrates the IDIOTIC markup I often see on peoples tables throwing multiple classes at everything with halfwit nonsense like <td colspan="5"><b>Shopping Cart</b></td> or <td class="heading"><b>Cost</b></td> -- coders who do that apparently never bothered taking the time to learn all the other tags that go in a table, how CSS inheritance works, or even the very basic and simple concepts of development like semantic markup.