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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!