표

버스 시간표는 표입니다. 칸 하나하나는 그 줄의 제목, 그 열의 제목과 함께 봐야 뜻이 통합니다.

표는 데이터를 위한 것입니다

정보가 행과 열로 이루어져 있을 때 표를 씁니다. 시간표, 가격표, 설문 결과 같은 것입니다. 1990년대 말에는 많은 사이트가 한 칸에 메뉴, 다른 칸에 본문을 넣는 식으로 페이지 전체를 표로 배치했습니다. 이는 실제로 문제를 일으킵니다. 화면 낭독기는 칸마다 행과 열을 알려 주기 때문에 배치용 표는 들을 때 헷갈리는 스프레드시트처럼 들리고, 작은 화면에도 잘 맞춰지지 않습니다. 지금은 배치를 CSS로 하고, 표는 데이터에만 씁니다.

행, 칸, 제목 칸

표는 한 행씩 쌓아 만듭니다. <table>이 전체를 감싸고, <tr>(table row) 하나가 한 행이며, 행 안의 <td>(table data) 하나가 칸 하나입니다. 행이나 열의 이름을 담는 칸에는 <th>(table header)를 쓰고, 브라우저는 이를 기본으로 굵게, 가운데 정렬해 보여 줍니다. 열이 가지런히 맞도록 행마다 칸 수를 맞춥니다.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

표가 스스로 설명하게

세 가지를 더하면 칸을 늘어놓은 격자가 누구나 읽을 수 있는 표가 됩니다. 첫째, 여는 <table> 태그 바로 뒤에 두는 <caption>은 표의 제목입니다. 화면 낭독기가 내용보다 먼저 읽어 주므로 듣는 사람이 무슨 표인지 알 수 있습니다. 둘째, <th>의 scope 속성은 그 칸이 열의 제목인지(scope="col") 행의 제목인지(scope="row") 알려 줍니다. 이 속성이 있으면 화면 낭독기는 5.00만 읽지 않고 「Rye, Price, 5.00」처럼 읽어 줍니다. 셋째, <thead>, <tbody>, <tfoot>은 제목 행, 본문 행, 합계 행을 묶습니다. 구조가 분명해지고, CSS로 부분마다 모양을 주기 쉽고, 긴 표를 인쇄하면 브라우저가 쪽마다 제목 행을 다시 찍어 줄 수도 있습니다.

여러 칸을 차지하는 칸

칸 하나는 colspan으로 여러 열을, rowspan으로 여러 행을 차지할 수 있습니다. 주간 시간표에서 다섯 평일에 모두 걸친 점심시간은 colspan="5"인 칸 하나로 쓸 수 있습니다. 칸이 여러 열을 차지하면 그 행에 쓸 칸 수는 줄어듭니다. 평소 6칸인 행에서 한 칸이 colspan="5"라면 HTML에는 칸이 2개만 들어갑니다. 데이터가 실제로 그런 모양일 때만 칸을 합치세요. 너무 복잡한 표는 누구에게나 읽기 어렵기 때문에, 큰 표 하나를 간단한 표 두 개로 나누는 편이 나을 때가 많습니다.

폭이 넓은 표는 휴대전화에서 문제가 될 수 있습니다. 표는 글처럼 줄을 바꾸지 못하므로 열이 많으면 화면보다 넓어질 수 있습니다. 흔히 쓰는 방법은 CSS로 표를 감싼 요소만 옆으로 스크롤되게 해서, 페이지 나머지까지 넓어지지 않게 하는 것입니다.

칸마다 데이터는 되도록 단순하게 둡니다. 한 칸에 값 하나, 단위는 칸마다 반복하지 말고 제목 칸에 한 번(가격, 유로), 간격을 만드는 빈 칸은 쓰지 않습니다. 이렇게 만든 표는 소리 내어 읽기도, 정렬하기도 쉽고, 스프레드시트에 붙여 넣어도 깔끔하게 들어갑니다.