CSS can be used to build calendars, timelines, and even “tables” (or charts). The tutorials below sometimes use CSS combined with various programming languages.
CSS/jQuery Sequential List
Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list.
Date displays with sprites
This tutorial explains how to achieve an original date display using CSS sprites. A clever technique. An alternative solution (using the
property in CSS).
Pure CSS Timeline
A great tutorial for creating a clean-looking timeline for your site using straightforward CSS and HTML markup.
A CSS-based Timeline
Another tutorial for creating a timeline with CSS.
iCal-like Calendar (CSS+jQuery)
A great tutorial for creating a dynamic calendar resembling the iCal application.
Build a Calendar Using PHP, XHTML, and CSS Example
A simple tutorial for creating a dynamic online calendar.
CSS: Menu List Design
This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the li element, then use the absolute position property to shift the nested elements down to cover the border.
Pure CSS Scrollable Table with Fixed Header
This tutorial shows how to use CSS to allow scrolling within an HTML table with a header.
Date Badges and Comment Bubbles for Your Blog
“One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.”
Styling tables with CSS
A simple tutorial for styling HTML tables entirely with CSS.










