CSS tables - Do you know this?

HTML table is a very easy way to display tabbed panes . Using css div based layout to achieve tabbed layout is bit complicated using float selector in CSS. This can be easily achieved by using CSS tables.

CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers.

Applying display property values to web page elements that is table-related  causes the elements to mimic the characteristics of their HTML table equivalents. Here, I will demonstrate how this will have a huge impact on the way we use CSS for web page layouts.

Here is How we can achieve it:

Specifying the value table for the display property of an element allows you to display the element and its descendants as though they’re table elements. The benefit of using  CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it—without the semantic problems of marking up non-tabular content as a HTML table in the document.

Let’s understand this with simple example: the three-cell grid layout shown below. We’ll look at three different HTML markup samples that will result in the same visual layout. 

<div class="holder">
<div class="table_row">
<div class="table_cell">CELL 1</div>
<div class="table_cell">CELL 2</div>
<div class="table_cell">CELL 3</div>
</div>
</div>


A set of nested div elements may not seem so very exciting, but hang in there, we’re building to something. The CSS is also very simple:

.holder {
  display: table;
}

.table_row {
  display: table-row;
}

.table_cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}

How Does This Work?

The display property allows you to specify a range of table-related values in order to make elements display as though they were table elements. The available display values are:

• table makes the element behave like a table element
• table-row makes the element behave like a table row (tr) element
• table-cell makes the element behave like a table cell (td) element
• table-row-group makes the element behave like a table body row group (tbody) element
• table-header-group makes the element behave like a table header row group (thead) element
• table-footer-group makes the element behave like a table footer row group (tfoot) element
• table-caption makes the element behave like a table caption element
• table-column makes the element behave like a table column (col) element
• table-column-group makes the element behave like a table column group (colgroup) element

This article has presented a basic primer to the usage of the table-related values of the CSS display property—finally, a source of relief for all those struggling to construct reliable grid-based layouts using CSS!