I came just across this site called Data Tables and Cascading Style Sheets Gallery, and it fits right in with our recent sessions on styling tables. The site is basically like csszengarden. Chris Heilmann, the owner of the site, posted a table and invited users to submit styles for it. Each example is the same table but with a different style sheet. If you are using Firefox or another browser that lets you turn off styles, you can see the unstyled table.
There are also links to other sites for further information and inspiration on styling tables.
It's a lot of fun and should give us all some good ideas.
October 27, 2007
October 22, 2007
October 20 Meeting Report:
More Table Styling
At the October meeting, we continued with styling tables. Our goal for this topic is not just an attractive appearance but also an effective presentation of data. We started with a review of the basics of table HTML and then moved on to some finer points. We then worked on styling the HTML tags.
Much of the styling of tables is the same as any other HTML elements, with things like color, text-align, background, etc. Understanding how a table can be structured with HTML, using the horizontal groups thead, tfoot, and tbody, and the vertical groups col and colgroup, helps to make styling more efficient. There are also specific table styles in CSS: caption-side, border-collapse, and border-spacing. Browser support varies, and border-collapse is probably the most useful of the three.
We also started looking at the HTML border attribute, and we broke it down into its components, frame and rules.
We used this diagram to demonstrate the priorities of elements of a table when it comes to styles: tbl-layers.png.
We will pick up in November with mixing and matching HTML and CSS to make effective table styles that work across browsers. Then we will look at some actual examples of styled tables.
Much of the styling of tables is the same as any other HTML elements, with things like color, text-align, background, etc. Understanding how a table can be structured with HTML, using the horizontal groups thead, tfoot, and tbody, and the vertical groups col and colgroup, helps to make styling more efficient. There are also specific table styles in CSS: caption-side, border-collapse, and border-spacing. Browser support varies, and border-collapse is probably the most useful of the three.
We also started looking at the HTML border attribute, and we broke it down into its components, frame and rules.
We used this diagram to demonstrate the priorities of elements of a table when it comes to styles: tbl-layers.png.
We will pick up in November with mixing and matching HTML and CSS to make effective table styles that work across browsers. Then we will look at some actual examples of styled tables.
October 15, 2007
October 20 Meeting Announcement
The next session of the PACS CSS Workshop will be held this Saturday, October 20. We will start at the usual time, 9 am. But because the Javascript Workshop is off month, we will be splitting that hour with the Flash Workshop. As a result, CSS will go until 10:30. It's a timely opportunity, as I hope to use the extra time to complete the topic of Styling Tables.
We started this subject in June, and in September, we revisited it with a demo of a calendar that one of our members created for his church's website. We also spent some time on display:none, something that I wanted to get in before we went too far into the year. But that left us with a lot of material on tables still to be covered.
So this month, we will use the extra time to do justice to the topic. We will start with a quick review of what we covered previously, and then move on to some more advanced styling methods. I have learned a lot preparing for these sessions, and I think there will be something new for just about everyone.
Be sure to check the PACS website for details on other activities going on this month, including the expanded Flash Workshop and another Web 2.0 topic at the Web Design SIG.
See you Saturday.
We started this subject in June, and in September, we revisited it with a demo of a calendar that one of our members created for his church's website. We also spent some time on display:none, something that I wanted to get in before we went too far into the year. But that left us with a lot of material on tables still to be covered.
So this month, we will use the extra time to do justice to the topic. We will start with a quick review of what we covered previously, and then move on to some more advanced styling methods. I have learned a lot preparing for these sessions, and I think there will be something new for just about everyone.
Be sure to check the PACS website for details on other activities going on this month, including the expanded Flash Workshop and another Web 2.0 topic at the Web Design SIG.
See you Saturday.
Subscribe to:
Posts (Atom)