Practical CSS3 tables with rounded corners. There has been some discussion in the past about how/when to use tables in web development.
Though, the conclusion is the same: when you're dealing with tabular data, tables are absolutely required. Designing a table is a challenge - and here I'm not talking only about the way it looks. It's (mostly) about how easy is your table to read. If your table isn’t easy to scan, usually users get annoyed as they lose focus when trying to find the right column and row. Having said that, today we’re going to create beautiful and practical tables styled using CSS3. View demo What's so cool about these tables? In this article you'll see how CSS3 and tables can work together to create some cool and usable results. Rounded corners with no imagesVery easy to update - there are no extra CSS id's or classes addedUser-friendly and easy to read Rounded table corners Here's the trick: while border-collapse's default value is separate, we need also to set the border-spacing to 0. jQuery hover fallback Conclusion.
Practical CSS3 tables with rounded corners - demo. Rendera - Online HTML5 Editor. Type in your HTML and CSS to see it rendered.
Each time you press the Enter key, the live preview will update. You can save your results to a file - just look under the export tab. Learn By Example I'm adding HTML5 and CSS examples so you can start playing around with all of the neat stuff you'll be able to use. Just click the examples tab, choose an example, and see it rendered immediately. Javascript Support You can try out some Javascript too. Other Markup I use HAML and SASS in a lot of the web work I do. Security and Safety First We've disabled Ruby evaluation in HAML markup, so you can only use HAML to generate HTML tags. Finally, we save people's code here, but it's not private, it's not secure, and it could damage your computer if you followed a link here. Have fun learning, and go build something awesome. Pimp Your Tables with CSS3. Today I am going to show you how to use some neat CSS3 properties to beautify your tables.
With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup. We will be applying the -webkit and -moz […] View demoDownload source Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup. We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class.
Let’s start with the markup. The Markup The following will be our basic table structure: We have all the elements a table needs, a header, a body and a footer. CSS Table 1 The first table will be in green tones with some gradients for the descriptive cells, the “th” elements. CSS Table 2 CSS Table 3.