HTML 테이블 생성기

좋은 HTML 테이블을 만드는 것

HTML 테이블은 값의 위치가 의미를 지니는 행과 열, 즉 진짜 표 형식 데이터를 보여 주기 위해 존재합니다. 가격 행렬, 일정표, 비교표 같은 것들이죠. 올바른 테이블은 단순한 셀 격자 이상입니다. 역할을 설명하는 작은 요소 묶음으로 이루어집니다. table이 전체를 감싸고, thead와 tbody가 헤더와 본문을 나누며, th는 제목 셀을, td는 데이터 셀을 표시합니다. 이 생성기는 그 전체 구조를 대신 내놓아 출력이 깔끔하고 표준을 준수하도록 합니다.

구조를 제대로 잡는 것이 중요한 이유는 브라우저, 검색 엔진, 보조 기술이 모두 그것에 의존하기 때문입니다. div로 흉내 낸 격자는 테이블처럼 보일 수 있어도 어떤 관계도 전달하지 못하는 반면, 제대로 된 테이블 마크업은 페이지를 읽는 모든 대상에게 데이터가 어떻게 구성되어 있는지 정확히 알려 줍니다.

데이터를 넣는 두 가지 방법

Grid Editor에서 행과 열을 추가하고 삭제하며 각 셀에 직접 입력해 대화식으로 테이블을 만들 수 있는데, 작은 테이블이나 빠른 편집에 이상적입니다. 이미 스프레드시트에 들어 있는 데이터라면 CSV Import 탭이 더 빠릅니다. 데이터를 붙여넣으면 한 단계로 격자에 파싱됩니다.

가져오기 도구는 구분자에 유연합니다. 쉼표, 탭, 세미콜론, 파이프로 구분된 텍스트를 받으므로, Excel이나 Google Sheets(탭을 사용)에서 곧장 복사한 것과 내려받은 CSV(쉼표를 사용)가 모두 동작합니다. 맨 윗줄에 열 제목이 들어 있을 때 First row is header를 표시하면 그 값들이 일반 데이터가 아니라 thead 안의 th 셀이 됩니다.

실제 예제

CSV Import에 첫 줄을 헤더로 표시한 채 세 줄을 붙여넣어 봅시다. 첫 줄에 Name, Email, Phone, 그다음 연락처 두 행입니다. 도구는 thead에 세 개의 th 셀로 된 한 행을 담고 tbody에 td 셀로 된 두 개의 tr 행을 담은 테이블을 만들어 냅니다. Bordered와 Striped Rows를 켜면 마크업이 셀 테두리를 그리고 행 음영을 번갈아 입히는 클래스와 스타일을 얻어, 코드를 복사하기도 전에 미리보기가 페이지에 나타날 모습과 정확히 일치합니다.

시각적 스타일 옵션

Basic Options는 가장 자주 손이 가는 스타일을 다룹니다. Bordered는 셀 둘레에 선을 그리고, Striped Rows는 행을 번갈아 음영 처리해 긴 테이블을 훑어보기 쉽게 하며, Hover Effect는 커서 아래의 행을 강조해 독자가 넓은 행을 가로질러 따라가도록 돕습니다. 각 옵션은 미리보기에 실시간으로 반영됩니다.

더 세밀한 제어를 위해 Advanced Options는 셀 패딩과 간격, 테두리 너비와 색상, 그리고 인접한 셀 테두리가 하나의 선으로 합쳐질지(병합) 별개의 이중선으로 남을지(분리)를 정하는 테두리 병합 모드를 드러냅니다. 또한 사용자 정의 ID와 클래스를 붙여 테이블이 인라인 스타일에만 의존하지 않고 기존 스타일시트에 연결되게 할 수 있습니다.

접근성을 위한 캡션과 헤더 범위

캡션은 테이블에 눈에 보이면서 프로그램적으로 연결된 제목을 부여하며, 상단이나 하단에 둘 수 있습니다. 이는 테이블에 이름을 붙이는 접근성 있는 방법으로, 가까운 문단보다 훨씬 낫습니다. 스크린 리더가 이를 테이블의 라벨로 알려 주기 때문이죠.

Header Scope 옵션은 여기서 가장 중요한 접근성 설정입니다. 헤더 셀의 scope를 col로 설정하면 각 th가 그 아래 열을 라벨한다고 보조 기술에 알려 주고, row로 설정하면 옆의 행을 라벨하며, 결합 옵션은 헤더 행과 헤더 열을 모두 가진 테이블을 처리합니다. scope가 올바르게 설정되면 스크린 리더는 사용자가 셀에서 셀로 이동할 때 관련 헤더를 알려 줄 수 있어, 값이 맥락 없는 맨숫자가 아니라 Phone: 555-1234 처럼 읽힙니다.

반응형에 관한 주의점

테이블은 본래 넓어서, 열이 많은 테이블은 휴대폰 화면을 넘칩니다. Responsive Table 옵션은 페이지 레이아웃을 깨뜨리는 대신 테이블을 감싸 컨테이너 안에서 가로로 스크롤되게 함으로써 이 문제를 해결하며, 모든 열을 온전히 닿을 수 있게 유지합니다. 작은 화면의 데이터 테이블에는 이것이 안전한 기본값입니다.

절충을 이해해 둘 가치가 있습니다. 가로 스크롤은 데이터를 충실히 보존하지만 독자에게 스크롤을 요구합니다. 진짜 데이터 테이블을 행과 열의 관계를 잃지 않고 하나의 좁은 열로 재배치할 방법은 없으므로, 진정한 표 형식 콘텐츠에는 스크롤이 임시방편이 아니라 정직한 해법입니다.

피해야 할 흔한 실수

가장 잦은 오용은 데이터를 보여 주려는 것이 아니라 페이지 레이아웃을 제어하려고 테이블에 손을 뻗는 것입니다. flexbox와 grid 같은 현대 CSS가 레이아웃에 알맞은 도구이며, 테이블은 표 형식 콘텐츠에 한정해 두어야 합니다. 또 흔한 실수는 헤더 셀을 아예 빼먹는 것인데, 이러면 스크린 리더 사용자가 열 맥락을 알 수 없으니, 첫 행에 제목이 들어 있다면 항상 그것을 헤더로 승격하세요. 끝으로, 클래스가 더 깔끔하고 유지하기 쉬울 때 긴 인라인 style 속성에 스타일을 파묻지 마세요. ID와 클래스 입력란을 써서 테이블을 스타일시트에 연결하세요.