html5 테이블 태그 스타일 소개(첨부된 내용은 html5 테이블 CSS 센터링 예시입니다)-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5 테이블 태그 스타일 소개(첨부된 내용은 html5 테이블 CSS 센터링 예시입니다)

寻∝梦

Aug 21, 2018 pm 02:19 PM

html5 table

html 테이블 태그 스타일 소개(html5 테이블 CSS 센터링 예시 첨부) 이번 글에서는 주로 html5 테이블 태그의 정의와 다양한 스타일 소개에 대해 설명합니다.

HTML 5

태그 정의 및 사용법:

태그는 테이블을 정의할 수 있습니다.

태그 안에는 표 제목, 표 행, 표 열, 표 셀 및 기타 표를 배치할 수 있습니다.

html 테이블 태그의 표준 속성:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, Registrationmark, tabindex, template, title

html 테이블 스타일 예제 소개:

<table border="1">
    <tr>
            <td width="95" align="right" valign="top" nowrap="nowrap"><strong>处理意见：</strong></td>    
            <td id="fnote"  width="300px" colspan="8"> </td>                     
    </tr>
    <tr>
            <td><a href="#" onclick="showad()">审批记录</a></td>
    </tr>                
</table>

로그인 후 복사

width: 열의 너비

align: 셀 내용의 가로 배열: 오른쪽 왼쪽 가운데

valign: 셀 내용의 세로 배열: 위쪽 아래쪽 중간 기준선

colspan: 셀 내용의 세로 배열: 위쪽 아래쪽 중간 기준선

colspan: 셀 내용의 세로 배열: 셀이 확장될 수 있음

rowspan: 셀이 확장될 수 있는 행 수

rowspan=3 tr

nowrap: 셀의 내용을 접을지 여부를 지정

테이블별 스타일 속성:

1. 테두리 병합

속성: border-collapse

값:

1, 분리

기본값, 테두리 분리 모드

2, 붕괴

테두리 병합 모드

2, 테두리 여백

1, function

인접한 셀 테두리 사이의 거리를 설정합니다(cellspacing과 유사)

2. 속성

border-spacing

값:

1. 1개의 값을 취합니다.

은 가로 및 세로 간격이 동일함을 의미합니다.

2, 2개의 값을 취함

첫 번째 값으로 표시되는 가로 간격

두 번째 값으로 표시되는 세로 간격

두 값을 공백으로 구분

3 요구 사항

border-collapse는 분리되어야 합니다

별도 테두리 모드에서 유효해야 합니다

3. 제목 위치

기능: 제목 위치를 기본 위치에서 표 아래로 변경합니다

속성: caption-side

값:

1. top

default

2. Bottom

제목은 테이블 아래에 있습니다.

div를 사용하여 CSS에서 테이블 중앙에 배치:

할 수 있는지 확인하세요. display: table-cell을 사용하십시오. div는 셀로 렌더링되고 테이블 td의 내용은 모두 중앙에 배치됩니다. 그런 다음 div가 포함된 div를 생각했는데 내부에 div를 수직으로 중앙에 배치하는 방법을 사용할 수 있을 것 같습니다.

외부 div를 display:table-cell로 설정하면 내부 div가 자동으로 수직 중앙에 배치됩니다.

테스트 결과 내부 div가 중앙에 위치하지 않은 것으로 확인되었으므로 다음과 같은 이유로 수직 정렬을 사용하여 중앙에 배치합니다. 한 요소가 인라인 또는 인라인 블록(table-cell은 인라인 블록 수평으로도 이해될 수 있음) 수준에 속하면 해당 요소의 수직 정렬 속성이 적용됩니다.

예를 들어 그림, 버튼, 단일 확인란, 한 줄/여러 줄 텍스트 상자 등과 같은 HTML 컨트롤. 기본적으로 이러한 요소만 수직 정렬 속성에 영향을 미칩니다.

이제 테이블 셀에서 수직 정렬:가운데를 사용하여 내용을 수직으로 가운데에 맞출 수 있습니다. 가로 가운데에 맞추려면 어떻게 해야 합니까? text-algin: center, 인라인 요소에 적합하고 내부 div를 line-block으로 설정하면 됩니다.

코드 확인:

<style>
        .table {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .like {
            display: inline-block;
            width:100px;
            height:50px;
            border:2px solid black;
        }
    </style>
<div class="table" style="width:300px;height: 300px;background-color: #13c4a5">
    <div class="like">
    </div>
</div>

로그인 후 복사

[관련 권장 사항]

html Strong 태그는 무엇을 의미하나요? html

에서 Strong 태그의 구체적인 사용법에 대한 소개입니다. html5 오디오 태그를 사용하는 방법은 무엇입니까? HTML5 자동 재생 구현 코드 예시

위 내용은 html5 테이블 태그 스타일 소개(첨부된 내용은 html5 테이블 CSS 센터링 예시입니다)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.