How to position the caption of a HTML table with CSS

2020-03-09

Below, the captioned tables show the result of styling the types with the CSS:

/* Standard value across all major browsers */
.caption-side-top {
	caption-side: top;
}

/* Standard value across all major browsers */
.caption-side-bottom {
	caption-side: bottom;
}

/* At the time of writing, only works in Firefox */
.caption-side-left {
	caption-side: left;
}

/* At the time of writing, only works in Firefox */
.caption-side-right {
	caption-side: right;
}

Powers of 2, exponents 0 to 3
Exponent	Result
0	1
1	2
2	4
3	8

Powers of 2, exponents 4 to 7
Exponent	Result
4	16
5	32
6	64
7	128

Powers of 2, exponents 8 to 11
Exponent	Result
8	256
9	512
10	1024
11	2048

Powers of 2, exponents 12 to 15
Exponent	Result
13	4096
14	8192
15	16384
16	32768

The caption-side values top and bottom are already in a W3C recommendation, CSS Level 2 (Revision 1), while values left and right current sit in an editor’s draft, CSS Logical Properties and Values Level 1. Therefore, for now, if you are using left and right values, also check that the fallback to top or bottom is acceptable.