CSS Caption-side table header location

First, Caption-side properties

After the table joins the border, the default style is as follows:

What if we want to adjust the table title?

In CSS, we use the Caption-side property to define the position of the table header.

Grammar:

Caption-side: attribute value;

Description

The Caption-side property is evaluated as follows:

Example:

<! DOCTYPE html> 
The preview effect in the browser is as follows:


Analysis:

The table header is the caption element, set the table header position, we can set in the caption element or table element, the effect is the same. But in general we are set in the caption element.