--- comments: true date: 2009-12-22 11:17:25 layout: post slug: typographic-work-planner title: Typographic work planner wordpress_id: 49 categories: - Web Development tag: - CSS - CSS3 - Design - Development - HTML - Semantics --- No one likes being told what to do, especially if it’s work related, but nevertheless jobs need done. Why present boring stuff in a boring way? If you’re going to be told what to do, at least soften the blow by being told nicely. Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. ## Typographic work planner markup: The rich, semantic markup is as follows. Notice the use of the more semantic elements and attributes such as `summary=""`, `colgroup`, `scope=""`, `caption` and more... Typographic work planner
Work schedule
Date User Description
Sense Internet Ltd work planner
20 December, 2009 Harry Roberts Lorem ipsum dolor sit amet, elit. Nunc ? rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ? in, ornare a, est. Proin sem risus, pretium ut, mattis nec.
20 December, 2009 Joe Whitley Suspendisse venenatis. Donec eleifend ? dignissim diam. Integer faucibus neque tempor pede. Maecenas at ? magna sed lectus adipiscing molestie. Pellentesque habitant morbi ? tristique senectus et netuset malesuada fames ac turpis egestas. ? Curabitur sodales gravida tellus.
21 December, 2009 Harry Roberts Lorem ipsum dolor sit amet, elit. Nunc ? rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ? in, ornare a, est. Proin sem risus, pretium ut, mattis nec.
21 December, 2009 Joe Whitley Suspendisse venenatis. Donec eleifend ? dignissim diam. Integer faucibus neque tempor pede. Maecenas at ? magna sed lectus adipiscing molestie. Pellentesque habitant morbi ? tristique senectus et netuset malesuada fames ac turpis egestas. ? Curabitur sodales gravida tellus.
21 December, 2009 Sam Penrose Lorem ipsum dolor sit amet, elit. Nunc ? rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ? in, ornare a, est. Proin sem risus, pretium ut, mattis nec.
22 December, 2009 Joe Whitley Suspendisse venenatis. Donec eleifend ? dignissim diam. Integer faucibus neque tempor pede. Maecenas at ? magna sed lectus adipiscing molestie. Pellentesque habitant morbi ? tristique senectus et netuset malesuada fames ac turpis egestas. ? Curabitur sodales gravida tellus.
22 December, 2009 Sam Penrose Lorem ipsum dolor sit amet, elit. Nunc ? rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ? in, ornare a, est. Proin sem risus, pretium ut, mattis nec.
22 December, 2009 Joe Whitley Suspendisse venenatis. Donec eleifend ? dignissim diam. Integer faucibus neque tempor pede. Maecenas at ? magna sed lectus adipiscing molestie. Pellentesque habitant morbi ? tristique senectus et netuset malesuada fames ac turpis egestas. ? Curabitur sodales gravida tellus.
### In detail... There are a few things in the table you may not have seen before, briefly, they are: * **`summary=""`:** This is an attribute which provides a brief overview of the table and its contents/purpose. * **`caption`:** This is a table specific caption, essentially a heading/title explicitly for the table. * **`colgroup` and `col`:** This is an essentially invisible element that just adds semantic meaning to the table. It defines the columns and can—in some browsers—be used to style them. * **`scope="col"`:** This is an attribute which tells the browser whether the `th` is a title for a column or a row. This then obviously makes the other possible attribute value `row`. * **`tfoot`:** This is a table footer and contain pretty much anything you like. It must however appear _before_ the `tbody`. ## Typographic work planner CSS: The CSS used to create the work planner is pretty basic, with a dash or progressive enhancement added via some CSS3. [View the full CSS file with reset etc.](/demos/typographic-work-planner/css/style.css) table{ margin-bottom:20px; } td,th{ border-bottom:1px solid #ccc; } tbody tr{ background:#fff; } tbody tr:nth-of-type(even){ background:#ffc; } th,tfoot,caption{ font-family:Helvetica, Arial, Verdana, sans-serif; font-size:1.6em; font-weight:bold; } th,td{ padding:10px 0; } caption{ font-size:2.4em; position:absolute; left:-9999px; } .date{ width:160px; padding:10px 15px 10px 5px; font-family:Georgia, "Times New Roman", Times; font-size:1.6em; font-style:italic; } .user{ width:460px; padding-right:20px; font-family:Helvetica, Arial, Verdana, sans-serif; font-size:4.8em; font-weight:bold; } .desc{ width:280px; font-size:1.2em; } tbody tr.today{ background:#ff8; text-shadow:1px 1px 1px rgba(0,0,0,0.3); } tfoot{ color:#666; } tfoot td{ padding:10px 5px; } **[Typographic work planner demo](/demos/typographic-work-planner/)**