Hello, I want to know how to do that in xhtml: http://imageshack.us/photo/my-images/7/screenshot004ki.jpg/ Thank you in advance for your help.
easier way use HTML4 tables (DW have all the option to create such tables). hard to create tables with CSS n div
And still if you don't want to use tables. There are two ways to create it using divs. One way is to make three main divs, floating to the left. Now you can see in the image, you have three columns, so these 3 divs will act like three columns. In each of these columns(divs) you can place further divs over one another to create these boxes. Set the properties of the divs, like width, height, background-image, margin, padding etc. to construct it properly.
Wow, what is this, invasion of the ten post wonder ****'s?!? Of course, even the seemingly legitimate users posted absolute idiotic responses -- from non-semantic use of DIV (since this appears to be tabular data) to letting dreamweaver make code for you; I'm surprised one of the 'use jquery' wankers hasn't piped in yet. This is tabular data, use a table. I'll use the image from if you hit 'previous' on imageshack as the example -- because it's more meaningful if you have actual data to work with. I'll toss a second 'set' on there too. <table class="schedules"> <thead> <tr> <th scope="col">Departure</th> <th scope="col">Arrival</th> <th scope="col">Approximate Prices</th> </tr> </thead> <tbody> <tr class="first"> <th scope="row" rowspan="4">Sophia Antipolis</th> <td>Antibes</td> <td>35 €</td> </tr><tr class="even"> <td>Nice</td> <td>60 €</td> </tr><tr> <td>Cannes</td> <td>40 €</td> </tr><tr class="even"> <td>Airport</td> <td>50 €</td> </tr> <tr class="first"> <th scope="row" rowspan="2">Nice</th> <td>Cagnes Sur Mer</td> <td>15 €</td> </tr><tr class="even"> <td>San Remo</td> <td>35 €</td> </tr> </tbody> </table> Code (markup): Would be the proper HTML for that type of data -- scope providing all the semantic relationships, rowspan letting the left side headings span multiple rows. Then it just needs CSS to make it pretty .schedules { border-collapse:collapse; } .schedules td, .schedules th { padding:0.25em 1em; text-align:center; vertical-align:middle; border:solid #FFF; border-width:1px; } .schedules th { color:#FFF; background:#5AF; } .schedules .first th { border-width:4px 4px 0; } .schedules .first td { border-width:4px 1px 0; } .schedules td { color:#000; background:#DEF; } .schedules .even td { background:#CDF; } </style> Code (markup): Simple stuff really... or at least simple if you know how to use a table PROPERLY -- of course between most developers being blissfully unaware of THEAD, TBODY, TH, CAPTION or SCOPE, and most of the rest having this intense nutjob paranoia of "never ever use tables" even when it's tabular data, the number of people who use tables properly can likely be counted on one hand.