HTML 테이블(표) 태그 – table, tr, th, td

과거에는 페이지 레이아웃까지 <table>로 만들었지만, 지금은 레이아웃은 <div>+CSS로, 데이터가 표 형태일 때만 테이블을 사용합니다. 이 글은 <table>의 필수 태그와 속성, 접근성까지 고려한 올바른 마크업 예제를 정리했습니다.

1) 테이블(표) 관련 태그

태그	설명
`<table>`	행과 열로 구성된 표 컨테이너
`<tr>`	표의 행(row)
`<th>`	열/행의 헤더 셀(기본 굵게·가운데 정렬, `scope`로 범위 명시)
`<td>`	일반 데이터 셀
`<caption>`	표의 제목(시각·스크린리더 모두에 유용)
`<thead>`, `<tbody>`, `<tfoot>`	머리·본문·요약 영역을 구분해 의미와 접근성을 높임

2) 자주 쓰는 속성

속성	설명
`rowspan`	해당 셀을 여러 행에 걸쳐 병합
`colspan`	해당 셀을 여러 열에 걸쳐 병합
`scope`	`th`가 가리키는 범위(`col`, `row`, `colgroup`, `rowgroup`)

예제 1) 기본 표 마크업(헤더 생략 가능)

가장 단순한 표입니다. 레이아웃(두께·색상)은 CSS로 지정하는 것을 권장합니다.

<table>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>

예제 2) thead/th로 헤더 지정

thead와 th를 사용하면 의미가 명확해지고, 스크린리더/모바일 고정 헤더에도 유리합니다.

<table>
  <caption>성적표</caption>
  <thead>
    <tr>
      <th scope="col" style="width:150px">성명</th>
      <th scope="col" style="width:150px">성별</th>
      <th scope="col" style="width:150px">점수</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>홍길동1</td><td>남</td><td>100</td></tr>
    <tr><td>홍길동2</td><td>남</td><td>90</td></tr>
    <tr><td>홍길동3</td><td>여</td><td>80</td></tr>
    <tr><td>홍길동4</td><td>여</td><td>85</td></tr>
  </tbody>
</table>

예제 3) rowspan/colspan으로 셀 병합

행/열 병합은 데이터 의미가 더 분명해질 때만 사용하세요. 과도한 병합은 가독성을 해칠 수 있습니다.

<table>
  <thead>
    <tr>
      <th scope="col" style="width:150px">성명</th>
      <th scope="col" style="width:150px">성별</th>
      <th scope="col" style="width:150px">점수</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동1</td>
      <td rowspan="2">남</td>
      <td>100</td>
    </tr>
    <tr>
      <td>홍길동2</td>
      <td>90</td>
    </tr>
    <tr>
      <td>홍길동3</td>
      <td rowspan="2">여</td>
      <td>80</td>
    </tr>
    <tr>
      <td>홍길동4</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">평균</th>
      <td>95</td>
    </tr>
  </tfoot>
</table>

참고: 티스토리/에디터로 표 넣기

블록 에디터를 사용하면 코드 없이도 손쉽게 표를 삽입할 수 있습니다.

접근성과 SEO를 높이는 팁

표 제목은 <caption>으로, 화면 밖으로 숨기더라도 스크린리더가 읽을 수 있게 유지.
머리글에는 <th> + scope를 사용해 데이터 관계를 명확히.
디자인은 CSS로 제어(border, zebra-striping 등). 인라인 border 대신 클래스를 권장.
모바일에서 가로 스크롤이 필요하면 table 래퍼에 overflow-x:auto 적용.

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.