Table

CSS provides different properties to change style of the HTML table.

Border Collapse

 The border-collapse property is used to display borders between table cells.

border-collapse
Syntax:
 border-collapse: value;
Values: separate | collapse
Default: separate
Applies to: table and inline-table elements
Inherits: yes

Example
 table { border: none;
 border-collapse: separate;
 }
Border Spacing

 The border-spacing property specifies the space between cell borders.

border-spacing
Syntax:
border-spacing: value;
Values: horizontal-length vertical-length
Default: 0
Applies to: table and inline-table elements.
Inherits: yes

Example
 Table {border: none;
 border-collapse: separate;
 border-spacing: 15px 5px;
 }
Empty Cells

 The empty-cells property is used to display borders of empty cells.

empty-cells
Syntax
: empty-cells: value;
values: show | hide
Default: show
Applies to: table cell elements
Inherits: yes

Example
 table { empty-cells: hide; }
Table Layout

 The table-layout property have two method.
Fixed: calculate the table, column and cells width.
Auto: calculate the contents width of the table.

table-layout
Syntax
: table-layout: value;
values: auto | fixed
Default: auto
Applies to: table and inline-table element
Inherits: yes

Example
table { table-layout: auto;}
Caption Side

 The caption-side property is used to control the placement of the table caption.

caption-side
Syntax:
caption-side: value;
Values: top | bottom
Default: top
Applies to: table caption elements
Inherits: yes

Example
table-c { caption-side: bottom; }
Table Display

 The display property used to specify the behave of table to an element.

display
Syntax:
display: value;
Values: table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column | table-column-group | table-cell | table-caption

Leave a Reply