So legen Sie die Position des Tabellentitels (Caption-Tag) in CSS fest

Wir können die Position des Tabellentitels (

) (Caption-Tag) angeben, indem wir den relevanten Attributwert des CSS-Attributs caption-side festlegen. Das heißt: Sie können das caption-side-Attribut verwenden, um anzugeben, wo Der Titel befindet sich auf der Tabellenseite.

In einer Tabelle wird das Beschriftungs-Tag verwendet, um einen kurzen Titel für die Tabelle bereitzustellen, beispielsweise einen Titel oder eine kurze Beschreibung. Das Beschriftungs-Tag wird nach dem öffnenden

-Tag eingefügt und sollte immer das erste untergeordnete Element der Tabelle sein. Dann können wir das caption-side-Attribut verwenden, um seine Position in der Tabelle zu ändern.

Wir können das caption-side-Attribut verwenden, um den Tabellentitel über oder unter der Tabelle zu positionieren und so anzugeben, dass sich der Titel über oder unter der Tabelle befindet.

Hinweis:

1. Vor CSS 2.1 wurden zwei Werte bereitgestellt: „left“ und „right“, um den Titel links und rechts zu positionieren die Tabelle jeweils rechts. Diese beiden Werte wurden jedoch in der endgültigen 2.1-Spezifikation entfernt und sind nun nicht mehr standardisiert und nicht sehr kompatibel mit Browsern.

2. Wenn Sie den Titelinhalt im Titelfeld „horizontal ausrichten“ möchten, müssen Sie das text-align-Attribut verwenden. Sie können auch andere Ausrichtungsmethoden über das text-align-Attribut festlegen.

Sehen wir uns an, wie das caption-side-Attribut die Titelposition der Tabelle festlegt.

Grundlegende Syntax für das caption-side-Attribut:

caption-side: top | bottom | inherit

Standardattribut: top

Gilt für: 'table- caption '

Animation im Element: Nein

caption-side-Attributwertbeschreibung:

top: Sie können den Titel über der Tabelle positionieren.

unten: Der Titel kann unterhalb der Tabelle positioniert werden.

erben: Übernimmt die Titelposition von der Titelposition des übergeordneten Elements.

Beispiel für ein Beschriftungsattribut:

1. Titel über der Tabelle

HTML-Code:

<table class="default">
    <caption><em>表的标题，位置：顶部（默认）</em></caption>
    <thead>
      <tr>
        <th>标题内容 1</th>
        <th>标题内容 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>页脚内容 1</td>
        <td>页脚内容 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>主体内容 1</td>
        <td>主体内容 2</td>
      </tr>
    </tbody>
  </table>

CSS-Code:

caption {
  caption-side: top;
  padding: .5em;
  color: #de64a4;
}

Rendering:

2. Der Titel befindet sich unter der Tabelle

HTML-Code:

<table>
    <caption><em>表的标题，位置：底部</em></caption>
   <thead>
      <tr>
        <th>标题内容 1</th>
        <th>标题内容 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>页脚内容 1</td>
        <td>页脚内容 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>主体内容 1</td>
        <td>主体内容 2</td>
      </tr>
    </tbody>
  </table>

CSS-Code:

caption {
  caption-side: bottom;
  padding: .5em;
  color: #de64a4;
}

Rendering:

Browserunterstützung:

Das caption-side-Attribut wird in allen gängigen Browsern unterstützt, wie zum Beispiel: Chrome, Firefox, Safari, Opera, Internet Explorer 8+ sowie Android und iOS

Hinweis:

1. IE8 unterstützt das caption-side-Attribut nur, wenn !DOCTYPE angegeben ist.

2. Zwei nicht standardmäßige Werte, links und rechts, werden in Firefox unterstützt.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Position des Tabellentitels (Caption-Tag) in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!