Each feature in detail MDN The border-collapseCSS property sets whether cells inside a <table>
Live preview Example from MDN
border-collapse: collapse; border-collapse: separate;
table { width : 15 rem ; table-layout : fixed ; } td { border : 5 px solid ; border-color : crimson dodgerblue orange limegreen ; padding : 0.75 rem ; } < section class = "default-example" id = "default-example" > < table class = "transition-all" id = "example-element" > < tbody > < tr > < td >Cell 1.1</ td > < td >Cell 1.2</ td > </ tr > < tr > < td >Cell 2.1</ td > < td >Cell 2.2</ td > </ tr > < tr > < td >Cell 3.1</ td > < td >Cell 3.2</ td > </ tr > </ tbody > </ table > </ section > Syntax separate | collapseFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial separate Applies to table grid boxes Inherited yes Percentages n/a Computed value specified keyword Canonical order per grammar Animation type discrete Browser support First browser version supporting border-collapse Chrome 1 Edge 12 Firefox 1 Safari 1.1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The border-spacingCSS property sets the distance between the borders of adjacent cells in a <table>border-collapseseparate.
Live preview Example from MDN
border-spacing: 0; border-spacing: 5px; border-spacing: 5px 1rem;
table { width : 15 rem ; table-layout : fixed ; } td { border : 5 px solid ; border-color : crimson dodgerblue ; padding : 0.75 rem ; } < section class = "default-example" id = "default-example" > < table class = "transition-all" id = "example-element" > < tbody > < tr > < td >Cell 1.1</ td > < td >Cell 1.2</ td > </ tr > < tr > < td >Cell 2.1</ td > < td >Cell 2.2</ td > </ tr > < tr > < td >Cell 3.1</ td > < td >Cell 3.2</ td > </ tr > </ tbody > </ table > </ section > Syntax <length [0,∞]>{1,2}Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0px 0px Applies to table grid boxes when border-collapse is separate Inherited yes Percentages n/a Computed value two absolute lengths Canonical order per grammar Animation type by computed value Browser support First browser version supporting border-spacing Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The caption-sideCSS property puts the content of a table's <caption>writing-mode
Live preview Example from MDN
caption-side: top; caption-side: bottom;
table { font-size : 1.2 rem ; text-align : left ; color : black ; } th , td { padding : 0.2 rem 1 rem ; } caption { background : #ffcc33 ; padding : 0.5 rem 1 rem ; } tr { background : #eeeeee ; } tr :nth-child ( even ) { background : #cccccc ; } < section class = "default-example" id = "default-example" > < table class = "transition-all" id = "example-element" > < caption > Famous animals </ caption > < tbody > < tr > < th >Name</ th > < th >Location</ th > </ tr > < tr > < td >Giraffe</ td > < td >Africa</ td > </ tr > < tr > < td >Penguin</ td > < td >Antarctica</ td > </ tr > < tr > < td >Sloth</ td > < td >South America</ td > </ tr > < tr > < td >Tiger</ td > < td >Asia</ td > </ tr > </ tbody > </ table > </ section > Syntax top | bottomFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial top Applies to table-caption boxes Inherited yes Percentages n/a Computed value specified keyword Canonical order per grammar Animation type discrete Browser support First browser version supporting caption-side Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The empty-cellsCSS property sets whether borders and backgrounds appear around <table>
Live preview Example from MDN
empty-cells: show; empty-cells: hide;
th , td { border : 2 px solid #aa1199 ; padding : 0.25 rem 0.5 rem ; } < section class = "default-example" id = "default-example" > < table class = "transition-all" id = "example-element" > < tbody > < tr > < th >Client Name</ th > < th >Age</ th > </ tr > < tr > < td ></ td > < td >25</ td > </ tr > < tr > < td >Louise Q.</ td > < td ></ td > </ tr > < tr > < td >Owen B.</ td > < td ></ td > </ tr > < tr > < td >Stan L.</ td > < td >71</ td > </ tr > </ tbody > </ table > </ section > Syntax show | hideFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial show Applies to table-cell boxes Inherited yes Percentages n/a Computed value specified keyword Canonical order per grammar Animation type discrete Browser support First browser version supporting empty-cells Chrome 1 Edge 12 Firefox 1 Safari 1.2 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The table-layoutCSS property sets the algorithm used to lay out <table>
Live preview Example from MDN
table-layout: auto;
width: 150px; table-layout: fixed;
width: 150px; table-layout: auto;
width: 100%; table-layout: fixed;
width: 100%;
table { border : 1 px solid #113399 ; } th , td { border : 2 px solid #aa1199 ; padding : 0.25 rem 0.5 rem ; } < section class = "default-example" id = "default-example" > < table class = "transition-all" id = "example-element" > < tbody > < tr > < th >Name</ th > < th >Location</ th > </ tr > < tr > < td >Lion</ td > < td >Africa</ td > </ tr > < tr > < td >Norwegian Lemming</ td > < td >Europe</ td > </ tr > < tr > < td >Seal</ td > < td >Antarctica</ td > </ tr > < tr > < td >Tiger</ td > < td >Asia</ td > </ tr > </ tbody > </ table > </ section > Syntax auto | fixedFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial auto Applies to table grid boxes Inherited no Percentages n/a Computed value specified keyword Canonical order per grammar Animation type discrete Browser support First browser version supporting table-layout Chrome 14 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 3
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗