I had collated a lot of statistics from across the web and I wanted to display it in a bright, bold, bite-sized manor. What do I mean by bite-sized? I mean that there will be a lot of text making a point and then below some figures that correlate to it. I wanted it so that if someone wanted to get the gist of the page they could just read key headings and tables rather than be deterred by reams of text. It would also make for a point to draw the eye so they would see that then want to go back and read what it is about in more detail. To accomplish this I knew I wanted to have some bright tables and some cool charts to display the information.
Tables:
The tables were fairly straight forward. There is a tag in HTML5 which is the <table> tag. This can create a table of any size and complexity more or less. Within that you have <th> for table headings, <td> for cells in the column and <tr> to make a new table row. I used this to write out a table in HTML:
This created a table comparing the Pacific to the other major oceans of the world. I then wanted to style it in CSS. For this I wanted a zebra type effect to make it so each row would have an alternating colour scheme. This aids readability and makes it so you can quickly digest the information. To do this I used a pseudo class in CSS3. It is the "nth-of-type" class. It allows you to specify a value and it will apply the rules below to each corresponding value. I used the value "even" which made it apply the rules to any even row (e.g. 2,4,6,8 etc.). With this styling in CSS:
I created this look on my website:
I am really happy with the look and feel of the table. It is bright and bold and garish yet still adheres to my colour scheme and theme. It displays the information cleanly and sleekly and looks good.
No comments:
Post a Comment