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.
No comments:
Post a Comment