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. Cons tr:hover rules don’t work in IE 6, table can be confusing if it has too many columnsĬolor scheme, typography, tr:hover effectsĪlthough rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column.Very easy to style, good for simple tables When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.Ĭarefully finetune the typography and the padding between the cells The tr:hover rules are very useful to aid people reading a minimally designed tables.
To counter it we simply add 1 pixel border underneath all td elements: Employee 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)
