HTML 테이블이란 무엇입니까? 태그의 다양한 속성을 사용하는 방법

HTML 테이블이란 무엇인가요?

태그의 다양한 속성과 용도는 모두 이 문서에 나와 있습니다. 이 문서는 테이블의 모든 기본 속성을 명확하게 설명합니다. html 테이블 테이블에도 속성과 몇 가지 사용법이 있습니다

우선 테이블이 무엇인지, 테이블의 역할을 이해하겠습니다

테이블이란 무엇입니까? 테이블이라는 직사각형 상자로 구성됩니다. 셀을 왼쪽에서 오른쪽 순서로 위에서 아래로 오른쪽으로 배열하여

테이블을 구성합니다. 테이블의 기능: 정보를 특정 구조로 표시합니다.

테이블 사용 방법 테이블:

테이블 정의:

테이블 행 만들기:

열(셀) 만들기:

참고: 기본적으로 각 행의 열 수는 일정합니다. ㅋㅋㅋ

1,

속성

1.width: 테이블 너비 설정 2.height: 테이블 높이 설정

3.align: 상위 요소에서 테이블의 가로 정렬 설정, value ： left,center,right

4.border: 테두리, 테두리 너비, px 값, px 생략 가능

5.cellpadding

                                                    ‐ ‐ ‐ OUTOUT ps out‐'' 5. 6.cellspacing

셀 여백

셀 사이 또는 셀과 테이블 사이의 거리

7.bgcolor: 배경색

2. 테이블의

속성

1.align: 이 줄 내용의 가로 정렬

2.valign

이 줄 내용의 수직 정렬

값: top, middle, Bottom

3.bgcolor

3. 테이블의

3 테이블의 복잡한 적용

1. 표는 3부분으로 나눌 수 있습니다

1. 표 헤더

2. 표 본문

3. 표 바닥글

< ;/tfoot>

<table>
    <tbody>
         <tr></tr>
         <tr></tr>
    </tbody>
</table>

참고: 잘못된 경우 테이블 행이 그룹화되면 기본적으로 모두 tbody

2에 속합니다. 불규칙한 테이블의 각 행에 있는 열 수

는 그렇지 않습니다. 통일.

1. 열 병합

열 병합, 지정된 셀을 수평으로 오른쪽으로 이동, 여러 셀 병합(자신 포함)

구문: ​​td

2의 colspan 속성

행 병합, 지정된 셀을 병합합니다. cell, 수직 하향, 여러 셀 병합(자신 포함)

구문: ​​td의 rowspan 속성

참고: 행이든 열이든 상관없이 병합된 셀은 코드에서 삭제되어야 합니다

3. 테이블 중첩

테이블에 다른 테이블이 포함되어 있습니다.

중첩 테이블은

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

속성: caption-side

값:

1. top: 기본값

2. 하단: 제목은 아래 테이블에 있습니다.

4. html 테이블 테이블 스타일 속성의 표시 규칙

1.Function

브라우저가 테이블을 레이아웃하는 방법을 지정합니다. 이는 실제로 셀

기본 알고리즘의 알고리즘 규칙을 지정합니다. 셀의 너비는 내용에 따라 결정되며 설정된 너비 값에 의해 제한되지 않습니다.

2. 속성: table-layout

값:

1. 자동: 기본값, 자동, 열 너비는 내용에 따라 결정됩니다.

2 고정: 테이블 레이아웃은 고정되고, 열 너비는 설정된 값에 따라 결정됩니다.

3. 자동 테이블 레이아웃 & 고정 테이블 레이아웃

1. 자동 테이블 레이아웃(자동)

셀 크기가 콘텐츠 크기에 맞춰 조정됩니다.

테이블이 복잡하면 로딩이 느려집니다

적합합니다. 각 열에 대한 불확실성을 위해

크기에 대한 전통적인 테이블 표시 방법 사용

2. 고정 테이블 레이아웃(고정)

셀의 크기는 설정된 값에 따라 결정되며 내용과 관련이 없습니다

테이블 표시 속도를 높이고 브라우저는 로드 후 먼저 테이블을 표시합니다. 작동하면 더 이상 계산할 필요가 없습니다.

4. 숨겨진 표시 효과

속성: visible:collapse

테이블의 전체 레이아웃에 영향을 주지 않고 행이나 열을 삭제하는 데 사용됩니다.

이 글을 읽어주셔서 감사합니다. ? 이에 대해 아래에서 질문할 수 있습니다.

이 고급 버전에 대한 또 다른 기사가 있습니다. 클릭해 주세요.

html5 테이블 태그 스타일 소개(html5 테이블 CSS 센터링 예시 포함)

【에디터 관련 기사】

html em 태그란 무엇입니까? 기능? 태그와 태그의 차이점

html optgroup 태그는 무엇을 의미하나요? html optgroup 태그의 사용법 및 속성 예 분석

속성 width height align valign bgcolor colspan: 열 전체에 셀 설정 rowspan: 테이블에 셀 교차 -bank 表 및 기타 표시 설정: 1, & lt; 캡션 & gt; & lt;/capption & gt; <table> <caption>标题</caption> <tr> <td></td> <td></td> </tr> </table> 2. 행 제목 또는 열 제목 열 제목: 첫 번째 행의 각 열, 굵게, 가로 중심 효과 각 행의 첫 번째 열, 굵은 글씨, 가로 중앙 정렬 효과는 행(열) 제목:

<table> <tr> <td> <table> <tr> <td> </td> </tr> </table> </td> </tr> </table> html 테이블 테이블의 고유 스타일 속성 1, HTML 테이블 테이블 스타일 속성 테두리 여백 1에 나타나야 합니다. . 기능: 인접한 셀 테두리 사이의 거리를 설정합니다(cellspacing과 유사) 2 속성: border-spacing 값: 1. 1개의 값을 가져옵니다 이는 가로 및 세로 간격이 동일함을 의미합니다 2. 2개의 값을 가져옵니다. ​​ 첫 번째 값은 가로 간격을 나타냅니다. 두 번째 값은 세로 간격을 나타냅니다. 두 값을 공백으로 구분하세요 3. 요구사항                                                                                                                               border-collapse border-collapse는 분리되어야 합니다          border-collapse는 분리 테두리 모드에서 유효해야 합니다   3. HTML 테이블 테이블 스타일 속성

위 내용은 HTML 테이블이란 무엇입니까? 태그의 다양한 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!