Changing the style of tables in CSS

Some properties of CSS are designed to change styling of tables. In the analysis of the properties we will restrict ourselves to the enunciation of the basic concepts, leaving out the myriad of details and often complex rules that govern its behavior. Moreover, the use of these properties is very small given that the same results can be obtained in various ways, even with the traditional embedded systems (X) HTML.

table-layout

This property sets the method of layout of a table. It is not inherited. It applies only to tables.

<selector> {table-layout: <value>;}

Values -

• car. The layout of the table is automatically set by the browser.
• fixed. The presentation rules are those set by the author in CSS.

If the value is assigned to drive all of UA-rendering engine. Using fixed instead we first define the table width using the width property. Wanting to create a table of 400px, then, we will write this rule:

Code:

---

table {
table-layout: fixed;
width: 400px;
}

---

You understand well that the same thing you can get in (X) HTML, always using the width attribute:

Code:

---

<table width="400px">

---

border-collapse

With this property we can determine how to treat the edges and the spaces between cells in a table. This only applies to tables and is inherited.

<selector> {border-collpse: <value>;}

Values -

• collapse. If you set a border, the table cells share it.
• separate. If you set a border, each cell has its own, separate from the others. The space between cells and between the edges is set with the border-spacing.

Examples

Code:

---

table {
border: 2px solid black;
border-collapse: separate;
border-spacing: 5px;
}

---

border-spacing

Sets the space between cells in a table. It should be used only in the presence of a model set up separate border-collapse. Inherited property and applies only to tables.

Syntax

<selector> {border-spacing: <value>;}

Values -

• a numeric value with units

empty-cells

Manages the processing of table cells without content. It acts only on those that do not have within them any kind of markup, even the classic quote in its kind to simulate the presence of content. Inherited property.

Syntax

<selector> {empty-cells: <value>;}

Values -

• show. Show the cell borders.
• hide. The edges are not shown and you will see only a blank space.

caption-side

The good standards of accessibility that takes a table is always preceded by a sort of title / abstract. In (X) HTML this function is delegated to the tag <CAPTION> of which we give below an example of the syntax:

Code:

---

<table>
<caption> title of the table </ caption>
<tr>
<td> ...
</Table>

---

The property caption-side down the side on which we want to bring up this title is inherited. The only support Mozilla.

Syntax

<selector> {caption-side: <value>;}

Values -

• top. Caption at the top.
• right. Caption on the right side.
• bottom. Caption on the bottom.
• left. Caption on the left side.

Code:

---

table.table9 {
table-layout: fixed;
width: 300px;
background: Silver;
caption-side: bottom;
}

---