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.
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.