caption-side

The caption-side property allows you to add a caption to a table. You might use a caption to explain the contents of a table. It works in the same way as the align property on the <caption> tag in standard HTML. For example:

table {caption-side: top;}

By default, the browser centres the caption above the table, but you can place the caption at the top, bottom, left or right edge of the table.

You can also use properties that control margins, width, and alignment with a caption.

Captions that you put above or below a table are initially the same width as the table and aligned with the table. If you change a caption's indentation, it moves with respect to the table, so you can indent your captions positively or negatively. Adjust borders and margins to get more or less space between the table and the caption.

Be careful with captions to the left or right of a table. If you don’t give them a width, the browser might adjust them on your behalf. It may squeeze or stretch your caption depending on the space in the window. To avoid this, use the width property to make sure that your captions always look how you want them to. Use the border and margin properties to adjust the space around the caption.