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.
CSS allows to attach a table behaviour to any structure that is organized similarly to a table using the display property.
| Properties | Description |
|---|---|
| table | attaches a table behaviour to an element |
| table-row | attaches a table row behaviour to an element |
| table-cell | attaches a table cell behaviour to an element |
The table structure is based on the generic <div> and <span> blocks.
In html we can add sections to a table using 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.
To define a table structure having sections, the following possible values of display property
| Properties | Description |
|---|---|
| table-row-group | corresponds to <tbody> elements |
| table-header-group | corresponds to <thead> elements |
| table-footer-group | corresponds to <tfoot> elements |
| table-column-group | corresponds to <colgroup> elements |
| table-column | corresponds to <col> elements |
| table-caption | corresponds 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)
There are several properties than can be applied to the <col> elements of a table.
| Properties | Values | Description |
|---|---|---|
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. |
visibility | hide | hidden | inherit | show | | it defines how the column is rendered. |
Browser render a table according the value of the table-layout property.
The possible values are
| Properties | Values |
|---|---|
auto | (default) First the table data is read, then the row and cell data is complete rendered using the minimum necessary space. |
fixed | First, 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. |
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
| Properties | Description |
|---|---|
baseline | top | bottom | middle | sub | super | text-top | text-bottom | |
| <length> or <percentage> |
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
| Properties | Description |
|---|---|
center | justify | left | right | |
| <string> | (only for table cells; eg text-align: ".") |
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.
<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)
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
| Values | Description |
|---|---|
| <length> | horizontal_distance=vertical_distance |
| <length> <length> | horizontal_distance vertical_distance |
The empty-cells property determines if an empty cell is rendered with a border.
The possible values are
| Properties | Description |
|---|---|
show | to render an empty cell with a border |
hide | to render an empty cell without a border |
The border-collapse determines the border model of the table cells.
The possible values are
| Properties | Description |
|---|---|
collapse | defines a collapsing border model |
separated | defines a separated border model |
