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
ExponentResult
01
12
24
38
Powers of 2, exponents 4 to 7
ExponentResult
416
532
664
7128
Powers of 2, exponents 8 to 11
ExponentResult
8256
9512
101024
112048
Powers of 2, exponents 12 to 15
ExponentResult
134096
148192
1516384
1632768

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.

Leave a Reply

Your email address will not be published.

Color scheme: