표는 행과 열로 구성된 매우 복잡한 구조입니다. 테이블의 외부 기본 구조는 항상 테이블 요소입니다.
<테이블> ... </테이블>
실제 테이블 정의는 이 요소 내에서 이루어집니다. 참고로 테이블을 HTML로 변환할 때 테이블에 프레임을 할당하는 것이 좋습니다. 이렇게 하면 행과 열이 어떻게 구성되는지 더 쉽게 이해할 수 있습니다. 이렇게 하려면 도입부 <표>에 속성-값 조합 border="1" 을 할당합니다. (HTML에서는 테두리 속성을 사용해서는 안 된다는 점에 유의하세요. 이 경우 해당 CSS 속성이 대신 사용됩니다. 이에 대해서는 나중에 자세히 설명합니다.)
<table border="1"> ... </table>
다음 단계는 표 행을 정의하는 것입니다. 이 작업은 tr 요소를 사용하여 수행합니다.
<table border="1"> <tr></tr> </table>
그러나 아직 원하는 출력으로 이어지지는 않습니다. 다음 단계는 열을 정의하는 것입니다. 이 작업은 다시 td 요소를 사용하여 수행됩니다.
<table border="1"> <tr> <td></td> </tr> </table>
이제 첫 번째 테이블 콘텐츠를 정의할 수 있습니다. 이것은 <td&t ; 와 </td&t; 사이에 정의됩니다.
<table border="1"> <tr> <td>콘텐츠 1</td> </tr> </table>
이제 브라우저에서 결과를 살펴볼 차례입니다.
현재 테이블은 하나의 테이블 셀로만 구성되어 있기 때문에 특별히 멋진 것은 아닙니다. 이제 다른 열을 추가할 수 있습니다. 이 작업은 다시 td 요소를 사용하여 수행됩니다. 반드시 tr 요소 안에 정의해야 합니다.
<table border="1"> <tr> <td>콘텐츠 1</td> <td>콘텐츠 2</td> </tr> </table>
다시 한 번 결과를 살펴보세요.
테이블에 추가 행을 포함하려면 원하는 td 요소가 정의된 다른 tr 요소를 생성하기만 하면 됩니다.
다음은 또 다른 예시입니다:
<table border="1"> <tr> <td>콘텐츠 1</td> <td>콘텐츠 2</td> </tr> <tr> <td>콘텐츠 3</td> <td>콘텐츠 4</td> </tr> </table>
브라우저에서 결과를 살펴보면 다음과 같은 결과가 표시됩니다.
이 방법으로 광범위한 테이블을 만들 수도 있습니다.
머리글, 본문 및 바닥글 정의
표는 논리적 영역으로 나눌 수 있습니다. 머리글 영역, 하나 이상의 데이터 영역, 바닥글 영역이 그것입니다. 다음 예는 이러한 영역이 어떻게 보이는지 보여줍니다:
<table border="1"> <thead> <tr> <th>출발</th> <th>도착</th> <th>플랫폼</th> </tr> </thead> <tfoot> <tr> <td>베를린</td> <td>슈트랄순트</td> <td>5</td> </tr> </tfoot> <tbody> <tr> <td>베를린</td> <td>함부르크</td> <td>1</td> </tr> <tr> <td>Munich</td> <td>Berlin</td> <td>3</td> </tr> </tbody> </table>
다음은 브라우저에서 결과를 살펴본 것입니다:
앞서 언급한 영역으로 나눈 것은 분명히 시각적 효과가 없습니다. 물론 이러한 영역을 정의하는 수고를 왜 해야 하는지에 대한 의문이 생깁니다. 여기에는 두 가지 좋은 이유가 있습니다:
- CSS를 사용하면 원하는 경우 영역의 서식을 다르게 지정할 수 있습니다.
- 긴 표를 인쇄할 때 브라우저는 각 페이지에서 표 머리글과 표 바닥글을 반복할 수 있습니다.
표 헤더는 머리글과 함께 도입됩니다. 그 다음에는 머리글 영역에 속하는 표의 행이 이어집니다. 머리글 영역인 '/thead '를 다시 닫는 것을 잊지 마세요.
표에 표 바닥글을 포함하려면 표 본문 앞에 바닥글을 정의해야 합니다. 바닥글은 <tfoot>를 통해 도입됩니다. 그 뒤에는 바닥글 영역에 속하는 하나 이상의 줄이 올 수 있습니다. 표 바닥글은 <tfoot>로 닫힙니다.
실제 표 본문은 tbody 요소 내에 정의됩니다. 이 tbody는 여러 번 발생할 수 있습니다. 표 본문은 &l;/tbody;를 통해 닫힙니다.
예를 들어 테이블에 여러 개의 tbody 요소를 사용해야 하는 이유는 무엇일까요? 이에 대한 좋은 예로 분데스리가 축구 표를 들 수 있습니다. 이러한 표에는 일반적으로 여러 영역이 있습니다.
- 챔피언
- 챔피언스 리그 참가팀
- 챔피언스 리그 예선
- 유로파 리그 참가자
- 회색 미드필더
- 강등 장소
- 강등된 팀
이러한 각 영역을 별도의 tbody 요소에 넣은 다음 CSS를 사용하여 스타일을 다르게 지정할 수 있습니다.
열 사전 정의
표가 브라우저에 표시되는 방식은 주로 사용 가능한 행과 열의 수에 따라 달라집니다. 그러나 브라우저에서 표를 표시하는 과정은 쉽지 않습니다. 실제로 브라우저는 표를 표시하기 전에 항상 전체 표를 읽어야 합니다. 특히 매우 큰 표의 경우 시간이 다소 걸릴 수 있습니다. 이 문제는 테이블이 실제로 몇 개의 열로 구성되어 있는지 브라우저에 직접 알려주면 피할 수 있습니다.
<table> <colgroup span="2"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>23223423434</td> <td> 거의 모든 것에 대한 간략한 역사</td> <td>29.95유로</td> </tr> </table>
열 세부 사항의 사전 정의는 colgroup을 통해 도입되었습니다. 이전 HTML 버전에서 colgroup에 사용할 수 있었던 대부분의 속성은 HTML5에서 더 이상 허용되지 않는다는 점에 유의하세요. 이제 span 속성만 허용됩니다. 이 스팬은 테이블에 포함된 열의 수를 값으로 기대합니다.colgroup 요소는 도입부인 <표> 바로 뒤에 배치됩니다. 그런 다음 열 자체는 개별 col 요소로 정의됩니다.colgroup을 사용할 때는 기본적으로 두 가지 옵션이 있습니다:
- 스팬 속성 사용
- 스팬 속성 없이스팬 속성을 사용하지 않는 경우 열 그룹이 확장될 각 열에 대해 colgroup 요소 내에 col 요소를 정의해야 합니다. col은 독립형 요소라는 점에 유의하세요.
<table> <colgroup> <col /> <col /> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>23223423434</td> <td> 거의 모든 것에 대한 간략한 역사</td> <td>29.95유로</td> </tr> </table>
하이브리드 형식도 있습니다.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> ...
한 열은 개별적으로 미리 정의하지만 다른 열은 그룹으로 요약하려는 경우 항상 실용적입니다.
