HTML => 테이블

소개

HTML <table> 요소를 사용하면 웹 작성자는 셀의 행과 열이있는 2 차원 테이블에 표 형식의 데이터 (예 : 텍스트, 이미지, 링크, 다른 테이블 등)를 표시 할 수 있습니다.

통사론

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

비고

다양한 테이블 요소와 그 내용 속성이 함께 테이블 모델을 정의합니다. <table> 요소는 테이블 모델 / 테이블 형식 데이터의 컨테이너 요소입니다. 테이블에는 행, 열 및 셀이 있습니다. 행과 열은 그리드를 형성합니다. 표의 셀은 겹침없이 그 표를 완전히 덮어야합니다. 아래 목록은 테이블 모델의 다양한 요소를 설명합니다.

<table> - 테이블 모델 / 테이블 형식 데이터의 컨테이너 요소입니다. <table> 은 하나 이상의 차원이있는 데이터를 테이블 형식으로 나타냅니다.
<caption> - 표 자막 또는 제목 ( figure 과 figcaption )
<col> - 열 (내용 없음 요소)
<colgroup> - 열 그룹화
<thead> - 테이블 헤더 (단 하나)
<tbody> - 표 본문 / 내용 (여러 항목은 괜찮음)
<tfoot> - 테이블 바닥 글 (하나만)
<tr> - 표 행
<th> - 표 머리글 셀
<td> - 테이블 데이터 셀

의미 적으로 표는 표 형식의 데이터를 보유하기위한 것입니다. 스프레드 시트 (열과 행)에서 의미가있는 데이터를 표시하고 설명하는 방법이라고 생각할 수 있습니다.

레이아웃 용 테이블을 사용하는 것은 좋지 않습니다. 대신 display: table 포함하여 레이아웃 및 서식 지정에 CSS 규칙을 사용 display: table .

<table> 레이아웃 사용과 관련하여 업계에서 일반적으로 표시되는 주목할만한 예외 중 하나는 HTML 이메일과 관련이 있습니다. Outlook을 비롯한 일부 전자 메일 클라이언트는 Microsoft가 독점권을 상실한 후 이전 렌더링 엔진으로 롤백됩니다. 마이크로 소프트가 IE를 운영체제의 일부가 아닌 것으로 만들기 위해서, 그들은 아웃룩의 렌더링 엔진을 트라이던트의 초기 버전으로 단순히 되돌려 놓았습니다. 이 롤백은 단순히 최신 웹 기술을 지원하지 않으므로 HTML 전자 메일에 대한 <table> 기반 레이아웃을 사용하면 브라우저 간 / 플랫폼 / 클라이언트 호환성을 보장 할 수있는 유일한 방법입니다.

간단한 테이블

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

이것은 3 개의 총 행 ( <tr> )으로 구성된 <table> 을 렌더링합니다. 하나의 행 헤더 셀 ( <th> )과 두 행의 내용 셀 ( <td> )입니다. <th> 요소는 표 머리글 이며 <td> 요소는 표 형식 데이터 입니다. <td> 또는 <th> 안에 원하는 것을 넣을 수 있습니다.

제목 1 / 항목 1	제목 2 / 열 2
행 1 데이터 열 1	행 1 데이터 열 2
행 2 데이터 열 1	행 2 데이터 열 2

스패닝 열 또는 행

표 셀은 colspan 및 rowspan 속성을 사용하여 여러 열 또는 행으로 확장 될 수 있습니다. 이러한 속성은 <th> 및 <td> 요소에 적용 할 수 있습니다.

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

결과는

행과 열이 모두 중복되는 표를 디자인해서는 안되며 잘못된 HTML이기 때문에 다른 웹 브라우저에서 결과를 다르게 처리해야합니다.

rowspan = 셀에 걸치는 행 수를 지정하는 음이 아닌 정수입니다. 이 속성의 기본값은 1 입니다. 0의 값은 ( 0 ) 셀이 테이블의 마지막 행까지 현재 행으로부터 연장된다는 것을 의미 ( <thead> , <tbody> 또는 <tfoot> ).

colspan = 현재 셀에 걸친 열의 수를 지정하는 음이 아닌 정수입니다. 이 속성의 기본값은 1 입니다. 0의 값은 ( 0 ) 세포가 컬럼 그룹의 마지막 열은 현재로부터 연장된다는 것을 의미 <colgroup> 셀이 정의.

thead, tbody, tfoot 및 caption이있는 테이블

HTML은 또한 테이블에 <thead> , <tbody> , <tfoot> 및 <caption> 요소를 제공합니다. 이러한 추가 요소는 테이블에 의미 론적 가치를 추가하고 별도의 CSS 스타일을위한 장소를 제공하는 데 유용합니다.

한 (종이) 페이지에 맞지 않는 표를 인쇄 할 때 대부분의 브라우저는 모든 페이지에서 <thead> 의 내용을 반복합니다.

준수해야하는 특정 순서가 있습니다. 모든 요소가 예상대로 자리 잡을 수있는 것은 아닙니다. 다음 예제는 네 가지 요소를 배치하는 방법을 보여줍니다.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

다음 예제의 결과는 두 번 나타납니다. 첫 번째 표에는 스타일이없고 두 번째 표에는 background-color , color 및 border *와 같은 몇 가지 CSS 속성이 적용되어 border . 스타일은 시각적 가이드로 제공되며 현재 다루고있는 주제의 필수 요소는 아닙니다.

요소	스타일 적용
`<caption>`	검은 배경에 노란색 텍스트입니다.
`<thead>`	보라색 배경에 굵은 글자.
`<tbody>`	파란색 배경 텍스트입니다.
`<tfoot>`	녹색 배경에 텍스트입니다.
`<th>`	오렌지 테두리.
`<td>`	빨간색 테두리.

열 그룹

경우에 따라 열 또는 열 그룹에 스타일을 적용 할 수 있습니다. 또는 의미 론적 목적을 위해 열을 그룹화 할 수 있습니다. 이렇게하려면 <colgroup> 및 <col> 요소를 사용하십시오.

선택적 <colgroup> 태그를 사용하면 열을 그룹화 할 수 있습니다. <colgroup> 요소는 <table> 의 하위 요소 여야하며 <caption> 요소 다음에 테이블 내용 (예 : <tr> , <thead> , <tbody> 등) 앞에 와야합니다.

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

선택적 <col> 태그를 사용하면 논리적 그룹을 적용하지 않고 개별 열이나 열 범위를 참조 할 수 있습니다. <col> 요소는 선택 사항이지만 존재하는 경우 <colgroup> 요소 내에 있어야합니다.

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

다음 CSS 스타일은 <colgroup> 및 <col> 요소에 적용 할 수 있습니다.

border
background
width
visibility
display ( display: none )
- display: none; 실제로 디스플레이에서 열을 제거하여 해당 셀이 존재하지 않는 것처럼 표를 렌더링합니다.

자세한 내용은 HTML5 테이블 형식 데이터를 참조하십시오.

제목 범위

th 요소는 테이블 행과 열의 표제를 표시하는 데 매우 일반적으로 사용됩니다.

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

이는 scope 속성을 사용하여 접근성을 향상시킬 수 있습니다. 위의 예는 다음과 같이 수정 될 것입니다 :

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope 는 열거 형 속성 으로 알려져 있습니다. 즉, 특정 값 집합의 값을 가질 수 있습니다. 이 세트에는 다음이 포함됩니다.

col
row
colgroup
rowgroup

참고 문헌 :

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

HTML
테이블

수색…

소개

통사론

비고

간단한 테이블

스패닝 열 또는 행

thead, tbody, tfoot 및 caption이있는 테이블

열 그룹

제목 범위