CSS에서 테이블 제목(캡션 태그)의 위치를 ​​설정하는 방법

Css caption-side 속성의 관련 속성 값을 설정하여 테이블(

) 제목(캡션 태그)의 위치를 ​​지정할 수 있습니다. 즉, caption-side 속성을 사용하여 어느 쪽을 지정할지 지정할 수 있습니다. 제목이 있는 테이블.

테이블에서 캡션 태그는 제목이나 간단한 설명 등 테이블에 대한 짧은 제목을 제공하는 데 사용됩니다. 캡션 태그는 여는

태그 뒤에 삽입되며 항상 테이블의 첫 번째 하위 항목이어야 합니다. 그런 다음 캡션 측 속성을 사용하여 테이블에서의 위치를 ​​변경할 수 있습니다.

캡션 측 속성을 사용하여 제목이 표 위 또는 아래에 위치하도록 지정하여 표 제목을 표 위 또는 아래에 배치할 수 있습니다.

참고:

1. CSS 2.1 이전에는 제목을 테이블의 왼쪽과 오른쪽에 각각 배치하기 위해 "left"와 "right"라는 두 가지 값이 제공되었습니다. 그러나 이 두 값은 최종 2.1 사양에서 제거되었으며 이제 비표준이며 브라우저와 잘 호환되지 않습니다.

2. 제목 상자의 제목 내용을 "수평으로 정렬"하려면 text-align 속성을 사용해야 하며 text-align 속성을 통해 다른 정렬 방법을 설정할 수도 있습니다.

caption-side 속성이 테이블의 제목 위치를 어떻게 설정하는지 살펴보겠습니다.

캡션 측 속성의 기본 구문:

caption-side: top | bottom | inherit

기본 속성: top

적용 대상: 'table-caption' 요소

애니메이션: 없음

caption 측 속성 값 설명:

top: 제목은 테이블 위에 위치할 수 있습니다.

하단: 제목은 표 아래에 위치할 수 있습니다.

inherit: 부모의 직위를 상속받습니다.

캡션 측 속성 예:

1. 제목은 표 위에 있습니다.

html 코드:

<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 코드:

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

렌더링:

2.

HTML 코드:

<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 코드:

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

렌더링:

브라우저 지원:

Chrome, Firefox, Safari와 같은 모든 주요 브라우저는 캡션 측 속성을 지원합니다. , Opera, Internet Explorer 8 이상, Android 및 iOS

참고:

1 IE8은 !DOCTYPE이 지정된 경우 캡션 측 속성만 지원합니다.

2. Firefox에서는 왼쪽과 오른쪽의 두 가지 비표준 값이 지원됩니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS에서 테이블 제목(캡션 태그)의 위치를 ​​설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!