Tables

Tables require special attention in css because they are organized structures. Link for tables. When the <table> element is rendered, it generates a block-level box by default.

cssTables

CSS allows to attach a table behaviour to any structure that is organized similarly to a table using the display property.

PropertiesDescription
tableattaches a table behaviour to an element
table-rowattaches a table row behaviour to an element
table-cellattaches a table cell behaviour to an element

The table structure is based on the generic <div> and <span> blocks.

Advanced Html tables

In html we can add sections to a table using the element for the table caption, the <thead> and <tfoot> elements to add a header and a footer, and one or more <tbody> elements to define body sections. <colgroup> and <col> elements can be used to define column attributes.

Advanced css tables

To define a table structure having sections, the following possible values of display property

PropertiesDescription
table-row-groupcorresponds to <tbody> elements
table-header-groupcorresponds to <thead> elements
table-footer-groupcorresponds to <tfoot> elements
table-column-groupcorresponds to <colgroup> elements
table-columncorresponds to <col> elements
table-captioncorresponds to <caption> elements

The <caption> element , the 'caption-side' property allows to define where the table caption will be rendered. The possible values are.

bottom | left | right | top (the default value)
Column properties

There are several properties than can be applied to the <col> elements of a table.

PropertiesValuesDescription
border<length> <border-style> <color>it defines the border width, style and color.
background<color>it defines the background color.
width<length>it defines the column width.
visibilityhide | hidden | inherit | show | visibleit defines how the column is rendered.
Table layout

Browser render a table according the value of the table-layout property.

The possible values are

PropertiesValues
auto(default) First the table data is read, then the row and cell data is complete rendered using the minimum necessary space.
fixedFirst, the table rows and cells are rendered using the specified values for width and height, then the table data is rendered using the existing space.
vertical alignment

The vertical-align property allows you to set the vertical alignment between several in-line elements that belong to the same parent (eg - same table cell)

The possible values are

PropertiesDescription
baseline | top | bottom | middle | sub | super | text-top | text-bottom
<length> or <percentage>
horizontal alignment

The text-align property allows you to set the horizontal alignment for the content relative to the element box. This property can also be attached to the <col> or <table> element. The 'text-align' property is inherited by all the child elements when applied to the parent element.

The possible values are

PropertiesDescription
center | justify | left | right
<string>(only for table cells; eg text-align: ".")
Note
The default value is left. The <col> setting has a greater priority that the <tr> setting.
Border for table cells

CSS allows you to define the style, width and color for the table elements, similar to any kind of boxes. It can be done using border-style, boder-width, border-color or border properties.

Note
The <tr> elements are rendered without a border. The style defined for a <table> element doesn't apply to its children. The style defined for <tr> elements applies to the <td> elements. (only internet explorer)
border spacing

The border-spacing property determines the distance between the border of two adjacent cells. This property allows you to specify different spacing values horizontally and vertically.

The possible values are

ValuesDescription
<length>horizontal_distance=vertical_distance
<length> <length> horizontal_distance vertical_distance
empty cells

The empty-cells property determines if an empty cell is rendered with a border.

The possible values are

PropertiesDescription
showto render an empty cell with a border
hideto render an empty cell without a border
border collapse

The border-collapse determines the border model of the table cells.

The possible values are

PropertiesDescription
collapsedefines a collapsing border model
separateddefines a separated border model
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents