# css2.1 property and value `display: table;`

Skip to: content, navigation

display: layout tutorials:

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

http://www.quirksmode.org/css/display.html

http://tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp

http://www.sitepoint.com/books/csswrong1/

Property | Description
--- | ---
table | The element will behave like a table (like <table>, with a line break before and after)
table-row | The element will behave like a table row (like <tr>)
table-cell | The element will behave like a table cell (like <td>)
table-caption | The element will behave like a table caption (like <caption>)
table-column | The element will behave like a table column
table-column-group | The element will behave like a table column group (like <colgroup>)
table-footer-group | The element will behave like a table footer row group
table-header-group | The element will behave like a table header row group
table-row-group | The element will behave like a table row group

A lily in the gardens of The Vyne Country House

Fuchsia plant in my garden

A crazy looking flower

This robin has been visiting our garden over the summer. He is very friendly and doesn't seem to be too worried about sharing the garden with us.

Considerations:

Source order content control and flexibility: you cannot organize your content to put main content first in source order and have sidebar and navigation follow with floats or positioning to visually position when viewed in the browser. This may affect search engine indexing your important content if it is way down in the code.

Float grids flow: display: table sets fixed row lengths just like old table layout. Sometimes you want content to reorganize to fill the page width, such as page of store items or photo gallery. (http://www.amazon.com/)

You can change content back to display: block by simply changing the css on classes or divs, where old table layout requires going into each page to make layout adjustment.