HTML테이블


소개

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

통사론

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

비고

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

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

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

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

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

테이블 관련 예