Heim > Web-Frontend > CSS-Tutorial > Detaillierte Erläuterung der Titelposition der CSS-Untertiteltabelle

Detaillierte Erläuterung der Titelposition der CSS-Untertiteltabelle

黄舟
Freigeben: 2017-06-30 10:47:01
Original
3162 Leute haben es durchsucht

1. BeschriftungsseiteAttribut

Nach dem Hinzufügen eines Rahmens zur Tabelle lautet der Standardstil wie folgt:

Detaillierte Erläuterung der Titelposition der CSS-Untertiteltabelle

Was ist, wenn wir den Tabellentitel anpassen möchten?

In CSS verwenden wir das caption-side-Attribut, um die Position des Tabellentitels zu definieren.

Syntax:

caption-side: Attributwert;

Beschreibung:

Der Wert des caption-side-Attributs ist wie folgt:

Detaillierte Erläuterung der Titelposition der CSS-Untertiteltabelle

Beispiel:

<!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>
Nach dem Login kopieren

Der Vorschaueffekt im Browser ist wie folgt:

Detaillierte Erläuterung der Titelposition der CSS-Untertiteltabelle

Analyse:

Der Tabellentitel ist ein Beschriftungselement. Um die Position des Tabellentitels festzulegen, können wir ihn im Beschriftungselement oder im Tabellenelement festlegen. Aber im Allgemeinen legen wir es im caption-Element fest.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Titelposition der CSS-Untertiteltabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage