O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sample Design: An Elegant Calendar

Great for organization, calendars enable us to schedule lunches, remember birthdays, and plan honeymoons. As designers, we can think of all those months, dates, and appointments as tabular data.

If you display your calendar as a generic HTML table, chances are the table looks rather plain, and if it contains numerous events it probably looks somewhat convoluted as well. In this design, we will use CSS to create a calendar that is more legible than what you could create using vanilla HTML.

First, take a look at Figure 9-10, which shows the markup for the calendar without styles.

The calendar without styles

Figure 9-10. The calendar without styles

Next, look at the markup itself to see how it’s set up. As you learned in Setting the Cell Spacing, you need to set the cellspacing attribute in the table element:

<table cellspacing="0">

Now, set the first three rows of the table headers (th) containing the year, month, and days in their own rows within their own table headers:

 <tr>
  <th colspan="7" id="year">
   <a href="year.html?previous">&lt;</a> 2010 <a
href="year.html?next">&gt;</a>
  </th>
 </tr>
 <tr>
  <th colspan="7" id="month">
   <a href="month.html?previous">&lt;</a> October <a
href="month.html?next">&gt;</a>
  </th>
 </tr>
  <tr id="days">
  <th>Sunday</th>
  <th>Monday</th>
  <th>Tuesday</th>
  <th>Wednesday</th>
  <th>Thursday</th>
  <th>Friday </th>
  <th>Saturday</th>
 </tr>

The first date is October 1, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required