Categories

CSS Tables

Posted on: December 20, 2013 by Dimitar Ivanov

The TABLE element defines a table for multi-dimensional data arranged in rows and columns. In the past TABLE was commonly used as a layout device, but you should avoid this practice as much as possible.

In this css table tutorial I will try to cover topics as horizontal and vertical bordering, highlighting rows and columns, rounded corners, sticky column, responsive tables, how to use colgroup. Let's go deep in CSS Tables with next examples:

Simple bordered table

To control space between borders you can use border-spacing css property, but better to collapse border spacing with border-collapse property.

<style type="text/css">
.zui-table{
    border-collapse: collapse;
}
</style>

Horizontal table

See next example to learn how to make a horizontal table with CSS. You need to remove the cell's left and right border.

<style type="text/css">
.zui-table-horizontal tbody td {
    border-left: none;
    border-right: none;
}
</style>

Zebra Striped Table

Next example shows how to make a zebra striping table with CSS3. You need to use CSS3 :nth-child selector.

<style type="text/css">
.zui-table-zebra tbody tr:nth-child(odd) {
    background-color: #fff;
}
.zui-table-zebra tbody tr:nth-child(even) {
    background-color: #EEF7EE;
}
</style>

Vertical Table

See next example to learn how to make a vertical table with CSS. To do that you need to remove top and left cell border.

Zebra Stripe Table Columns

Learn how to make zebra stripe table columns with colgroup and col HTML elements.

Highlighting Row

Next example shows how to hightlight selected table row. You need to use CSS background-color property applied to the selected row.

Highlighting Rows on Hover

Next example shows how to highligh table row on hover. You can use CSS without any javascript to make the row of a table highlight on hover. All it requires is that the use the pseudo class :hover to add the effect to the table row.

<style type="text/css">
.zui-table-highlight tbody tr:hover {
    background-color: #CCE7E7;
}    
</style>

Highlighting Columns on Hover

See next example to learn how to highlight columns on hover with CSS. You can use CSS3 :after pseudo-element.

Highlighting Rows and Columns on Hover

See how to highlight rows and columns on hover with :hover CSS pseudo-class, :after and :before CSS pseuso-elements.

Rounded Corners

Next example shows how to make a table with rounded corners. All that you need is to use CSS3 border-radius property.

Table with Sticky Column

Next example shows how to make a table with a fixed first column using CSS.

Responsive Table

At the end, but not last, let's see the responsive table example. Do not forget to include the viewport meta tag to control layout on mobile browsers.

Editor's Note: For accuracy and comprehensiveness this article were revised in May 2015 and the responsive table example has been added.

Conclusion

The examples show that the CSS tables still have his use and that are indispensable for visualizing structured data in tabular form. And remember this - avoid using tables as layout, stay away from all deprecated attributes in favor of style sheets.

See also
Social sharing

If you have questions about the examples above or CSS tables in general, please leave a comment below. And do not be shy to share this article. Thanks so much for reading!


0 Comments

Comments are closed