How to position the caption of a HTML table with CSS
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.