6.6. 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 an HTML table, chances are the table looks rather plain, and if it contains numerous events then it probably looks somewhat convoluted as well. In this design, we use CSS to create a calendar that is more legible than what you could create using vanilla HTML.
First, take a look at Figure 6-7, which shows the markup for the calendar without styles.
Figure 6-7. The calendar without styles
Next, look at the markup itself to see how it’s set
up. As you learned in Recipe 6.1, the
cellspacing
attribute needs to be set in the
table
element:
<table cellspacing="0">
Now, set the first three rows of 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"><</a> 2000 <a href="year.html?next">></a> </th> </tr> <tr> <th colspan="7" id="month"> <a href="month.html?previous"><</a> October <a href="month.html?next">></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, which in this calendar ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.