각 태그 새 줄을 만듭니다. 중첩된 다음 열이 생성됩니다. 여러 열을 만들 수 있습니다. 이 경우 각 행의 열 수를 모니터링해야 합니다. 예를 들어 첫 번째 행에 5개의 열이 있는 경우 다음 행에도 5개의 열이 있어야 합니다. 그렇지 않으면 테이블이 떠 있습니다. 셀 병합이 가능합니다.

HTML로 테이블을 만드는 방법

다음은 html 코드의 예입니다.

테이블 예

열 1

열 2

세포에 주목하라 . 특수한 colspan 속성을 사용하여 셀을 가로로 확장합니다. 숫자 값은 병합할 열 수를 지정합니다. 이 속성과 유사한 태그도 있습니다. (테이블 헤더), 여기서도 colspan을 작성해야 합니다. 결과는 동일합니다. 그러나 종종 그들은 일반 td를 사용합니다.

이제 모든 태그 속성을 자세히 살펴보겠습니다.

태그 속성 및 속성

여는 태그에

1. 속성 align="parameter" - 테이블 정렬을 설정합니다. 다음 값을 사용할 수 있습니다.

위의 예에서는 align="center" 를 사용하여 테이블을 중앙에 배치했습니다.

이 속성은 테이블뿐만 아니라 개별 테이블 셀에도 적용할 수 있습니다.

예를 들어

12. 속성 width="number" - 표의 너비를 픽셀 또는 백분율로 설정합니다.

13. 속성 class="class_name" - 테이블이 속한 클래스의 이름을 지정할 수 있습니다.

14. 속성 style="styles" - 스타일은 각 테이블에 대해 개별적으로 설정할 수 있습니다.

이제 테이블 내부로 들어가 테이블 셀 속성을 살펴볼 시간입니다. 이러한 속성은 여는 태그에 작성해야 합니다.

예제의 결과:

테이블 분할

다음 HTML 태그는 테이블을 부분으로 분할하는 데 사용됩니다.

• 꼬리표 테이블에 그룹 헤더를 포함하는 데 사용됩니다("테이블 헤더", 헤더와 혼동하지 마십시오).
• 꼬리표 테이블(바닥글)의 "바닥글"을 포함하는 데 사용됩니다.
• 꼬리표 테이블(본문)의 "본문"을 포함하는 데 사용됩니다.

요소 다음 컨텍스트에서 하나의 테이블에서 한 번만 사용해야 합니다. 요소 내

집단

예제의 결과입니다.

프레임 테이블

결과:

테두리 없는 표

프레임 테이블

태그 속성 그리고 셀 병합

예시

결과:

HTML5 표준에 따라 이전에 사용된 모든 테이블 속성(예: 국경, 셀 간격, 셀 패딩등은 더 이상 지원되지 않으며 유효성 검사기는 해당 사용을 코드의 오류로 간주합니다. 테이블을 디자인하려면 CSS 스타일을 사용해야 합니다. 이 스타일은 사용되지 않는 테이블 속성을 모두 대체할 수 있습니다. 예를 들어 속성 ​​대신 셀 간격속성은 테이블 셀 사이의 거리를 변경하는 데 사용됩니다. 경계 간격, 표 셀의 콘텐츠 정렬 - 속성 텍스트 정렬그리고 버티컬 얼링. 테이블의 CSS 스타일

html 테이블 행 그룹화 태그

태그를 사용하여 더 복잡한 테이블을 만들 수 있습니다.

예시

결과:

html 테이블 열 그룹화 태그

태그 속성 그리고

행 및 열 그룹화를 사용하는 방법을 이해하는 가장 쉬운 방법은 Sudoku 테이블을 예로 드는 것입니다.

col 태그는 각 열에 대해 개별적으로 매개변수를 설정합니다. 소스 코드 작성 방법은 중요하지 않습니다.

또는

예시

결과:

스타일을 정하려 하지마 텍스트 정렬태그용 그리고 . 태그 사이에 배치된 텍스트 ..., 태그는 이 스타일을 상속하지 않습니다. 태그의 자식이 아닙니다. , 태그 없음 .

스타일을 지정하여 특정 테이블 열의 텍스트 가로 정렬을 변경할 수 있습니다. 텍스트 정렬의사 클래스 td:n번째-자식(n), 여기서 n은 열 번호입니다. 그러나 이 방법은 테이블 셀 사이에 속성이 있는 경우에는 작동하지 않습니다. 콜스팬.

예시

결과:

그러나 이 방법은 테이블 셀 사이에 속성이 있는 경우에는 작동하지 않습니다. 콜스팬.

4장

HTML의 테이블

테이블은 HTML에서 가장 강력하고 널리 사용되는 도구 중 하나입니다. 데이터의 표 형식 표시 개념은 추가 설명이 필요하지 않습니다. HTML에서 테이블은 전통적으로 데이터를 표현하는 방법일 뿐만 아니라 웹 페이지 형식을 지정하는 수단으로도 사용됩니다. 표 형식의 표현이 문서를 작성하는 편리한 방법인 실제 문서의 예를 들어 보겠습니다. 무화과. 그림 4.1은 테이블을 사용하여 행과 열로 구분된 숫자 데이터를 나타내는 일반적인 예를 보여줍니다. 무화과. 4.2 테이블의 사용은 페이지 요소의 상대 위치를 설정하여 문서의 형식을 지정하는 목적으로만 사용됩니다. 이러한 문서를 볼 때 해당 셀 주위의 프레임이 그려지지 않기 때문에 테이블을 작성하는 데 사용된다는 것이 즉시 명확하지 않습니다.

HTML 언어의 첫 번째 버전은 주로 일반 텍스트를 작성하기 위한 것이었기 때문에 표를 표시하는 특별한 방법을 제공하지 않았습니다. HTML 문서의 응용 분야가 발전함에 따라 일반적으로 일련의 행과 열로 이루어진 데이터를 표시하는 작업이 적절해졌습니다. 열별로 정렬된 데이터를 포함하는 문서 작성은 처음에 미리 서식이 지정된 텍스트를 사용하여 수행되었으며, 내부에 필요한 수의 공백을 도입하여 필요한 정렬이 제공되었습니다. 한 쌍의 태그 안에 있는 텍스트는

그리고

그러나 표를 만드는 특수 도구는 미리 서식이 지정된 텍스트를 사용할 가능성을 취소하지 않습니다. 테이블의 사용은 행과 열로 구성된 데이터로 제한되지 않습니다. 한 가지 용도는 일반 텍스트, 이미지, 기타 테이블 등으로 구성될 수 있는 페이지에서 다양한 데이터의 레이아웃을 구성하는 것입니다. 이 장은 테이블 생성 규칙과 사용 예에 ​​대해 설명합니다.

쌀 . 4.1. 일반적인 HTML 테이블 예

쌀 . 4.2. 테두리 없는 테이블의 예

기본 HTML 테이블 만들기

먼저 간단한 테이블을 만드는 데 필요하고 충분한 태그 및 해당 매개 변수의 최소 집합을 고려한 다음 자세한 설명을 진행하겠습니다.

표에 대한 설명은 문서 섹션 안에 있어야 합니다. . 문서는 임의 개수의 테이블을 포함할 수 있으며 테이블은 서로 중첩될 수 있습니다. 각 테이블은 태그로 시작해야 합니다.

각 줄은 태그로 시작합니다. (표 행) 태그로 끝납니다.. 행의 단일 셀은 한 쌍의 태그로 둘러싸여 있습니다. 그리고(테이블 데이터) 또는 그리고(테이블 머리글). 꼬리표 일반적으로 테이블의 헤더 셀에 사용되며 - 데이터 셀의 경우. 사용법의 차이점은 셀 내 데이터의 위치뿐 아니라 셀의 내용을 표시하기 위해 기본적으로 사용되는 글꼴 유형에만 있습니다. 셀 콘텐츠 유형 굵게 중앙에 표시됩니다(ALIGN=CENTER, VALIGN=MIDDLE). 태그로 정의된 셀 기본적으로 세로 방향으로 왼쪽(ALIGN=LEFT)과 중간(VALIGN=MIDDLE)에 정렬된 데이터를 표시합니다.

태그 그리고 테이블 행 설명 외부에 나타날 수 없습니다. . 종료 코드, 그리고생략될 수 있습니다. 이 경우 행 또는 셀 설명의 끝은 다음 행 또는 셀의 시작이거나 테이블의 끝입니다. 테이블 종료 태그생략할 수 없습니다.

테이블의 행 수는 여는 태그의 수에 의해 결정됩니다. 및 열 수 - 최대 수 또는 모든 라인 중에서. 일부 셀은 데이터를 포함하지 않을 수 있습니다. 이러한 셀은 한 행에서 다음과 같은 한 쌍의 태그로 설명됩니다. , . 줄 끝에 있는 하나 이상의 셀에 데이터가 없으면 해당 설명을 생략할 수 있으며 브라우저는 필요한 수의 빈 셀을 자동으로 추가합니다. 다른 행에 같은 크기의 다른 수의 열이 포함된 테이블 구성은 허용되지 않습니다.

테이블에는 한 쌍의 태그로 묶인 제목이 있을 수 있습니다. 그리고. 테이블 헤더의 설명은 태그 안에 위치해야 합니다.

기본적으로 테이블 머리글 텍스트는 그 위에 배치되고(ALIGN=TOP) 가로 방향 가운데에 배치됩니다.

나열된 태그는 매개 변수를 가질 수 있으며 그 수와 값은 다릅니다. 그러나 가장 간단한 경우 태그는 기본값을 사용하는 매개변수 없이 사용됩니다.

이 정보는 기본 테이블을 작성하기에 충분합니다. 두 개의 행과 두 개의 열로 구성된 간단한 테이블의 예를 들어 보겠습니다. 4.3.

쌀. 4.Z.간단한 테이블의 예

페이지의 테이블 표현

테이블을 설명하는 태그에서 사용할 수 있는 다양한 매개변수의 할당을 고려하십시오.

테이블 머리글

테이블 헤더 태그 하나의 유효한 매개 변수 ALIGN이 있으며 이는 TOP(테이블 위 헤더) 또는 BOTTOM(테이블 아래 헤더) 값을 사용합니다. ALIGN 매개변수는 생략될 수 있으며 이는 ALIGN=TOP 값에 해당합니다. 가로 방향에서 표 머리글은 항상 중앙에 위치합니다. 테이블에 제목이 없을 수 있습니다. 대부분의 경우 일반 텍스트는 HTML 사양에 의해 규제되는 테이블 헤더로 사용되지만 실제로는 태그 사이에 있습니다. 그리고섹션에 사용된 모든 HTML 요소를 작성할 수 있습니다. . 다음은 테이블 헤더 항목의 예입니다.

테이블 하단의 제목

위의 예에 이 헤더 설명을 추가하면 그림과 같이 테이블이 표시됩니다. 4.4.

쌀. 4.4.헤더가 있는 표

Microsoft Internet Explorer 브라우저는 헤더 위치를 선택하기 위한 추가 옵션을 제공합니다. ALIGN 매개변수는 위에서 설명한 값과 함께 수평 정렬을 위해 LEFT, CENTER 및 RIGHT를 허용합니다. 이것은 널리 사용되는 ALIGN 매개변수가 수평 정렬과 수직 정렬 모두에 사용될 수 있는 드문 경우 중 하나입니다. 예를 들어, ALIGN=RIGHT 항목은 오른쪽과 평행하고 테이블 위에 배치되는 제목을 제공합니다. ALIGN=BOTTOM이라고 쓰면 위의 예와 같이 헤더가 테이블 아래에 위치하게 됩니다. 단, 동일한 ALIGN 파라미터 헤더에서 중복 사용은 허용되지 않습니다. 따라서 수직 정렬을 위한 특수 매개변수인 VALIGN이 추가로 도입되었습니다. VALIGN은 TOP 또는 BOTTOM 값을 사용합니다. 예를 들어 왼쪽 정렬 표의 맨 아래에 있는 제목의 경우 설명은 다음과 같습니다.

아래쪽 정렬 제목 왼쪽 정렬

Microsoft Internet Explorer에서 이 제목 설명이 포함된 표는 다음과 같이 표시됩니다(그림 4.5). 이 예를 Netscape에서 보면 제목은 기본적으로 테이블 위, 가로 방향 가운데에 배치됩니다.

쌀. 4.5. Microsoft Internet Explorer의 표 머리글 가로 맞춤

테이블 머리글 가로 정렬 기능은 HTML 사양의 확장 기능이며 Netscape Navigator 브라우저에서 지원하지 않으므로 반드시 필요한 경우에만 사용해야 합니다.

태그 옵션

테이블을 생성할 때 사용하는 주요 태그는 태그입니다.

매개변수 테두리

BORDER 매개변수는 기본적으로 테이블의 격자선을 제공하는 각 셀 주위와 전체 테이블 주위에 테두리 표시를 제어합니다. 기본적으로 프레임은 그려지지 않으며 화면에는 정확히 위치한 테이블 셀의 텍스트만 표시됩니다. 예를 들어 테이블을 사용하여 구현된 다중 열 목록의 경우 또는 그림과 텍스트의 정확한 상대 위치를 지정하는 경우와 같이 경계선 없는 테이블의 사용이 정당화되는 많은 상황이 있습니다. 그러나 대부분의 경우 전통적인 테이블 사용의 경우 테이블에 포함된 정보를 더 쉽게 인식하고 이해할 수 있도록 격자선으로 셀을 서로 구분하는 것이 유용합니다.

테이블에 프레임을 추가하려면 코드에 포함해야 합니다.

예를 들어,

매개변수의 숫자 값은 전체 테이블 주위에 그려지는 픽셀 단위의 프레임 두께를 결정하지만 이 값은 각 셀 주위의 프레임 두께에 영향을 주지 않습니다. 숫자 값이 없으면 일반적으로 최소값(1)과 동일하게 간주되지만 프레임 표시 스타일은 브라우저마다 다를 수 있습니다. 전체 테이블 주변의 프레임과 셀 주변의 프레임 표시를 독립적으로 제어할 가능성이 없습니다.

10픽셀 두께의 테두리가 있는 테이블의 예가 그림에 나와 있습니다. 4.6.

쌀. 4.6. 10픽셀 두께의 테두리가 있는 테이블

HTML 3.0 사양에는 BORDER 매개변수 값이 포함되지 않았습니다. 이것은 HTML 3.2에서만 수행됩니다. 따라서 특히 Microsoft Internet Explorer의 초기 버전에서는 숫자 값을 설정할 수 없었습니다.

BORDER 매개변수가 없으면 테두리가 그려지지 않지만 테두리를 위한 공간이 남습니다(이는 Netscape에만 적용됨). BORDER 매개변수가 없거나 존재하는 경우 테이블의 전체 크기는 변경되지 않습니다(예외는 BORDER=0으로 설정한 경우). 따라서 이러한 경우 인접한 두 셀 사이의 최소 거리는 프레임 두께의 두 배, 즉 두 픽셀이 됩니다. 테두리가 없음을 의미하는 BORDER=0을 설정하여 셀을 서로 최대한 가깝게 배열할 수 있습니다. 일부 브라우저는 BORDER 매개변수에 대한 숫자 값 설정을 지원하지 않을 수 있습니다. 이 경우 0 값은 무시되고 테이블은 테두리와 함께 그려집니다.

여기 몇 가지 예가 있어요.

이 세 가지 예는 모두 Netscape 브라우저에서 다르게 렌더링됩니다. 이것은 기본값에 대해 말할 수 없는 다소 독특한 경우입니다. BORDER 매개변수가 생략된 세 번째 예는 이 매개변수가 있는 예와 다릅니다. Microsoft Internet Explorer의 경우 두 번째와 세 번째 예는 동일하므로 이 브라우저에 대한 BORDER 매개변수의 기본값은 0입니다.

CELLSPACING 매개변수

매개변수 표기 형식: CELLSPACING=num, 여기서 num은 생략할 수 없는 픽셀 단위의 매개변수 숫자 값입니다. num 값은 수평 및 수직으로 인접한 셀 사이(보다 정확하게는 셀 프레임 사이)의 거리를 결정합니다. 기본값은 2입니다. 전통적으로 출판 시스템에서 인접한 테이블 셀에는 공통 테두리가 있습니다. 위의 그림(그림 4.6)에서 명확하게 볼 수 있듯이 HTML 테이블에서는 기본적으로 테이블 사이에 공백이 있습니다. CELLSPACING=0이 설정되면 인접한 셀의 프레임이 병합되어 단일 테이블 그리드의 인상을 생성합니다(그림 4.7).

쌀. 4.7.값이 CELLSPACING=0인 테이블

CELLPADDING 매개변수

매개변수의 형식은 CELLSPACING과 유사합니다. num 값은 셀 테두리와 셀 내부 데이터 사이의 여유 공간(패딩) 양을 결정합니다. 기본적으로 값은 1과 같습니다. CELLPADDING 매개변수를 0으로 설정하면 셀 텍스트의 일부가 테두리에 닿아 심미적으로 좋지 않을 수 있습니다.

무화과. 4.8은 값이 CELLPADDING=10인 테이블의 예를 보여줍니다.

쌀. 4.8. CELLPADDING=10 값이 있는 테이블

CELLPADDING 및 CELLSPACING 매개변수의 작동은 서로 매우 유사합니다. 경계선 없는 테이블의 경우 하나 또는 다른 매개변수를 변경해도 동일한 결과가 나타납니다. 두 옵션 모두 해당 오프셋에 수평 및 수직으로 영향을 줍니다. 예를 들어 이미지의 여백(태그의 매개변수 HSPACE 및 VSPACE ), 제공되지 않습니다.

BORDER, CELLPADDING 및 CELLSPACING의 세 가지 매개 변수는 모두 서로 독립적으로 작동하며, 그 중 하나라도 생략되면 기본값이 사용됩니다. 특히 위의 매개변수를 모두 생략하면 인접 셀의 데이터 간 최소 거리는 6픽셀(Netscape의 경우)이 됩니다. 이 값은 CELLSPACING에 대한 2픽셀, CELLPADDING에 대한 1픽셀 및 각 셀의 테두리에 대한 1픽셀의 합계입니다. 다음 설명을 지정하면 가장 간단한 테이블을 얻을 수 있습니다.

이 실시예에서만, 셀들은 서로 가까이 위치할 것이다. 사용 예는 모든 셀에 서로 옆에 배치해야 하는 동일한 크기의 그림이 포함된 테이블이 있습니다.

매개변수 WIDTH 및 HEIGHT

테이블이 표시될 때 너비와 높이는 브라우저에서 자동으로 계산되며 전체 문서 설명에 지정된 매개 변수 값, 이 테이블, 개별 행 및 셀, 특정 브라우저에서 문서를 볼 때 지정된 매개 변수(예: 글꼴 유형 및 크기, 뷰포트 크기 등). 표시할 때 이러한 요소를 고려하여 테이블 크기가 자동으로 계산되는 동안 시도가 이루어집니다. 테이블을 가장 편리한 방법으로 표시하려면 - 뷰포트에 맞도록 테이블을 정렬합니다. 일반적으로 큰 문서를 보는 일반적인 체계는 문서 내용을 세로로 선형 스크롤하고 다양한 표, 이미지 등이 산재한 텍스트를 읽는 것으로 축소됩니다. 이는 HTML 문서와 모든 형식으로 생성된 일반 문서 모두에 적용됩니다. 텍스트 편집기 . 대부분의 텍스트 편집기(예: Microsoft Word) 및 HTML 브라우저는 가능한 경우 줄 길이가 뷰포트의 너비를 초과하지 않도록 자동으로 텍스트 서식을 지정합니다. 이렇게 하면 문서를 가로로 스크롤할 필요가 없습니다. 표가 있는 브라우저에서도 비슷한 작업이 수행됩니다. 가능하면 표의 너비가 뷰포트의 너비를 초과하지 않도록 형식을 지정하세요. 테이블의 너비가 더 중요하고 가장 중요한 매개 변수이며 높이와 비교하여 먼저 계산이 수행된다는 결론을 내릴 수 있습니다.

대부분의 경우 동적 테이블 크기 조정은 실제 뷰포트 영역을 효율적으로 사용하는 미학적 비율의 이미지를 생성합니다. 그러나 테이블의 너비나 높이를 강제로 조정해야 할 수도 있습니다. 이를 위해 태그의 WIDTH(테이블 너비) 및 HEIGHT(테이블 높이) 매개변수가 사용됩니다.

개별 셀에 대해 유사한 매개변수를 설정할 수 있습니다. 특정 매개변수 값(예: WIDTH=200)을 설정한다고 해서 테이블이 어떤 경우에도 지정된 너비를 갖게 된다는 의미는 아니며 가능한 한 유지될 권장 너비만 결정한다는 점에 유의하십시오. 예를 들어 설명하겠습니다. 주어진 조건에서 기본적으로 지정된 너비보다 작은 테이블이 있다고 가정합니다. 이 경우 브라우저는 테이블의 모든 열을 비례적으로 확장하여 테이블의 너비를 필요한 너비로 늘립니다. 뷰포트를 좁혀도 테이블의 너비는 변경되지 않으며 테이블을 보려면 가로 스크롤이 필요할 수 있습니다. 기본적으로 표의 너비가 지정된 너비보다 큰 경우 브라우저는 먼저 지정된 너비가 필요한 것보다 큰 개별 열의 너비를 줄이고 두 번째로 텍스트를 분할하여 너비를 줄이려고 시도합니다. 테이블의 높이가 증가함에 따라 개별 셀에서 여러 줄로 표시됩니다. 이러한 작업은 필요한 테이블 크기를 제공하지 않을 수 있으며 가능한 최소 너비를 갖게 됩니다. 뷰포트를 좁힐 때 차원이 지정되지 않은 테이블에 대해서도 동일한 작업이 수행됩니다.

다른 브라우저에 대한 테이블 설정을 위한 특정 알고리즘은 약간 다를 수 있습니다.

매개변수 정렬

주어진 태그 매개변수

줄 바꿈 텍스트가 있는 테이블의 예를 들어 보겠습니다. 그 표시는 그림에 나와 있습니다. 4.9.

가장 자주 접하는 43개의 이름이 샘플의 92%를 차지합니다.

쌀. 4.9.줄 바꿈 텍스트가 있는 테두리 없는 표

이 문서는 정렬이 ALIGN=LEFT로 설정된 경계선 없는 표로 구성되어 있어 표 뒤의 텍스트를 표 오른쪽에 배치할 수 있습니다. 테이블은 두 개의 셀을 포함하는 하나의 행으로만 구성됩니다. 각 셀은 정렬되지 않은 목록의 일부를 포함합니다.

. 테이블을 사용하여 목록을 표시하는 것은 목록을 강제로 여러 열로 만드는 한 가지 방법이며 이 예에서도 설명합니다. 표 오른쪽에 있는 텍스트는 거기에 모두 맞지 않을 수 있지만 표 다음에 계속됩니다. 이 예에서 브라우저 뷰포트의 너비를 줄이려고 하면 어느 시점에서 모든 텍스트가 테이블 하단에 있게 됩니다. 테이블 주위의 텍스트 흐름을 강제로 중단하려면(예를 들어 후속 텍스트가 테이블과 논리적으로 관련되지 않고 테이블 아래에 위치해야 하는 경우) 코드를 사용해야 합니다.
CLEAR 매개변수 세트로. 이 예에서는 다음을 작성해야 합니다.
또는
. 일부 브라우저에서는 CLEAR 매개변수를 값 없이 작성할 수 있지만 이는 권장되지 않습니다. 동일한 작업을 수행하려면 여러 줄 바꿈을 지정하십시오.
CLEAR 매개변수(여러 줄 아래로 이동하기 위해 텍스트 앞의 예에서 수행된 것처럼) 또는 새 단락의 시작을 위한 여러 코드 없이

잘못된 결정입니다.

유사한 페이지를 생성하기 위해 약간 다른 예를 들어 보겠습니다. 4.10.

가장 흔한 남자 이름

상트페테르부르크의 성인 인구

아브람 알렉산더 알렉세이 앨버트 아나톨리 안드레이 아르카디 보리스 바딤 애인 발레리 바질 승리자 비탈리 블라디미르 블라디슬라프 뱌체슬라프 겐나디 성 조지 헤르만 그레고리 드미트리

유진 예핌 이반 이고르 일리야 요셉 콘스탄틴 사자 레오니드 남자 이름 니콜라스 올렉 폴 베드로 소설 세면 세르게이 스타니슬라프 에드워드 유리 야곱

주어진 데이터는 상트페테르부르크에 거주하는 18세 이상 남성 5,000명에 대한 정보를 포함하는 대표 샘플을 분석하여 얻은 것입니다. 이 43개의 가장 일반적인 이름이 샘플의 92%를 차지합니다. 다른 이름의 출현 빈도는 각각 0.3%를 초과하지 않습니다.



쌀. 4.10.세 개의 열을 포함하는 테두리 없는 테이블

이전 예제와 달리 테이블 주위에 텍스트가 흐르지 않습니다. 전체 문서는 한 행에 세 개의 셀을 포함하는 헤더가 있는 하나의 테이블로 구성됩니다. 처음 두 셀은 이전 예제를 완전히 반복합니다. 세 번째 셀에는 처음 두 셀의 내용에 대해 설명하는 텍스트가 포함되어 있습니다. 이전 사례에서 설명한 것처럼 여기에서 강제 텍스트 나누기를 설정할 필요가 없습니다. 테이블과 관련된 모든 텍스트는 세 번째 셀 안에 배치해야 하며, 전체 테이블에 대한 설명이 끝난 후 후속 텍스트를 배치해야 합니다.. 두 예제는 전체 화면으로 보았을 때 동일하게 보입니다. 첫 번째 경우에는 2열 목록의 중간에 있고 두 번째 경우에는 테이블의 세 열 모두의 중간에 있는 헤더를 제외하고는 동일합니다. . 그러나 마지막 예에서 뷰포트가 축소되면 텍스트의 어떤 부분도 테이블 아래로 이동할 수 없으므로 구조를 위반합니다.

테이블 내부의 데이터 서식 지정

테이블 내의 각 개별 셀은 독립적인 서식 지정을 위한 영역으로 생각할 수 있습니다. 텍스트 표시를 제어하는 ​​모든 규칙을 사용하여 셀 내의 텍스트 서식을 지정할 수 있습니다. 셀 내부에서 문서 본문 내부에 나타날 수 있는 거의 모든 HTML 요소를 사용할 수 있습니다. , 텍스트 위치를 제어하는 ​​태그 포함 -

,
,

---

, 헤더 코드 - 에서

~ 전에

, 문자 서식 지정 태그 -<В>, , , , , , , 그래픽 이미지를 삽입하는 태그 , 하이퍼텍스트 링크<А>등. 단일 셀 내부에 지정된 태그의 범위는 종료 태그의 존재 여부에 관계없이 이 셀의 경계로 제한된다는 점을 즉시 강조하겠습니다. 예를 들어 텍스트 색상이 셀 내부에 정의된 경우 - , 최종 코드가 없는 경우에도또는 여러 셀이나 표 행에 걸쳐 배치하면 다음 셀의 텍스트가 기본 색상으로 반영됩니다.

다음 옵션은 표 셀 내의 데이터 형식 지정에 사용할 수 있습니다.

셀 내용 정렬 옵션은 ALIGN 및 VALIGN입니다. 코드에서 사용할 수 있습니다. , 그리고 . 수평 정렬 매개변수 ALIGN은 LEFT, RIGHT 및 CENTER 값을 취할 수 있습니다(기본값은 및 센터 ). 수직 정렬 매개변수 VALIGN은 TOP(상단), BOTTOM(하단), MIDDLE(중간), BASELINE(기준선) 값을 취할 수 있습니다. 기본값은 중간입니다. 기준선 정렬은 모든 셀의 한 줄 텍스트를 한 줄에 바인딩합니다. 코드 수준에서 정렬 옵션 설정 주어진 행의 모든 ​​셀에 대한 정렬을 결정하는 반면 행의 각 개별 셀은 다음에 지정된 매개변수의 효과를 재정의하는 자체 매개변수를 가질 수 있습니다. .

다음은 첫 번째 열의 셀 데이터가 오른쪽 맞춤, 두 번째 열이 가운데 맞춤, 세 번째 열이 왼쪽 맞춤(기본값)인 테이블의 예입니다.

셀 1	셀 2	셀 3
셀 4	셀 5	셀 6

이 예제의 브라우저 렌더링은 그림 1에 나와 있습니다. 4.11.




쌀. 4.11.표 셀의 데이터 정렬

NOWRAP 옵션은 셀 텍스트를 자동으로 줄로 나누는 기능을 비활성화합니다. 코드에서 사용할 수 있습니다. , 그리고 . 이 옵션을 불필요하게 사용하면 테이블 크기를 동적으로 조정하는 기능이 크게 줄어들고 인식이 손상될 수 있으므로 피해야 합니다. 대부분의 경우 새 줄에서 자동 줄 바꿈을 금지해야 하는 개별 셀에 NOWRAP을 사용하는 것으로 충분합니다. 줄 바꿈은 단어 사이의 구분자(공백)에 의해서만 수행되며, 경우에 따라 특정 위치에서 텍스트가 잘리는 것을 방지하기 위해 공백 문자 대신 줄 바꿈하지 않는 공백 코드(NonBreaking Space)를 설정합니다. 예를 들어 숫자 값과 주어진 양의 단위 사이에 간격이 권장되지 않는 경우가 있습니다. 성과 이니셜 사이. 따라서 텍스트는 650km 또는 Yeltsin B.N입니다. 형식으로 작성하는 것이 좋습니다. 650km 및 Yeltsin B.N.

WIDTH 및 HEIGHT 매개변수는 코드에서 사용할 수 있습니다. 그리고 . 해당 구문은 태그에 대한 이러한 매개변수의 구문과 유사합니다.

. 해당 값은 이러한 매개변수가 기록되는 셀의 너비 또는 높이를 결정합니다. 값은 픽셀 또는 전체 테이블 크기의 백분율로 지정할 수 있습니다. Microsoft Internet Explorer에서는 WIDTH 값을 픽셀 단위로만 설정할 수 있습니다. 테이블은 행과 열로 구성된 연결된 구조이므로 임의의 셀에 너비를 설정하면 해당 셀이 위치한 전체 열의 너비에 영향을 미치고 높이를 설정하면 전체 행에 영향을 미칩니다. 열 너비 값이 하나의 셀에만 지정된 경우 이 값은 전체 열의 너비가 됩니다. 이러한 표시가 여러 개인 경우 최대값이 선택됩니다. 동일한 속성이 문자열에 적용됩니다.

복잡한 테이블은 가로 또는 세로로 인접한 여러 셀을 하나로 병합해야 하는 특징이 있습니다. 이 기능은 코드에 지정된 COLSPAN(COLiimn SPANning) 및 ROWSPAN(ROW SPANning) 매개변수를 사용하여 구현됩니다.

이 그룹의 개별 열 설정이 설정됩니다. 그러나 태그에서 필요한 경우 정렬 매개변수를 설정할 수 있으며 그 값은 이 그룹의 모든 열에 적용됩니다. 태그에 지정된 매개 변수 값 , 태그의 값을 재정의 . 태그에 이 예제에서는 이전 예제와 달리 SPAN 매개변수가 없습니다. 여기서 그 사용은 무의미합니다. 그룹의 요소 수는 태그 다음 요소에 의해 결정되기 때문입니다. 태그 . 따라서 태그의 SPAN 매개변수의 주어진 값 재정의됩니다.

무화과. 4.17은 위 코드의 구현 결과와 태그에 RULES=GROUPS 항목이 있는 테이블을 표시하는 변형을 보여줍니다.

또는

. 표기법: COLSPAN=num, 여기서 num은 현재 셀을 가로로 확장할 열 수를 지정하는 숫자 값입니다. ROWSPAN 매개변수의 사용은 유사하지만 여기에서만 현재 셀이 세로로 확장되어야 하는 행 수를 지정합니다. 기본적으로 이러한 매개변수는 값 1로 설정됩니다. 하나의 셀에 대해 두 매개 변수의 값을 동시에 설정할 수 있습니다. 이러한 매개 변수의 값을 올바르게 설정하는 것은 매우 간단한 작업이 아닐 수 있습니다. 특히 대부분의 HTML 편집기를 사용하면 후속 HTML 코드 생성으로 가장 단순한 테이블만 시각적으로 디자인할 수 있기 때문입니다. 무화과. 4.12는 다음 HTML 코드로 얻은 테이블 디스플레이의 예를 보여줍니다. 두 행에 걸친 셀 두 열에 걸친 셀 셀 3 셀 4 셀 5 셀 6 셀 7 쌀. 4.12.여러 행 또는 열에 걸쳐 있는 셀이 있는 테이블 셀 확산 매개변수를 부주의하게 설정하면 상호 중복 및 충돌이 발생하여 결과를 예측할 수 없습니다. 확장 셀의 일반적인 용도는 여러 인접 열 또는 행에 대한 공통 머리글입니다. 다음은 확장 셀이 잘못 구성된 HTML 코드의 예입니다(그림 4.13 참조). 셀 1 셀 2 셀 3 (흔한 하 셋 윤곽) 셀 4 셀 5 셀 6 셀 7(두 열에 걸쳐 있음) 쌀. 4.13.확장 셀의 잘못된 감지 결과(텍스트 오버레이) BGCOLOR 매개변수는 전체 테이블, 개별 행 또는 셀의 배경색을 지정합니다. 태그에 나타날 수 있음 , , 정보가 없거나 데이터로 취급되지 않는 하나 이상의 공백이 포함되어 있습니다. 예를 들어 보이지 않는 데이터를 포함하는 셀에는 코드 또는 줄 바꿈 코드가 포함될 수 있습니다. , 또는 색상이 셀의 배경색과 일치하는 텍스트. 데이터가 포함된 셀(보이지 않는 셀 포함)이 모든 브라우저에서 동일한 방식으로 표시되는 경우 빈 셀은 다르게 표시됩니다. Netscape 브라우저는 빈 셀을 표시하지 않습니다. 즉, 이 셀이 있는 곳은 데이터가 포함된 셀과 달리 셀의 배경색이 아닌 페이지의 배경색으로 채워집니다. 빈 셀 주위에는 테두리가 그려지지 않습니다. 빈 셀이 있는 테이블의 예가 그림에 나와 있습니다. 4.15. 쌀. 4.15.빈 테이블 셀이 다른 브라우저에서 다르게 렌더링됨 Microsoft Internet Explorer는 셀의 배경색으로 두 셀을 모두 표시합니다. NSCA Mosaic과 같은 브라우저를 사용하면 적절한 옵션을 선택하여 테이블의 빈 셀 발급 특성을 결정할 수 있습니다. 이러한 기능을 알면 사용자가 선택한 브라우저에 관계없이 적절하게 표시되는 테이블을 디자인할 수 있습니다. 경우에 따라 일부 빈 셀 대신 단일 코드를 포함하는 셀을 생성하는 것으로 충분합니다. 테이블 열의 데이터 정렬 테이블을 만들 때 일반적인 문제는 개별 행 또는 열에 대한 정렬 옵션을 설정하는 것입니다. 현재 행의 모든 ​​셀 내용을 정렬하려면 코드에서 필요한 매개 변수를 설정하는 것으로 충분합니다. . 그러나 대부분의 경우 열에 동종 데이터가 포함되어 있기 때문에 동일한 열의 모든 요소가 동일한 방식으로 정렬되도록 해야 하는 경우가 더 많습니다. 이전 버전의 HTML에서는 태그에 설정된 COLSPEC(COLumn SPECification) 매개변수를 사용하도록 제안되었습니다. 그리고 . 이 기능은 HTML 사양에서 제공되지 않지만 Netscape와 Microsoft Internet Explorer에서 모두 지원됩니다. 입력 양식은 태그와 동일합니다. , 즉: BGCOLOR=값, 여기서 값은 RGB 형식의 색상 내용 또는 해당 이름입니다. 예시: 또는 . 중첩 테이블 개별 테이블 셀은 섹션에서 허용되는 거의 모든 언어 태그 및 데이터를 포함할 수 있습니다. 문서. 특히, 다른 테이블을 테이블 셀 안에 완전히 배치할 수 있습니다. 이러한 테이블을 중첩이라고 합니다. 구성 규칙은 테이블 구성과 다르지 않으며 별도의 설명이 필요하지 않습니다. 테이블을 지원하는 모든 브라우저가 여러 수준의 중첩이 있는 복잡한 테이블을 올바르게 표시하는 것은 아니므로 사용에 주의가 필요합니다. 다음은 한 수준의 중첩을 사용하는 테이블의 예입니다. 레닌그라드 지역의 도시 H - 도시 인구(1000명, 1992) P - 상트페테르부르크로부터의 거리(km) 상트페테르부르크에 종속된 도시 도시 시간 피 젤레노고르스크 13.6 50 콜피노 144.6 26 크론슈타트 45.2 48 로모노소프 42.0 40 파블로프스크 25.4 30 Petrodvorets 83.8 29 푸쉬킨 95.1 24 세스트로레츠크 34.9 35 모든 도시 종속 관리 상트페테르부르크 직접적인 도시 전화 번호. 지역 종속 도시 도시 시간 피 복시토고르스크 21.6 정렬=오른쪽>245 볼호프 50.3 정렬=오른쪽>122 브세볼로시스크 32.9 24 비보르크 80.9 130 비소츠크 1.0 정렬=오른쪽>159 가치나 80.9 46 이반고로드 11.9 정렬=오른쪽>147 카멘노고르스크 5.9 157 킨기세프 51.5 정렬=오른쪽>138 키리시 53.8 정렬=오른쪽>115 키롭스크 23.8 55 로데이노예 폴 27.3 정렬=오른쪽>244 리가 41.8 139 (표 계속) 도시 시간 피 루반 4.7 85 노바야 라도가 11.2 정렬=오른쪽>141 오트라드노예 22. 9 정렬=오른쪽>40 피칼레보 25.1 정렬=오른쪽>246 지하철 23.1 285 프리모르스크 6.7 137 프리오제르스크 20.5 정렬=오른쪽>145 스베토고르스크 15.8 정렬=오른쪽>201 슬레이트 42.6 정렬=오른쪽>192 소나무 숲 57.6 81 티흐빈 72.0 정렬=오른쪽>200 토스노 33.8 53 슐리셀부르크 12.5 64 쌀. 4.14.중첩 테이블 예 이 예의 디스플레이 결과는 그림 1에 나와 있습니다. 4.14. 언뜻 보기에 예제에는 테이블 중첩이 없는 것처럼 보입니다. 실제로 전체 문서는 헤더와 5개의 셀을 포함하는 단 하나의 행으로 구성된 경계선 없는 테이블입니다. 이러한 테이블의 구성은 페이지의 데이터를 정렬하는 유일한 목적으로 사용됩니다. 첫 번째 셀 내부에는 고유한 머리글이 있고 세 개의 열로 구성된 또 다른 테이블이 있으며 중간에 정렬된 텍스트가 있습니다. 세 번째와 다섯 번째 셀에도 별도의 테이블이 있습니다. 두 번째와 네 번째 셀은 비어 있고 데이터가 없으며 너비를 지정하는 단일 WIDTH 매개변수가 있습니다. 이들의 목적은 테이블이 위치한 세 번째와 다섯 번째 셀뿐만 아니라 첫 번째와 세 번째 셀 사이에 들여쓰기를 설정하는 것입니다. 이는 이러한 들여쓰기를 설정하기 위한 가능한 옵션 중 하나입니다. 또 다른 옵션은 셀 사이의 거리를 결정하는 CELLSPACING 매개 변수를 사용하는 것이지만 이 매개 변수는 현재 필요하지 않은 수평 및 수직 들여쓰기를 설정합니다. 또한 뷰포트가 좁아지면 CELLSPACING 매개변수(및 CELLPADDING)로 지정된 공간과 달리 지정된 너비의 빈 셀이 축소됩니다. 이 예에서는 브라우저의 뷰포트 너비를 줄이거나 같은 효과로 텍스트가 표시되는 글꼴의 크기를 늘립니다. 테이블 사이의 거리가 0으로 줄어들어 가능한 한 오랫동안 모든 정보를 동시에 볼 수 있지만 추가 변경으로 인해 테이블이 손상되지는 않지만 가로 스크롤이 가능합니다. 유사한 구성표에 따르면 테이블뿐만 아니라 이미지, 텍스트 조각 등으로 구성된 정보 배치를 구성할 수 있습니다. 테이블 구축의 특징 이 섹션에서는 개별 브라우저의 일부 특정 기능과 테이블 작성 및 표시의 일부 미묘함에 대해 설명합니다. 테이블에 빈 셀 표시 다른 브라우저에서 표를 표시하는 기능 중 하나는 빈 셀을 표시하는 것입니다. 언어 설명에 따르면, 모든 브라우저는 셀 수가 나머지 줄보다 작게 설정된 경우 빈 셀로 줄을 채워야 합니다. 또한 데이터가 포함되지 않은 셀은 테이블의 어느 위치에나 있을 수 있습니다. 비어 있는 셀과 보이지 않는 데이터가 포함된 셀에는 차이가 있습니다. 한 쌍의 태그 안의 빈 셀 그리고 각 테이블 열의 정렬 및 너비를 정의했습니다. 예를 들어 셀에서 테이블 데이터 정렬의 3개 열에 대해 정의된 colspec="L40 R50 C80" 설정: 첫 번째 열 - LEFT, 두 번째 - RIGHT 및 세 번째 - CENTER 및 각 열의 너비 . HTML 언어가 발전함에 따라 이것은 더 이상 사용되지 않으며 현재 언어 사양의 일부가 아니며 대부분의 브라우저에서 지원되지 않습니다. 결과적으로 Netscape Navigator에는 이 문제를 해결할 수 있는 특별한 도구가 없으며 기본 정렬을 사용하거나 필요한 경우 각 셀에 적절한 값을 설정하는 것이 유일한 옵션입니다. Microsoft Internet Explorer는 특수 태그를 제공합니다. 그리고 . 이러한 태그는 설명 바로 뒤에 나타나야 합니다. 태그가 처음 나타나기 전에 . 태그 옵션 그리고 매개 변수 값의 영향을 받는 인접 열의 수를 결정하는 SPAN과 해당 열(또는 열)의 모든 셀에서 데이터의 수평 정렬을 결정하는 ALIGN이 될 수 있습니다. ALIGN 매개변수의 유효한 값은 LEFT, RIGHT 및 CENTER입니다. SPAN 매개변수의 경우 기본값은 1입니다. 꼬리표 추가로 셀에서 데이터의 수직 정렬을 결정하는 VALIGN 매개변수를 설정할 수 있습니다. VALIGN 매개변수의 유효한 값은 MIDDLE, TOP 및 BOTTOM입니다. 태그의 차이점 그리고 그 중 첫 번째는 열에 대한 데이터 정렬 매개 변수를 설정하는 것 외에도 여러 열을 그룹으로 조건부 합집합을 수행한다는 것입니다. 이 집계의 효과는 아래에 설명된 RULES 매개변수를 사용할 때 표시됩니다. 기본적으로 테이블의 모든 열은 하나의 그룹으로 처리됩니다. 꼬리표 그룹의 개별 열에 있는 데이터 정렬을 결정하는 데에만 사용해야 합니다. 예를 들어 보겠습니다. 6개의 열을 포함하는 테이블을 작성해야 하고 처음 세 개의 데이터는 오른쪽 정렬되어야 하고 다음 세 개는 가운데에 있어야 한다고 가정합니다. 이 문제를 해결하려면 다음 HTML 코드를 작성하십시오. (테이블용 데이터) 이 코드를 표시한 결과는 그림 4에 나와 있습니다. 4.16. 쌀. 4.16.셀 그룹의 데이터에 대한 다양한 정렬 옵션이 있는 표 또 다른 예. 이전 표에서 처음 두 열은 오른쪽에, 세 번째 열은 가운데에 정렬해야 하고 세 열을 모두 하나의 그룹으로 결합해야 한다고 가정합니다. 다음 세 열도 함께 그룹화되어야 하며 첫 번째 그룹과 동일한 정렬을 가져야 합니다. 이 문제를 해결하려면 다음 HTML 코드를 작성하십시오. (테이블용 데이터) 이 예에서는 태그 뒤에

, 그룹화의 의미를 볼 수 있습니다.

조언

태그의 범위 이후

그리고 단일 브라우저인 Microsoft Internet Explorer로 제한되므로 주의해서 사용해야 합니다. 이러한 태그를 사용하는 편리함은 명백하지만 실제로 대부분의 테이블은 필요한 경우 각 테이블 셀에 대해 적절한 정렬 매개변수 ALIGN을 사용하여 작성되며 이는 테이블의 소스 코드 크기를 크게 증가시키지만 모든 브라우저.




쌀. 4.17.그룹화된 열이 있는 테이블

표 테두리 색상 설정

Microsoft Internet Explorer에만 해당되는 몇 가지 추가 옵션을 사용하면 BORDERCOLOR, BORDERCOLORLIGHT 및 BORDERCOLORDARK와 같은 표 테두리의 색상을 선택할 수 있습니다. 이 매개변수는 태그에서 설정할 수 있습니다.

, . 색상 이름 또는 해당 16진수 값을 이러한 매개변수의 값으로 사용할 수 있습니다. BORDERCOLOR 매개변수는 모든 테이블 테두리 요소의 색상을 지정하는 반면 다른 두 매개변수는 BORDERCOLOR 값을 재정의하여 개별 구성 요소 테두리의 색상을 지정합니다. BORDERCOLORLIGHT 매개 변수는 전체 테이블의 왼쪽 및 위쪽 가장자리와 각 셀의 오른쪽 및 아래쪽 가장자리에 각각 색상을 지정합니다. 두 번째 매개변수 BORDERCOLODARK는 반대쪽 가장자리의 색상을 지정합니다. 이러한 매개 변수의 조합으로 인해 테이블이 페이지 표면 위로 약간 올라오거나 오목하게 보입니다. 그것은 모두 선택한 색상 조합에 따라 다릅니다.

메모

Netscape 4.x 브라우저는 BORDERCOLOR 옵션도 지원합니다.

테이블의 배경 이미지 설정

Microsoft Internet Explorer(및 Netscape 버전 4.x)에서는 전체 HTML 문서에 대해 수행할 수 있는 것처럼 테이블의 배경 이미지를 지정하는 BACKGROUND 매개변수를 사용할 수 있습니다. 이 매개변수는 태그에서 설정할 수 있습니다.

,	그리고

, , 승

Microsoft Internet Explorer를 사용하면 테이블을 구성하고 프레임 및 눈금선 그리기를 유연하게 제어하기 위해 여러 가지 새로운 태그를 사용할 수 있습니다.

태그

, 그리고 테이블 설명의 구조를 보다 엄격하게 설정하여 테이블 머리글의 셀, 테이블의 주요 내용 및 마지막 행을 강조 표시합니다. 이러한 태그는 태그 쌍 내의 테이블 설명에만 나타날 수 있습니다.

그리고	. 테이블 구조화 태그

그리고.

태그 그리고 표의 머리글과 바닥글을 설명하는 데 사용됩니다. 이러한 태그는 테이블에 한 번만 나타날 수 있습니다. 종료 태그는 생략할 수 있습니다. 이러한 태그를 사용하면 한 페이지를 넘는 큰 테이블을 만들 때 유용합니다.

꼬리표 테이블 설명에서 여러 번 발생할 수 있으며 종료 태그를 사용해야 합니다.. 이 태그는 태그와 동일한 방식으로 데이터의 논리적 그룹화를 수행합니다. 인접한 열을 그룹화하는 A입니다.

새 태그를 사용하면 테이블의 프레임과 그리드 라인을 보다 유연하게 관리할 수 있습니다.

테이블 주위의 프레임 그리기는 FRAME 태그 매개변수에 의해 제어됩니다.

, 테이블의 그리드 선 - RULES 매개변수 사용. 예를 들어, 열 사이에 세로선만 그릴 수 있게 되고, 전체 테이블에 테두리를 두는 대신 테이블의 상단과 하단에 가로선을 그립니다.

FRAME 매개변수는 다음 값을 가질 수 있습니다.

• 상자 또는 테두리 - 프레임은 사방에서 그려집니다.
• 위에 - 윗면만
• 아래에 - 아래쪽에서만
• HSIDES - 아래쪽과 위쪽을 그립니다.
• VSIDES - 왼쪽과 오른쪽 그리기
• LHS - 왼쪽만
• RHS - 오른쪽만
• 무효의 - 외부 프레임이 없는 테이블

RULES 매개변수는 테이블의 내부 격자선 그리기를 제어하며 다음 값을 사용할 수 있습니다.

• 모두 - 모든 내부 선이 그려집니다.
• 여러 떼 - 그룹을 구분하는 선만 그립니다.
• 행 - 선을 분리하는 선 그리기
• COLS - 열을 구분하는 선 그리기
• 없음 - 내부 선이 그려지지 않음

예시:

.

메모

테이블 및 프레임의 격자선 그리기는 BORDER 태그 매개변수가 있는 경우에만 수행됩니다.

. 이 매개변수가 없거나 0으로 설정되면 FRAME 및 RULES 매개변수의 모든 값에 대해 그리드 선과 프레임이 없습니다.

다음은 설명된 기능을 사용하여 테이블을 생성하는 완전한 HTML 코드의 예입니다.

유연한 라인 제어의 예
테이블 그리드

열 제목 1	열 제목 2	열 제목 3
데이터	데이터	데이터
데이터	데이터	데이터
데이터	데이터	데이터
데이터	데이터	데이터
데이터	데이터	데이터
데이터	데이터	데이터
결과	결과	결과




쌀. 4.18. Microsoft Internet Explorer로 표 격자선을 유연하게 그리기

이 예에서 브라우저에 의한 표시는 그림 1과 같습니다. 4.18에는 테이블 주변의 격자선과 프레임을 제어하기 위한 가능한 옵션 중 하나가 표시됩니다. 5픽셀 두께의 프레임(BORDER=S)이 테이블 주위에 그려지며, 위쪽과 아래쪽에만 그려집니다(FRAME=HSIDES). 데이터 그룹을 구분하기 위해 테이블 ​​내부에 눈금선이 그려집니다(RULES=GROUPS). 데이터 그룹은 첫째로 세 개의 태그의 존재에 의해 정의됩니다. , 각각 단일 테이블 열 선언그룹. 둘째, 태그 , 그리고<тгоот>또한 테이블 데이터를 내부 수평선 그리기를 결정하는 그룹으로 나눕니다.

테이블의 열 수 설정

Microsoft Internet Explorer(및 Netscape 버전 4.x)에서는 태그에 지정할 수 있습니다.

COLS 매개변수, 이 매개변수의 값은 테이블의 열 수를 결정합니다. 이 매개변수를 기록하면 테이블 설명 코드가 로드되기 전에 열 수를 결정할 수 있으므로 브라우저에 표시될 때 테이블 레이아웃 절차의 속도를 높일 수 있습니다. 현재 이 옵션을 활성화해도 문서 로드 프로세스에 어떤 식으로든 영향을 미치지 않습니다.

표 세로 정렬

마지막 태그 매개변수

Microsoft Internet Explorer에 고유한 은 텍스트에 상대적인 테이블의 수직 정렬을 지정하는 VALIGN입니다. 그 효과는 이미지에 대한 동일한 매개변수와 유사합니다.

메모

동일한 매개 변수의 사용은 동일한 브라우저 및 언어 사양의 프레임워크 내에서도 목적과 다른 태그에 대한 가능한 값 모두에서 크게 다를 수 있습니다. 따라서 응용 프로그램 컨텍스트 외부에서 다양한 매개 변수 사용에 대한 요약 테이블을 컴파일하는 것은 불가능합니다. 예를 들어, 테이블에서만 ALIGN 매개변수는 세 가지 다른 방식으로 사용됩니다.

• 태그

ALIGN 매개 변수는 LEFT 또는 RIGHT 값을 가질 수 있으며 각각 왼쪽 또는 오른쪽 가장자리로 눌린 테이블의 위치를 ​​의미합니다.

태그

, 필수의.

TD – 행에 새 셀을 만듭니다. 닫는 태그 필수의.

위의 모든 내용을 더 잘 이해하기 위해 예를 살펴보겠습니다.

ALIGN 매개 변수는 TOP 또는 BOTTOM 값을 가지며 테이블 위 또는 아래 테이블 헤더의 위치를 ​​의미합니다.

태그용

그리고

ALIGN 매개 변수는 LEFT, RIGHT 또는 CENTER 값을 가지며 테이블의 해당 셀 (또는 셀) 내용을 가로로 정렬하는 것을 의미합니다. 테이블 보기의 대안 테이블 지원은 웹 브라우저의 보편적인 기능이 되었기 때문에 사용을 피할 이유가 거의 없습니다. 그럼에도 불구하고 테이블 대신 또는 테이블에 추가하여 사용할 수 있는 데이터의 대체 프레젠테이션에 대한 가능한 옵션을 고려할 것입니다. 테이블 개념을 사용하지 않는 다른 방법: 미리 서식이 지정된 텍스트를 사용합니다. 이 방법은 테이블 지원이 아직 존재하지 않았던 HTML 언어의 초기 버전에서 전통적으로 사용되었습니다. 이러한 텍스트는 순전히 텍스트를 포함하여 모든 브라우저에서 올바르게 표시되기 때문에 그 사용은 현재와의 관련성을 잃지 않았습니다. 테이블이 포함된 이미지 사용. 테이블은 텍스트 편집기로 만들거나 웹 브라우저로 표시한 다음 그래픽 형식 중 하나로 그림으로 저장할 수 있습니다. 이는 테이블 표시를 동적으로 사용자 정의할 수 있는 모든 유연성을 잃기 때문에 최선의 선택은 아닙니다. 또한 추가 이미지 파일을 저장할 필요가 있으며 그 크기는 일반적으로 HTML 테이블을 설명하는 텍스트의 크기보다 훨씬 큽니다. 적용 가능한 영역은 외부 요소(글꼴, 브라우저 모드 등)에 대한 디스플레이의 의존성이 허용되지 않는 엄격하게 정의된 크기의 테이블입니다. 테이블 대신 목록을 사용합니다. 가장 간단한 경우에는 테이블을 구성하는 대신 HTML 언어에서 사용할 수 있는 목록 유형 중 하나를 사용하는 것이 가능합니다. 테이블 준비 HTML 테이블을 준비하기 위해 모든 편집기를 사용할 수 있으며 대부분 시각적으로 테이블을 생성하는 도구가 있습니다. 다음은 HotDog Professional 편집기에서 테이블을 준비하는 예입니다. 테이블을 생성하려면 삽입 메뉴에서 테이블 항목을 선택하기만 하면 됩니다. 4.19. 테이블을 생성하는 것은 창의 해당 필드를 채우는 것입니다. 테이블의 행과 열 수를 결정한 후 동일한 대화 상자에 표시되는 테이블의 개별 셀을 직접 채울 수 있습니다. 대화 상자에는 내장 브라우저를 사용하여 결과 테이블을 볼 수 있는 미리보기 버튼이 있습니다(그림 4.20). 쌀. 4.19.테이블 생성을 위한 대화 상자 쌀. 4.20.내장 브라우저를 사용하여 표시된 테이블 테이블에 대한 데이터 준비를 마쳤으면 확인을 클릭합니다. 그러면 생성된 테이블 설명 코드가 편집 가능한 HTML 문서에 삽입됩니다. 그림에 표시된 예의 경우. 4.19, 다음 코드가 생성됩니다. (코드 일부 생략) 테이블 헤드 열 1 열 2 열 3 열 4 1 2 3 4 마찬가지로 이 작업은 Netscape Communicator의 Netscape Composer 구성 요소를 사용하여 해결됩니다. 무화과. 4.21은 필수 필드를 입력해야 하는 대화 상자를 보여줍니다. 추가 태그 매개변수를 입력하려면 추가 HTML 버튼이 제공됩니다. 대화 상자의 필드를 채운 후 적용 버튼을 클릭해야 테이블 셀을 채울 수 있는 기회가 제공됩니다(그림 4.22). 쌀. 4.21. Netscape Composer 테이블 옵션 설정을 위한 대화 상자 쌀. 4.22.빈 테이블에서 입력 커서의 초기 위치 그런 다음 테이블은 웹 페이지의 보이지 않는 프레임워크를 만드는 데 매우 중요한 역할을 합니다. 그리고 이것은 텍스트, 메뉴, 그림 등을 고르고 아름답게 배열하는 데 도움이 될 것입니다. 내가 말하려는 내용을 더 잘 이해하려면 웹 페이지 골격의 예를 살펴보십시오. 그래서, HTML로 간단한 테이블을 만드는 방법? 테이블을 작성하려면 세 가지 태그를 사용해야 합니다. 테이블 – 이 태그는 테이블을 여는 데 필요합니다. 이것은 다른 요소를 포함하는 일종의 컨테이너입니다. 도넛 없이는 알아낼 수 없도록 구부러져 있습니다. 아무 것도 아닙니다. 예를 보면 알아낼 것입니다. 닫는 태그 필수의. 테이블은 행으로 구성됩니다. 행 1 행 1 행 2 행 2 행 3 행 3 세포 1 셀 2 세포 1 셀 2 세포 1 셀 2 TR – 새 테이블 행을 만듭니다. 닫는 태그

행 1 셀 1	행1 셀2
행 2 셀 1	행 2 셀 2
행 3 셀 1	행 3 셀 2





결과는 다음과 같습니다.

행 1 셀 1	행1 셀2
행 2 셀 1	행 2 셀 2
행 3 셀 1	행 3 셀 2

모든 것을 설명합시다.
새 테이블이 생성될 때마다 태그가 열립니다.

.
다음으로 용기 중앙에 놓으십시오. 꼬리표 , 새 행의 시작을 나타냅니다.
이 행에서 태그를 사용하여 콘텐츠가 있는 두 개의 셀을 삽입합니다.

태그가 있는 행 닫기 .
태그로 다른 행 열기
태그가 있는 행 닫기 .
태그로 세 번째 행 열기 다시 두 개의 셀을 삽입합니다.
태그가 있는 행 닫기 .
태그로 테이블 닫기

행 1 셀 1	행1 셀2

.

당신이 그것을 알아낸 것 같아요? 누군가 속성이 무엇인지 잊어버린 경우 국경내가 태그와 함께 사용하는

, 이것이 프레임의 두께임을 상기시켜드립니다. 만약에 국경"0"으로 설정되면 표 테두리가 보이지 않습니다.

몇 가지 예를 살펴보십시오. 생성된 테이블그리고 당신은 더 갈 수 있습니다:

행 1 셀 1

행 2 셀 1





결과:

테이블에 이미지를 삽입하기 위해서는 이미지가 HTML 파일에 어떻게 삽입되는지에 대한 기본 지식이 필요합니다. 나는 이것에 대해 이야기합니다. 이제 HTML에서 이미지의 기본적인 뉘앙스를 알았으므로 표에 이미지를 삽입해 볼 수 있습니다. 이것은 다음과 같이 할 수 있습니다:

태그 사이에 줄에 이미지를 삽입합니다.

행 1 셀 1

행 1 셀 2





결과:

행 1 셀 1

행 1 셀 2

표에서 셀을 병합하는 방법은 무엇입니까?

테이블의 셀을 병합하려면 다음 속성을 사용해야 합니다.
콜스판- 열 수를 지정합니다.
기본값은 1입니다.
ROWSPAN- 행 수를 결정합니다.
기본값은 1입니다.


셀 병합속성이 있는 맨 위 행에 콜스팬 :

행 1 셀 1+2
행 2 셀 1	행 2 셀 2





결과:

테이블 크기는 어떻게 설정하나요?

테이블의 높이와 너비를 설정하려면 다음 속성을 사용하십시오.

너비- 테이블 너비. 크기는 픽셀 또는 백분율로 지정됩니다.
키- 테이블의 높이. 크기는 픽셀 또는 백분율로 지정됩니다.

행 1 셀 1	행1 셀2
행 2 셀 1	행 2 셀 2





결과:



테이블의 콘텐츠 정렬

표 안의 내용(텍스트, 그림)을 정렬하려면 다음 특성을 사용할 수 있습니다.

맞추다– 표 내용의 수평 정렬.
속성으로 맞추다값이 할당됩니다. 왼쪽(기본값), 센터 ,오른쪽.
왼쪽-콘텐츠를 왼쪽으로 누르십시오.
센터 -중앙에 설정;
오른쪽-콘텐츠를 오른쪽으로 밀어

VALIGN- 표 내용의 수직 정렬.
속성으로 VALIGN값이 할당됩니다. 상단, 하단, 중간.
맨 위 – 내용을 맨 위로 누르십시오.
맨 아래 – 내용을 바닥으로 누르십시오.
가운데 – 중간에 내용 설정

행 1 셀 1	행1 셀2
행 2 셀 1	행 2 셀 2





결과:



테이블 배경을 만드는 방법?

결합된 모든 셀과 각 셀에 대해 개별적으로 테이블 배경을 설정할 수도 있습니다. 배경색을 설정하거나 그림을 설정할 수 있습니다. 배경에는 두 가지 속성이 있습니다.

BGCOLOR- 전체 테이블 또는 각 셀의 배경색을 개별적으로 지정합니다. 색상은 코드 또는 단어로 지정됩니다.
배경- 테이블의 배경은 그림으로 채워집니다.

주목:테이블 전체의 배경색이나 배경 이미지를 설정하려면 태그에 속성을 설정해야 합니다.

. 그리고 특정 셀에만 해당하는 경우 태그에

. 이해를 돕기 위해 다음 예를 참조하십시오. 행 1 셀 1 행1 셀2 행 2 셀 1 행 2 셀 2 결과: 주목:그림이 셀보다 작으면 셀을 끝까지 채울 때까지 반복됩니다. 그림이 셀보다 크면 그림의 배경이 셀에 맞게 잘립니다. 그리고 마지막으로 두 가지 유용한 속성. 갑자기 모든 셀 사이의 거리를 늘리려는 경우 다음 속성이 도움이 됩니다. 셀패딩– 각 html 테이블 셀의 프레임과 그 안에 포함된 자료 사이의 거리. 행 1 셀 1 행1 셀2 행 2 셀 1 행 2 셀 2 결과: 행 1 셀 1 행1 셀2 행 2 셀 1 행 2 셀 2 셀 간격인접한 셀의 경계 사이의 거리입니다. 행 1 셀 1 행1 셀2 행 2 셀 1 행 2 셀 2 결과: 행 1 셀 1 행1 셀2 행 2 셀 1 행 2 셀 2 휴, 말했어! 작업에 대처하고 내가 아는 모든 것을 설명했으면합니다. HTML 테이블. 그리고 재료를 잘 고정하는 것을 추천합니다. 자신만의 테이블을 만들거나 html 테이블에서 웹 페이지의 전체 프레임워크를 만들어 보십시오. 최선을 다해! 제 블로그를 방문해 주셔서 감사합니다 공유: 5,00 / 3 집 →아수스 →테이블을 전체 페이지 HTML로 만드는 방법. 태그 속성 및 셀 병합용 → 관련 기사: 원치 않는 Beeline Operator 서비스를 비활성화하는 방법 충전기 없이 휴대폰 배터리를 충전하는 비표준 방법 누가 혜택을 받을 수 있습니까? Beeline 운영자의 유료 서비스 연결을 끊는 방법은 무엇입니까?