> 웹 프론트엔드 > HTML 튜토리얼 > 테이블이란 무엇입니까? HTML 테이블 소개

테이블이란 무엇입니까? HTML 테이블 소개

不言
풀어 주다: 2018-08-23 11:04:55
원래의
5646명이 탐색했습니다.

이 글의 내용은 테이블이란 무엇일까요? HTML에 테이블을 도입하면 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

양식이란 무엇인가요? 테이블은 행과 열로 배열된 구조입니다. 페이지 레이아웃을 위해 데이터가 행과 열에 따라 표시됩니다. 이 레이아웃 방법은 오래되었습니다. 페이지 레이아웃을 구현하려면 p+css를 사용하는 것이 좋습니다.

HTML 테이블 생성 방법: HTML 테이블은 테이블 태그, 캡션 태그 및 하나 이상의 tr, th 또는 td 태그로 구성됩니다.

1. 테이블 태그는 테이블을 정의하는 데 사용되며, 전체 table은 < /table> 태그에 포함됩니다.

      2. 캡션 태그는 테이블 제목을 정의합니다.     3. tr 태그는 테이블의 행을 정의하는 데 사용됩니다. 각 행은 < TR & gt; 및

4, TD 태그와 TH 태그는 TR에 있습니다. 태그, 각 셀은 태그 또는 태그의 쌍입니다. td 태그 또는 th 태그 쌍에 구문은 다음과 같습니다.

<table>
	<caption>表格标题</caption>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>
로그인 후 복사

참고: th와 td :th의 차이점은 기본적으로 셀에 굵은 글씨로 표시됩니다.

테이블의 몇 가지 일반적인 라벨 속성

1. 테두리 라벨 속성: 테이블 테두리의 너비를 설정합니다(단위: px). 테두리 속성은 각 셀에 테두리를 추가하고 테두리로 테이블을 둘러쌉니다. border 속성 값이 변경되면 표 주변의 테두리 크기만 변경되며, 표 내부 테두리의 너비는 1픽셀이 됩니다. 테두리 스타일 속성을 사용하여 테두리를 설정하는 것이 좋습니다.

2. Width 태그 속성: 설정

테이블 너비

를 결정하려면 width 스타일 속성을 사용하여 테이블 너비를 설정하는 것이 좋습니다. 너비를 설정하는 속성입니다. 이 태그 속성에는 값이 여러 개 있습니다. 설명하다 픽셀 너비를 픽셀 단위로 설정합니다(예: width="50"). % 너비를 포함하는 요소의 백분율로 설정합니다(예: width="50%").

3. 정렬 라벨 속성: 이 효과를 얻으려면 부동 스타일 속성을 사용하는 것이 좋습니다.

값 설명하다 왼쪽 테이블을 왼쪽으로 정렬합니다. 오른쪽 테이블을 오른쪽으로 정렬합니다. 센터 테이블을 중앙 정렬합니다.

4. bgcolor 라벨 속성: 이 효과를 얻으려면 배경색 스타일 속성을 사용하는 것이 좋습니다.

value. 설명하다 색상_이름 색상 값이 색상 이름의 배경색(예: "red")임을 지정합니다. 16진수 배경색을 16진수 값(예: "#ff0000")으로 지정합니다. rgb_번호 색상 값을 RGB 코드(예: "rgb(255,0,0)")의 배경색으로 지정합니다.

5. Cellpadding 라벨 속성: 셀 경계와 셀 내용 사이의 간격을 설정합니다(단위: px). 효과를 얻으려면 padding 스타일 속성을 사용하는 것이 좋습니다.

6. Cellspacing 라벨 속성: 셀 간격을 지정합니다. 셀 간격(단위: px)

위에는 테이블 태그의 일반적으로 사용되는 태그 속성이 나열되어 있습니다. 또한 테이블 태그에는 프레임, 규칙 및 요약이라는 세 가지 태그 속성도 있습니다. 그러나 프레임과 규칙은 지원되지 않습니다. Internet Explorer 브라우저. 이 속성과 요약 태그 속성은 브라우저에 시각적 효과를 생성하지 않으므로 이 세 가지 태그 속성은 무시됩니다.

tr label attribute

1. align label 속성: 테이블 행에 있는 셀 내용의 가로 정렬을 설정합니다. 이 label 속성에는 여러 값이 있습니다.

왼쪽 콘텐츠를 왼쪽으로 정렬합니다(기본값). 오른쪽 콘텐츠를 오른쪽 정렬합니다. 센터 콘텐츠를 가운데 정렬합니다. 신이 옳다고 하다 신문이나 잡지처럼 각 행의 길이가 동일하도록 행을 늘립니다. 숯 콘텐츠를 지정된 문자에 맞춰 정렬합니다. 참고: 브라우저는 이 태그 속성 값을 지원하지 않습니다.

2. bgcolor 라벨 속성: 이 효과를 얻으려면 background-color 스타일 속성을 사용하는 것이 좋습니다.

value. 설명하다 색상_이름 색상 값이 색상 이름의 배경색(예: "red")임을 지정합니다. 16진수 배경색을 16진수 값(예: "#ff0000")으로 지정합니다. rgb_번호 색상 값을 RGB 코드(예: "rgb(255,0,0)")의 배경색으로 지정합니다.

3. valign 레이블 속성: 테이블 행에서 셀 내용의 수직 정렬을 설정합니다. 이 레이블 속성에는

값이 있습니다. 설명하다 맨 위 콘텐츠 상단을 정렬합니다. 가운데 콘텐츠를 가운데 정렬합니다(기본값). 맨 아래 콘텐츠를 아래로 정렬합니다. 기준선 기준선에 맞춰 정렬합니다.

th 및 td 라벨 속성

1. align label 속성: 셀 내용의 가로 정렬을 설정합니다. 이 라벨 속성에는 여러 값이 있습니다.

값 설명하다 왼쪽 콘텐츠를 왼쪽 정렬합니다(td 태그 기본값). 오른쪽 콘텐츠를 오른쪽 정렬합니다. 센터 콘텐츠를 가운데 정렬합니다(th 태그 기본값). 신이 옳다고 하다 신문이나 잡지처럼 각 행의 길이가 동일하도록 행을 늘립니다. 숯 콘텐츠를 지정된 문자에 맞춰 정렬합니다. 참고: 브라우저는 이 태그 속성 값을 지원하지 않습니다.

2. bgcolor 라벨 속성: 이 효과를 얻으려면 배경색 스타일 속성을 사용하는 것이 좋습니다.

value. 설명하다 색상_이름 색상 값이 색상 이름의 배경색(예: "red")임을 지정합니다. 16진수 배경색을 16진수 값(예: "#ff0000")으로 지정합니다. rgb_번호 색상 값을 RGB 코드(예: "rgb(255,0,0)")의 배경색으로 지정합니다.

3. valign 레이블 속성: 셀 내용의 수직 정렬을 설정합니다. 이 레이블 속성에는 여러 값이 있습니다.

top 콘텐츠 상단을 정렬합니다. 가운데 콘텐츠를 가운데 정렬합니다(기본값). 맨 아래 콘텐츠를 아래로 정렬합니다. 기준선 기준선에 맞춰 정렬합니다.

4. 너비 라벨 속성과 높이 라벨 속성: 셀의 너비와 높이를 설정합니다. 셀 너비와 높이를 설정하려면 너비 스타일 속성을 사용하는 것이 좋습니다. 레이블을 설정하는 높이 레이블 속성에는 여러 값이 있습니다:

value 설명하다 픽셀 픽셀 단위의 너비 또는 높이 값(예: '100px')입니다. 퍼센트 포함 요소의 백분율로 표시되는 너비 또는 높이 값(예: "20%")입니다.

5. nowrap 라벨 속성: 셀의 내용을 줄 바꿈할지 여부를 설정합니다.

6. colspan 라벨 속성 및 rowspan 라벨 속성: 셀에 걸쳐 있는 열 수와 행 수를 각각 설정합니다.

관련 권장 사항:

html 작은 태그는 무엇을 의미하나요? 작은 태그 사용 방법의 예

HTML 글꼴 태그의 색상 속성은 무엇인가요? Fontcolor 사용법 소개(색상 코드 표 포함)

위 내용은 테이블이란 무엇입니까? HTML 테이블 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿