테이블 만들기

1. 테이블

HTML 테이블은 웹 페이지에서 행(row)과 열(column)을 사용해 데이터를 표 형태로 정리해서 보여주는 구조이다.
기본적으로 <table> 태그로 테이블을 만들고, 그 안에 <tr>(table row)로 행을 정의하며, 각 행 안에는 <td>(table data) 태그를 사용해 셀 데이터를 입력한다.
또한 제목 셀에는 <th>(table header)를 사용하여 굵고 가운데 정렬된 머리글을 만들 수 있다.

---

2. <thead>, <tbody>

<thead>와 <tbody>는 HTML 테이블에서 표의 구조를 논리적으로 구분하기 위해 사용하는 태그이다. <thead>는 테이블의 헤더 영역, 즉 제목 행들을 감싸는 용도로 사용되며, 일반적으로 <th> 태그들과 함께 사용된다. 반면 <tbody>는 실제 데이터가 들어가는 본문 영역을 감싸며, <td>들이 포함된 여러 개의 <tr>(행)을 포함한다. 이렇게 구분함으로써 테이블이 더 의미 있고 정돈된 구조를 가지게 되고, CSS나 JavaScript에서 각 영역에 스타일이나 기능을 따로 적용하기도 쉬워진다. 또한, 리더기나 접근성 도구에서도 테이블 내용을 더 잘 이해하고 전달할 수 있도록 도와준다.

 

---

 

3. colspan, rowspan 속성

colspan과 rowspan 은 HTML 테이블에서 셀을 가로 또는 세로 방향으로 병합할 때 사용하는 속성이다. colspan은 가로 방향으로 여러 칸을 합칠 때 사용하며, 예를 들어 colspan="2"는 현재 셀이 두 개의 열을 합친 것처럼 보이게 만든다. 반대로 rowspan은 세로 방향으로 셀을 병합할 때 사용하며, rowspan="3"이면 해당 셀이 세 개의 행에 걸쳐 합쳐진 형태가 된다. 이 속성들을 사용하면 복잡한 구조의 표나 제목 셀을 깔끔하게 만들 수 있고, 정보를 더 직관적으로 정리된 형식으로 표현할 수 있다.