Data Tables and Cascading Style Sheets Gallery. What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them. Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering. There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go.
Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L. Equal Height Columns with Cross-Browser CSS & No Hacks. By Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.
For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. Also see my Perfect multi-column CSS liquid layouts - these use the same equal height column CSS principles as discussed below. The problem with equal height columns In the example above we have three columns each with a different amount of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. Three column HTML div structure Three column CSS. Thierry Image Placement. This technique is very versatile. Make sure you read the entire article to find out about the many different ways to implement the method.
Also, I wrote four new articles based on this solution: What is FIR? FIR is a standards-compliant technique that uses stylesheets and ordinary HTML to provide a visible image, usually consisting of text. After spending some time reading about FIR, I thought it would be interesting to turn the debate on its head by reverting to the discarded <img /> element. FIR factor The various successors to the original Fahrner Image Replacement method have explored many different techniques.
In my experience, however, all these techniques fail on some level with regard to various User Agents and their individual specificities: Old browsersText browsers Screen readersJS-challenged browsers Moreover, browser configurations play a role: images ON / CSS OFFimages OFF / CSS ONimages OFF / CSS OFFlarge font-size FIR less See example 1 Challenges we overcame: Next step: