To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. The alternating background color can serve as a visual cue for people when scanning the table. Zebra-tables are pretty attractive and usable. If your site is heavy on graphics, it will be pretty hard to use this style.Ĭhoose a color scheme that matches with your siteĮasy to style, flexible for large or small tablesĬhoosing the perfect color scheme could be trickyĬolors and borders, use dashed or dotted to achieve cute effects, typography, icons The tricky part is actually trying to find the color scheme that matches with your site. This style is nowadays probably the most used style. An example of a box style table is the following table: Employee Don’t forget to accentuate the differences of each cell by defining border as a separator. Pick a good color scheme and then distribute background-color to all the cells. The most dependable of all styles, the box style works for all kinds of tables. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.Ĭarefully finetune the typography and the padding between the cells, do not add tr:hover effectĬan not be used if background is not a solid block of color, suitable only for some tables Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. You can use transparent borders if you want, but IE 6 screws it all up. ComedyĪdd large border-left and border-right with the same color as background. We can style it in minimalistic style by adding whitespace separators between columns.
The lack of border, however, makes this table design hard to read if it has too many rows. Employeeīecause horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table.
Simply set enough padding to the cells ( td and th) and put a 2 pixel border underneath the header. You can style these types of tables with minimalist style. Horizontal tables are tables that are read rather horizontally than vertically. Now that we are all set up let’s get going, shall we? 1. Make sure that the style you apply to it makes the content more readable, not the other way around. Don’t treat your table like it’s a graphical decoration. Use soft colors - it’s easier for the eyes. So be careful with the amount of contrast you are giving to your table. Tables are read similarly to the way we read text - except it’s harder and it takes more time to read a table. Treat tables the way you treat content.But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
Sure, each table cell relates to each other. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width. If you don’t know the perfect width, simply set the width of the table to 100%. Set the width of tables carefully, according to the content. Before we start, let’s review the general rule of thumb for styling of tables:
0 kommentar(er)
