Tables

The following specific table styling properties can be used to control how a table is rendered by the browser:

Property Description Value
border-collapse ¬†Specifies whether borders are collapsed into a single border or separated into separate borders collapse 

separate

inherit

border-spacing *note: ONLY applies to separated cells, see above 

Specifies the distance between borders of adjacent cells

 

Single value set both horizontal and vertical spacing

Two values specify horizontal then vertical spacing

Cannot use negative values

User defined
empty-cells Specifies if border should be shown if cell is empty hide 

show

inherit

table-layout Specifies the table layout algorithm auto 

fixed

inherit

 

Example:

Save & refresh browser:

 

 

 

Table cells, rows and columns have no margins, only padding.

 

vertical-align sets the vertical position of cell contents.

*note: see the Text vertical-align table for details of values for this property)

Leave a Reply