Detailed explanation of css caption-side table title position

黄舟
Release: 2017-06-30 10:47:01
Original
3131 people have browsed it

1. caption-sideAttributes

TableAfter adding the border, the default style is as follows:

Detailed explanation of css caption-side table title position

What should we do if we want to adjust the table title?

In CSS, we use the caption-side attribute to define the position of the table title.

Syntax:

caption-side: attribute value;

Description:

The value of the caption-side attribute is as follows:

Detailed explanation of css caption-side table title position

Example:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>caption-side属性</title>
    <style type="text/css">
        table,th,td{border:1px solid gray;}
        caption{caption-side:bottom}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
        <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
Copy after login

The preview effect in the browser is as follows:

Detailed explanation of css caption-side table title position

Analysis:

The table title is a caption element. To set the position of the table title, we can set it in the caption element or table element, and the effect is the same. But generally we set it in the caption element.

The above is the detailed content of Detailed explanation of css caption-side table title position. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template