HTML의 테이블 태그에 대한 기본 학습 튜토리얼

테이블 태그를 사용하여 웹에 테이블 내용을 표시하는 것은 HTML의 가장 기본적인 기능 중 하나입니다. 여기서는 HTML의 테이블 태그에 대한 기본 학습 튜토리얼을 살펴보겠습니다.

테이블의 태그 구성
HTML의 테이블은 기본 태그로

로 구성되며, 브라우저는 태그를 테이블로 해석합니다. 테이블의 행은 태그를 사용하여 정의됩니다. 태그는 태그의 하위 클래스입니다. 태그의 하위 클래스이기도 합니다. 열을 분리하고 완전한 형태를 형성합니다.
테이블의 태그 조합 관계는 다음과 같습니다.

<table>  
<tr>  
<td>我是单元格1</td>  
<td>我是单元格2</td>  
</tr>  
</table>

텍스트, 그림, 목록, 단락, 양식, 가로선 등과 같은 모든 html 태그를 삽입할 수 있습니다. 테이블이며 페이지 레이아웃에도 사용할 수 있습니다. 그러나 테이블 레이아웃은 너무 긴 코드 중복, HTML 사양 미준수, 불친절한 검색 엔진 등의 문제를 안고 있습니다. 따라서 페이지에 테이블이 실제로 필요한 경우가 아니면 페이지 레이아웃에 테이블을 사용하지 않는 것이 좋습니다.
나머지

, 및 은 브라우저 지원이 좋지 않아 거의 사용되지 않습니다.

테이블 및 테두리 속성
테이블 자체에서 테두리 속성을 정의하여 테이블 테두리의 너비를 결정할 수 있습니다. 이 속성의 값은 기본적으로 숫자 단위로 표시됩니다. border="1" 값은 px 단위입니다. 주의할 점은 테두리 값 뒤에 단위를 추가하지 마십시오. 그렇지 않으면 값이 올바르게 인식되지 않습니다.

테이블 헤더

태그는

,

에서는 테이블 헤더의 태그 앞에 나타납니다. 표의 경우 머리글은 필요하지 않으며 필요에 따라 삽입할 수 있습니다.

태그를 통해 테이블 ​​헤더를 설정할 수 있습니다. ;tr> 태그 동일한 레벨에 속하며, 헤더는 일반적으로

태그 내의 텍스트는 자동으로 굵게 표시됩니다.

셀 병합
셀 병합은 세로 병합과 가로 병합으로 나누어지는데, 병합할 때는 다른 행과 열에 해당 개수의 셀이 있는지 확인해야 합니다. .
셀의 수평 병합은 colspan 속성을 사용하며, 그 값은 병합할 셀 수를 결정하는 숫자입니다. 예를 들어 colspan="2"는 두 개의 셀을 오른쪽으로 병합하는 것을 의미합니다.
세로 병합은 가로 병합 속성과 동일한 rowspan 속성을 사용합니다. 또한 숫자 형태로 병합할 셀 수를 결정합니다. 예를 들어 rowspan="2"는 두 셀을 아래쪽으로 병합하는 것을 의미합니다.
데모 코드 예시:

<table border=“1”>  
<tr>  
<th>姓名</th>  
<th colspan=“2”>电话</th>  
</tr>  
<tr>  
<td>Bill Gates</td>  
<td>555 77 854</td>  
<td>555 77 855</td>  
</tr>  
</table><h4>横跨两行的单元格：</h4>  
<table border=“1”>  
<tr>  
<th>姓名</th>  
<td>Bill Gates</td>  
</tr>  
<tr>  
<th rowspan=“2”>电话</th>  
<td>555 77 854</td>  
</tr>  
<tr>  
<td>555 77 855</td>  
</tr>  
</table>

데모 효과 예시:

셀 여백
테이블에는 패딩 스타일과 유사한 패딩 기능이 있습니다.

태그 내에 cellpadding 속성을 정의하면 태그 아래의 모든 레이블의 내부 여백이 10px임을 의미합니다.

셀 셀 간격
셀 사이의 간격은 태그의 외부 여백을 설정하는 것이기도 합니다.

요소에 패딩을 설정할 수 있습니다. cellpadding 속성의 매개변수는 값이 여백의 크기를 결정하는 숫자 형식이라는 것입니다. 예를 들어 cellpadding="10"은 테이블의 모든

태그의 셀 간격 속성을 사용하면 태그의 여백을 설정할 수 있습니다. 이 속성은 숫자 형태의 여백 크기도 결정합니다. 예를 들어, cellpacing="10"은 이 테이블의 모든 태그의 여백이 10px임을 의미합니다.

테이블 배경
테이블은 배경 속성을 통해 어떤 그림이든 테이블이나 셀의 배경으로 설정할 수 있습니다. 사용법은 CSS의 배경과 매우 유사합니다. 셀이 해당 이미지를 표시하도록 배경에 해당하는 이미지 경로를 설정합니다. 예를 들어 background="table_bg.gif"

테이블 내용 정렬
테이블 정렬은 가로 정렬과 세로 정렬로 구분됩니다. 이는 각각 align 속성과 valign 속성입니다. 이 두 속성을 해당

태그에 삽입하여 셀의 텍스트 또는 이미지 정렬을 완료합니다.
수평 정렬에는 왼쪽, 가운데, 오른쪽의 세 가지 값이 있습니다.
세로 정렬 값에는 위쪽, 중간, 아래쪽, 기준선이라는 세 가지 값이 있습니다.
기준선 정렬은 문자 그대로 이해되지 않을 수 있습니다. 실제로 기준선 정렬은 텍스트가 테이블 중앙이 아닌 상단 중앙에 나타나는 것을 의미합니다. 텍스트가 크지 않으면 효과는 중간과 유사하며 중간보다 약간 높습니다.

PS: CSS
의 테이블 레이아웃 문을 사용하여

과 같은 테이블 표시 스타일을 지정할 수 있습니다.

CSS 코드클립보드에 콘텐츠 복사

1. table { table-layout : 고정 }

세 가지 값을 사용할 수 있습니다:
* 자동(기본값)
* 고정
* 상속
auto 은 셀의 크기가 내용에 따라 결정됨을 의미합니다. 고정은 셀의 크기가 고정되어 있으며 지정된 크기의 첫 번째 셀에 의해 결정됨을 의미합니다. 모든 셀에 지정된 크기가 없으면 셀의 내용이 첫 번째 셀의 기본 크기에 의해 결정됩니다. 셀을 초과합니다. 그리드의 크기는 CSS의 오버플로 명령으로 제어됩니다. Microsoft는 이 명령을 사용하면 테이블의 표시 속도를 100배 가속화할 수 있다고 주장합니다.
그런데 표 표시 속도를 빠르게 하려면 CSS에서 표의 너비와 높이(또는 표 태그의 너비와 높이 속성)를 미리 지정해 두는 것이 가장 좋습니다.

HTML의 테이블 태그 기본 학습 튜토리얼에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!