HTML에서 테이블은 무엇에 사용됩니까? 예: rowspan 속성 사용
테이블의 다양성과 모양을 제어하는 수많은 매개변수 덕분에 테이블은 오랫동안 웹 페이지 레이아웃의 확실한 표준이 되었습니다. 테두리가 보이지 않는 테이블은 웹 페이지 요소를 배치하는 데 편리한 블록 안에 있는 모듈식 그리드처럼 보입니다. 그러나 이것은 완전히 올바른 접근 방식은 아닙니다. 왜냐하면 각 HTML 개체는 고유한 목적으로 정의되고, 의도된 목적으로 모든 곳에서 사용되지 않으면 대안이 없다는 것을 의미하기 때문입니다. 웹 사이트 레이아웃에서 레이어가 테이블을 대체하기 전까지는 오랫동안 이런 일이 있었습니다. 이는 레이어가 항상 사용된다는 의미는 아니지만 이미 추세가 명확하게 나타났습니다. 테이블은 테이블 형식의 데이터를 배치하는 데 사용되고 레이어는 레이아웃과 디자인에 사용됩니다.
테이블 만들기
표는 텍스트와 그림을 포함할 수 있는 셀의 행과 열로 구성됩니다. 테이블은 일반적으로 데이터를 구성하고 표시하는 데 사용되지만 테이블은 이에 국한되지 않습니다. 테이블을 사용하면 텍스트와 이미지의 일부를 원하는 방식으로 배열하여 페이지 레이아웃을 구성하는 것이 편리합니다.
웹페이지에 테이블을 추가하려면 태그를 사용하세요.
| . 테이블에는 하나 이상의 셀이 포함되어야 합니다(예 12.1). 태그 대신 허용됨 | 태그 사용 | . 태그로 스타일이 지정된 셀의 텍스트 | 는 브라우저에 굵은 글꼴로 표시되며 셀 중앙에 정렬됩니다. 그렇지 않으면 태그를 통해 생성된 셀 간의 차이점이 | 그리고 | 아니요.
예제 12.1. 테이블 만들기
세포의 순서와 모양은 그림 1에 나와 있습니다. 12.1. 안녕하세요, 블로그 독자 여러분! 웹 페이지에서는 텍스트나 그림 외에도 다양한 데이터를 표 형식으로 표시해야 하는 경우가 많습니다. 예, 이해할 수 있습니다. 표는 많은 양의 정보를 표시하는 가장 편리한 방법입니다. 그래서 질문이 생깁니다 "html에 테이블을 삽입하는 방법은 무엇입니까?". 이 기사에서 나는 이 질문에 답하고 다양한 HTML 테이블의 많은 예를 제공할 것입니다. HTML을 사용하여 테이블을 만드는 방법HTML 테이블은 네 단계로 생성됩니다. 1. 쌍을 사용하는 HTML 코드의 첫 번째 단계에서 꼬리표 2. 두 번째 단계에서는 다음을 형성합니다. 윤곽테이블, 쌍을 이루는 태그 배치 3. 다음으로 세 번째 단계에서는 세포쌍을 이루는 태그를 사용하는 테이블 4. 마지막 단계에서는 요소 내부에 배치합니다. 테두리 표시를 미세 조정하는 데 도움이 됩니다. 이를 사용하면 프레임의 두께와 색상을 변경할 수 있을 뿐만 아니라 테두리 유형도 변경할 수 있습니다. 셀 내부에 배치해야 하는 텍스트는 묶을 필요가 없지만, 텍스트가 큰 경우 태그를 사용하여 단락으로 나눌 수 있습니다. 삽입된 텍스트의 형식을 지정해야 하는 경우 를 사용할 수 있습니다. 텍스트 외에도 태그를 사용하여 셀에 그림을 배치할 수 있습니다. 셀의 내용은 다른 테이블일 수도 있습니다. 이 경우 중첩 테이블을 생성하는 것은 일반 테이블을 생성하는 것과 다르지 않습니다. 태그 사이에만 테이블을 생성할 때 명심해야 할 몇 가지 규칙이 있습니다. 페어링된 태그부터 시작해 보겠습니다. 표시하다: HTML 테이블은 논리적으로 부분(섹션)으로 나눌 수 있습니다. 섹션에는 세 가지 유형이 있습니다. 테이블 헤더 섹션은 쌍을 이루는 태그를 사용하여 구성됩니다. . 또한 하나의 요소만 사용할 수 있습니다. 동일한 테이블 내에서 태그 바로 뒤의 HTML 코드에 들어가야 합니다. 쌍을 이루는 태그로 본문 섹션이 생성됩니다. 종단 부분은 한 쌍의 태그로 구성됩니다. 페어링된 모든 태그에는 다음 태그가 포함되어야 합니다. 테이블의 가장 중요한 기능에 대해 이야기하는 것이 남아 있습니다. 셀 병합.속성은 여러 셀을 하나로 결합하는 데 사용됩니다. 콜스팬그리고 행 범위태그 결과 예: 셀을 병합할 때 각 행의 셀 수를 확인하여 오류가 없는지 확인하는 것이 중요합니다. 응, 디자인은 셀 병합 시 잘못된 HTML 코드의 예: 그리고 브라우저에 표시되는 결과는 다음과 같습니다. 저것들. html 코드를 분석해 보면 첫 번째 줄에는 3개의 셀이 포함되어 있는데, 그 중 2개는 colspan 속성을 사용하여 결합되고, 두 번째 줄에는 2개의 셀만 추가된 것을 알 수 있습니다. 따라서 세 번째 빈 셀이 두 번째 줄에 나타납니다. 이 게시물에서 우리는 이미 하나의 태그 속성을 발견했습니다. 테두리 속성 외에도 태그가 지원하는 몇 가지 중요한 속성이 있습니다. 기인하다 맞추다- 세트 수준 측량페이지의 테이블. 각각 왼쪽, 중앙, 오른쪽으로 정렬을 설정하는 왼쪽, 중앙, 오른쪽 값을 사용할 수 있습니다. 기본값은 왼쪽입니다. 기인하다 배경, 어느 배경 이미지를 설정합니다테이블로. 이미지 파일의 주소를 값으로 사용합니다. bgcolor— 세트 배경색테이블. 배경 속성과 함께 사용할 수 있습니다. 기인하다 테두리색상세트 프레임 색상테이블. 셀패딩— 정의 셀 테두리와 내용 사이의 거리. 테이블의 가독성을 향상시킬 수 있습니다. 값은 임의의 양수일 수 있습니다. 셀 간격- 세트 외부 셀 경계 사이의 거리. 이것에 대해 이야기합시다 HTML 페이지에 표를 삽입하는 방법마무리하겠습니다. 요약하면 다음과 같습니다. 그게 전부입니다. 다음 게시물에서는 HTML 사이트의 탐색 도구에 대해 이야기하겠습니다. 이 게시물을 놓치지 않으려면 내 블로그 업데이트를 구독하세요! 그게 다야, 또 보자! HTML 테이블 태그는 원래 표로 작성된 데이터의 행과 열을 나타내기 위해 만들어졌습니다. 그러나 디자이너들은 이를 사용하여 웹 페이지의 레이아웃을 제어하는 방법(예: 텍스트 열 생성, 요소 사이의 간격 설정, 다른 HTML 서식 지정 태그와는 다른 방식으로 텍스트 모양 변경)을 배웠습니다. HTML의 테이블은 항상 직사각형이며 행으로 구성되고 행은 셀로 구성됩니다. 생성되는 테이블의 구성 요소를 설명하는 모든 언어 구성은 태그 사이에 포함됩니다. 테이블은 한 줄씩 채워집니다. 한 쌍의 태그는 문자열을 나타내는 데 사용됩니다. 예 셀에 데이터가 있을 필요는 없습니다. 빈 셀을 만드는 방법에는 두 가지가 있습니다. 컨테이너를 아무것도 채우지 마세요( 행의 나머지 셀을 모두 채우지 않으려면 빈 셀을 별도로 만들 필요가 없습니다. 태그부터 기본 태그 속성 기본 태그 속성 할당 기인하다 목적 테이블 테두리의 너비(픽셀 단위)를 정의합니다(예: BORDER=1). 값이 0이면 프레임이 없음을 의미합니다. 전체 테이블의 너비를 픽셀 단위로 정의하거나 브라우저 창 너비의 백분율로 정의합니다. 전체 테이블의 높이를 픽셀 단위 또는 브라우저 창 높이의 백분율로 정의합니다. 브라우저 창에서 테이블의 가로 정렬을 설정합니다. 왼쪽, 중앙 및 오른쪽 값이 있습니다 (기본값은 왼쪽) 셀 내부의 데이터와 테두리 사이에 여유 공간을 추가합니다. 기본값은 2입니다. 전체 테이블 내의 셀 사이에 여유 공간을 추가합니다. 기본값은 2입니다. 테이블의 왼쪽과 오른쪽에 지정된 너비(픽셀 단위)의 여유 공간 영역을 지정합니다. 테이블 위와 아래에 지정된 높이(픽셀 단위)의 여유 공간 영역을 지정합니다. BGCOLOR=색상 테이블 전체의 배경색을 설정합니다. URL이 소스 주소(이미지 파일의 이름)인 테이블의 배경 이미지를 지정합니다. 예태그에 BORDER 및 ALIGN 속성을 추가하여 이전 예제에서 생성된 문서의 내용을 변경해 보겠습니다. 이제 표 셀의 프레임이 지정되고 표가 브라우저 창 중앙에 정렬됩니다. HTML의 테이블은 매우 기능적이어서 전체 웹사이트의 레이아웃(읽기)에 사용할 수 있습니다. 이제 웹 페이지에 간단한 HTML 테이블을 삽입하고 마크업만 분석하고 디자인은 건드리지 않는 방법에 대해 설명하겠습니다. CSS 스타일을 사용하여 테이블을 장식하는 것이 더 낫기 때문입니다. 테이블을 만드는 데 필요한 기본 요소는 다음과 같습니다. HTML 문서를 만들고 다음 코드를 복사하세요.
브라우저에서 문서는 다음과 같이 표시됩니다. 어떤 코드 줄이 무엇을 담당하는지 알아 보겠습니다. 본 강의에서는 HTML 마크업에서 테이블을 사용하는 원리에 대해 자세히 설명합니다. 여기에는 표 형식의 텍스트 구성, 표 형식 좌표 격자 및 표로 구성된 그래픽이 포함됩니다. WWW가 발전하면서 HTML에 포함된 리소스가 다양한 유형의 문서를 고품질로 표시하는 데 충분하지 않다는 것이 분명해졌습니다. HTML의 단점은 테이블을 표시하는 도구가 부족하다는 것입니다. 이를 위해 미리 서식이 지정된 텍스트(태그 태그는 테이블을 설명하는 데 사용됩니다.<ТАВLЕ>. 꼬리표<ТАВLЕ>는 다른 많은 기능과 마찬가지로 테이블 앞과 뒤의 줄을 자동으로 변환합니다. 꼬리표<ТR>(테이블 행) 테이블 행을 생성합니다. 한 줄에 배치해야 하는 모든 텍스트, 기타 태그 및 속성은 lt;TR> 태그 사이에 배치되어야 합니다.. 데이터가 있는 셀은 일반적으로 테이블 행 내부에 배치됩니다. 텍스트나 이미지가 포함된 모든 셀은 태그로 둘러싸여야 합니다.<ТD>. 태그 수<ТD>행에서 셀 수를 정의합니다.
테이블 열과 행의 제목은 헤더 태그를 사용하여 설정됩니다.<ТН>(테이블헤더, 테이블 제목). 이 태그는 유사합니다.<ТD>. 차이점은 태그 사이에 텍스트가 포함되어 있다는 것입니다.<ТН>, 은 자동으로 굵게 표시되며 기본적으로 셀 중앙에 배치됩니다. 중앙 정렬을 취소하고 텍스트를 왼쪽이나 오른쪽으로 정렬할 수 있습니다. 당신이 사용하는 경우<ТD>태그 포함<В>그리고 속성<АLIGN=center>, 텍스트도 제목처럼 표시됩니다. 그러나 모든 브라우저가 표에 굵은 글꼴을 지원하는 것은 아니므로 다음을 사용하여 표 제목을 설정하는 것이 좋습니다.<ТН>.
꼬리표
일반적으로 표 셀의 한 행에 맞지 않는 텍스트는 다음 행으로 이동됩니다. 그러나 태그와 함께 NOWRAP 속성을 사용하는 경우<ТН>또는<ТD>셀 길이는 셀 안에 포함된 텍스트가 한 줄에 맞도록 확장됩니다. 태그<ТD>그리고<ТН>COLSPAN 속성(Column Span, 열 연결)을 사용하여 수정되었습니다. 셀을 위쪽이나 아래쪽보다 넓게 만들려면 COLSPAN 속성을 사용하여 원하는 수의 일반 셀 위로 늘릴 수 있습니다.
태그에 사용되는 ROWSPAN 속성<ТD>그리고<ТН>는 COLSPAN= 속성과 유사하지만 셀이 늘어나는 줄 수만 지정합니다. ROWSPAN=s 속성에 1보다 큰 숫자를 지정한 경우 해당 행 수가 확장된 셀 아래에 있어야 합니다. 테이블 아래쪽에는 놓을 수 없습니다. WIDTH 속성은 두 가지 경우에 사용됩니다. 태그에 넣으시면 됩니다<ТАВLЕ>전체 테이블의 너비를 지정하거나 태그에 사용할 수 있습니다.<ТD>또는<ТН>셀 또는 셀 그룹의 너비를 설정합니다. 너비는 픽셀 또는 백분율로 지정할 수 있습니다. 예를 들어 태그에 설정하면<ТАВLЕ>WIDTH=250이면 모니터의 페이지 크기에 관계없이 너비가 250픽셀인 표가 표시됩니다. 태그에서 WIDТН=50%를 설정하는 경우<ТАВLЕ>테이블은 화면의 모든 이미지 크기에서 페이지 너비의 절반을 차지합니다. 따라서 테이블 너비를 백분율로 지정할 때 사용자의 뷰포트가 좁은 경우 페이지가 약간 이상하게 보일 수 있다는 점을 명심하세요. 픽셀을 사용하고 있고 표가 보기 영역보다 넓은 경우 하단에 스크롤 막대가 나타나 페이지에서 왼쪽과 오른쪽으로 이동할 수 있습니다. 수행 중인 작업에 따라 테이블 너비를 설정하는 방법 중 하나가 유용할 수 있습니다.
셀에 데이터가 없으면 테두리가 없습니다. 셀에 테두리만 있고 내용이 없도록 하려면 볼 때 보이지 않는 내용을 셀에 넣어야 합니다. 빈 문자열을 사용할 수 있습니다<ВR>. 너비를 픽셀 또는 상대 단위로 정의하고 결과 셀에 데이터를 입력하지 않음으로써 빈 열을 지정할 수도 있습니다. 이 도구는 페이지에 텍스트와 그래픽을 배치할 때 유용할 수 있습니다. 이 속성은 셀 내용과 테두리 사이의 빈 공간 너비를 결정합니다. 즉, 셀 내부 여백을 설정합니다.
태그<ТR>, <ТD>그리고<ТН>ALIGN 및 VALIGN 속성을 사용하여 수정할 수 있습니다. ALIGN 속성은 텍스트와 그래픽이 수평으로 정렬되는지, 즉 왼쪽이나 오른쪽으로 정렬되는지, 아니면 가운데 정렬되는지를 결정합니다. 수평 정렬은 여러 가지 방법으로 설정할 수 있습니다. ALIGN=왼쪽으로 블리드왼쪽 가장자리에 가까운 셀의 내용을 누릅니다. 정렬=왼쪽 CELLPADDING 속성에 지정된 들여쓰기를 고려하여 셀의 내용을 왼쪽으로 정렬합니다. 정렬=가운데셀 내용을 중앙에 맞춥니다. 정렬=오른쪽 CELLPADDING 속성에 지정된 들여쓰기를 고려하여 셀 내용을 오른쪽으로 정렬합니다.
VALIGN 속성은 셀 내의 텍스트와 그래픽을 수직으로 정렬합니다. 수직 정렬은 여러 가지 방법으로 설정할 수 있습니다. VALIGN=상단셀의 내용을 위쪽 테두리에 맞춥니다. VALIGN=중간셀 내용을 세로로 가운데에 맞춥니다. VALIGN=하단셀 내용을 아래쪽 테두리에 맞춥니다.
태그에서<ТАВLЕ>테두리, 즉 표 셀과 표 자체를 둘러싸는 선이 어떻게 보일지 결정하는 경우가 많습니다. 프레임을 지정하지 않으면 줄이 없는 테이블이 표시되지만 공간이 할당됩니다. 설정해도 동일한 결과를 얻을 수 있습니다.<ТАВLЕ ВОRDER=0>. 때로는 테두리를 더 두껍게 만들어서 더 잘 눈에 띄기를 원할 때도 있습니다. 그림이나 텍스트에 주의를 끌기 위해 굵은 테두리만 설정할 수 있습니다. 중첩된 표를 생성할 때 표를 쉽게 구별할 수 있도록 표마다 서로 다른 두께의 테두리를 만들어야 합니다. CELLSPACING 속성은 셀 사이의 간격 너비를 픽셀 단위로 지정합니다. 이 속성을 지정하지 않으면 기본값은 2픽셀입니다. CELLSPACING= 속성을 사용하면 필요한 곳에 텍스트와 그래픽을 배치할 수 있습니다. 빈 공간을 남기고 싶다면 셀에 공백을 적어주시면 됩니다.
이 속성을 사용하면 배경색을 설정할 수 있습니다. 어떤 태그(TABLE, TR, TD)를 사용하느냐에 따라 테이블 전체, 행, 개별 셀의 배경색을 설정할 수 있습니다. 이 속성의 값은 RGB 코드 또는 표준 색상 이름입니다.
이 속성은 테이블의 배경 이미지를 지정합니다. TABLE 및 TD 태그에 적용됩니다. 해당 값은 배경 이미지 파일의 URL입니다. 이 속성의 사용은 아래에서 설명됩니다. 테이블의 좋은 점은 원하는 경우 테두리를 보이지 않게 할 수 있다는 것입니다. 이렇게 하면 태그를 사용할 수 있습니다.<ТАВLЕ>페이지에 텍스트와 그래픽을 아름답게 배치합니다. 안녕 태그<ТАВLЕ>HTML의 유일한 강력한 서식 도구로 남아 있습니다. 이제 웹 페이지 디자이너는 인쇄된 페이지 디자이너와 거의 동일한 공백 사용 자유를 누리게 되었습니다. 표는 웹 페이지의 텍스트를 계층적으로 배치하는 방식에서 벗어나는 가장 좋은 방법입니다. 브라우저가 테이블을 지원하는 경우 일반적으로 테이블을 사용하여 얻은 가장 흥미로운 효과가 올바르게 표시됩니다.
일부 브라우저에서는 색상을 표시할 수 있습니다. 주로 사용하는 브라우저에 따라 표에 색상을 지정하는 방법에는 여러 가지가 있습니다. Netscape Navigator의 색상 테두리. 테이블 주위를 아름다운 테두리로 둘러쌀 수 있을 뿐만 아니라 텍스트 색상, 배경 색상과 다른 색상으로 설정할 수도 있습니다. 간단한 회색 GIF(또는 배경으로 사용하고 싶은 GIF)를 만들고 태그에 정의하세요.<ВODY>페이지 배경으로. 그런 다음 페이지 배경색을 설정합니다. 결과적으로 귀하의 태그는<ВОDY>다음과 같이 보일 것입니다 :
GIF와 지정된 색상이라는 이중 배경을 만들었습니다. 결과적으로 배경색은 모든 테이블 테두리와 수평선(<НR>). 배경 GIF가 회색인지 여부에 관계없이 색상 선과 표 테두리가 눈에 띄게 돋보입니다. 배경 GIF가 너무 복잡하지 않으면 페이지 로드 시간이 약간만 늘어납니다. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
