table element - by. UXKM

  • Publishing
  • HTML
  • 표 데이터(Tabular data)
  • table element
요약 설명

<table> 요소는 행(row)과 열(column)로 구성된 표 형식의 데이터를 구조화하여 표시할 때 사용하는 시맨틱 태그입니다.
내부에 <tr>(행), <th>(표 제목 셀), <td>(일반 데이터 셀) 등의 요소를 포함하며, 정보를 논리적이고 시각적으로 명확하게 정렬할 수 있습니다. caption, thead, tbody, tfoot 등과 함께 사용하면 표의 의미와 구조를 더 명확히 전달할 수 있습니다. 이러한 마크업 구성은 접근성과 가독성 향상에도 중요한 역할을 합니다.

주요 역할 및 특징

  1. 데이터를 체계적으로 관리 및 표시
    • 행(row)과 열(column)로 구성된 표를 만들어 데이터를 깔끔하고 체계적으로 표현할 수 있습니다.
    • <tr>(행), <th>(제목 셀), <td>(데이터 셀)과 함께 사용하여 구조적인 표를 생성할 수 있습니다.
  2. <caption>, <thead>, <tbody>, <tfoot> 요소를 활용한 구분
    • <caption> : 표의 제목을 지정하거나, 표의 내용의 요약합니다.
    • <thead> : 표의 머리글(컬럼명)을 정의합니다.
    • <tbody> : 표의 본문을 정의합니다.
    • <tfoot> : 표의 바닥글을 정의합니다.
    • <thead>, <tbody>, <tfoot> 요소를 사용하여 논리적인 그룹화가 가능합니다.
  3. 웹페이지에서 정보의 가독성을 높임

    숫자, 통계, 일정, 가격 비교표 등 구조화된 데이터를 효과적으로 표현할 때 적합합니다.

  4. 다양한 스타일과 기능 적용 가능
    • CSS를 활용하여 테이블의 스타일을 조정할 수 있습니다.
    • border, cellspacing, cellpadding, width 등으로 디자인을 커스터마이징할 수 있습니다.
  5. 복합적인 셀 병합 가능 (colspan, rowspan)
    • colspan : 셀을 가로로 병합
    • rowspan : 셀을 세로로 병합

CSS 기본 값

<table> 요소의 기본 CSS 값은 브라우저에 따라 다소 차이가 있을 수 있지만, 일반적으로 다음과 같은 기본 스타일이 적용됩니다.

기본 문법

속성

요약 설명

<table> 요소에는 다양한 속성이 존재하지만, HTML5에서는 스타일 관련 속성(width/height, border, cellspacing, cellpadding 등)은 CSS로 적용하는 것이 권장됩니다.
디자인과 구조를 분리하여 유지보수를 쉽게 하고, 접근성을 높이기 위함입니다.

<table> 속성 요약

  • 속성명
  • 설명

  • border

    테두리의 두께를 지정

  • cellpadding

    셀 안쪽 여백을 지정

  • cellspacing

    셀 사이 여백을 지정

  • summary

    표의 요약 설명 (접근성)

  • width / height

    테이블의 너비 / 높이를 지정

  • align

    테이블의 정렬 방식 지정

  • bgcolor

    테이블 배경색 지정

[border] 선택 사항 <table border="값">

테두리의 두께를 지정합니다. 숫자로 지정하면 px 단위로 해석됩니다.
HTML5에서는 비추천하며, CSS의 border 사용을 권장합니다.

기존 방식(비 권장) :
CSS로 대체(권장) :

[cellpadding] 선택 사항 <table cellpadding="값">

안쪽의 여백을 지정합니다. 숫자로 지정하면 px 단위로 해석됩니다.
HTML5에서는 비추천하며, CSS의 padding 사용을 권장합니다.

기존 방식(비 권장) :
CSS로 대체(권장) :

[cellspacing] 선택 사항 <table cellspacing="값">

셀 사이의 여백을 지정합니다. 숫자로 지정하면 px 단위로 해석됩니다.
HTML5에서는 비추천하며, CSS의 border-spacing 사용을 권장합니다.

기존 방식(비 권장) :
CSS로 대체(권장) :

[summary] 선택 사항 - 비추천 <table summary="값">

테이블의 요약 설명을 제공하여 접근성을 높입니다.
HTML5에서는 summary 속성이 제거되었으며, <caption> 또는 ARIA 속성을(aria-label, aria-describedby) 권장합니다.

기존 방식(비 권장) :
<caption>으로 대체(권장) :
ARIA 속성 사용(권장) :

[width / height] 선택 사항 <table width="값" height="값">

테이블의 너비와 높이를 지정합니다. 픽셀(px) 또는 백분율(%)로 사이즈를 지정합니다.
HTML5에서는 비추천하며, CSS의 width / height 사용을 권장합니다.

기존 방식(비 권장) :
CSS로 대체(권장) :

[align] 선택 사항 <table align="값">

테이블의 정렬 방식을 지정합니다. (<left>, <center>, <right>)
HTML5에서는 비추천하며, CSS의 text-align 또는 margin 사용을 권장합니다.

기존 방식(비 권장) :
CSS로 대체(권장) :

[bgcolor] 선택 사항 <table bgcolor="값">

테이블의 배경색을 지정합니다. 색상 이름 또는 hex 코드(#FF0000)로 값을 지정합니다.
HTML5에서는 비추천하며, CSS의 background-color 사용을 권장합니다.

기존 방식(비 권장) :
CSS로 대체(권장) :

예제

기본 테이블 예제

셀 병합 예제 (colspan, rowspan)

<thead>, <tbody>, <tfoot>을 활용한 테이블 그룹화

접근성을 고려한 테이블(id, headers, scope, aria-label 사용)

주의사항

  • HTML 속성(border, cellpadding, cellspacing) 대신 CSS를 활용하여 디자인을 조정하는 것이 더 적절합니다.
  • 테이블은 데이터를 구조적으로 정리하는 용도로만 사용해야 합니다. 웹사이트 레이아웃을 만들 때 <table> 요소를 사용하는 것은 비효율적이며, CSS를 활용한 레이아웃이 더 적절합니다.
  • 표의 크기가 커질 경우 모바일 화면에서 스크롤이 가능하도록 CSS로 overflow-x: auto;를 설정해야 합니다.