HTML 테이블 생성과 스타일링 방법

HTML 테이블 기본 이해하기

웹 페이지에서 데이터를 조직하여 전달하는 방법 중 하나로, HTML 테이블은 매우 유용한 도구입니다. 기본적으로 테이블은 <table> 태그를 사용하여 만들어지며, 그 안에는 <tr> 태그로 정의된 행과, <td> 태그로 구성된 데이터 셀들이 포함됩니다.

테이블 구성 요소

테이블은 여러 가지 구성 요소로 이루어져 있습니다. 각 구성 요소는 다음과 같은 역할을 합니다:

• <table>: 테이블의 시작과 끝을 정의하는 태그입니다.
• <tr>: 테이블의 행을 정의합니다.
• <td>: 테이블의 데이터 셀을 정의합니다.
• <th>: 테이블의 머리글을 정의하며, 일반적으로 굵은 글씨로 표시됩니다.

기본적인 HTML 테이블 생성하기

아래는 간단한 HTML 테이블을 생성하는 예제입니다.


<table border="1">
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
<tr>
<td>데이터 3</td>
<td>데이터 4</td>
</tr>
</table>


위의 코드를 사용하면 간단한 2×2 형태의 테이블이 생성됩니다.

테이블 스타일링

HTML 테이블의 스타일을 조정하기 위해 CSS를 사용하면 보다 보기 좋고 깔끔한 테이블을 만들 수 있습니다. 여기에는 테두리 설정, 배경색, 정렬 등이 포함됩니다.

CSS를 활용한 테이블 디자인

아래는 CSS를 사용하여 테이블을 스타일링하는 예제입니다:

이 CSS는 테이블이 전체를 차지하도록 설정하고, 각 셀에는 경계선과 패딩을 추가하였습니다. 짝수 행에는 배경색을 다르게 설정하여 가독성을 높였습니다.

셀 병합하기: colspan과 rowspan

HTML 테이블에서는 셀의 병합이 가능합니다. colspan 속성을 사용하면 열을 합칠 수 있고, rowspan 속성을 통해 행을 합칠 수 있습니다. 이를 통해 보다 복잡한 데이터를 표현할 수 있습니다.

셀 병합 예제

다음 코드는 두 개의 셀을 가로로 병합하고, 세로로도 병합하는 것을 보여줍니다:


<table border="1">
<tr>
<td colspan="2">가로 병합</td>
<td>셀 3</td>
</tr>
<tr>
<td rowspan="2">세로 병합</td>
<td>셀 2</td>
<td>셀 3</td>
</tr>
<tr>
<td>셀 5</td>
<td>셀 6</td>
</tr>
</table>


웹 접근성 고려하기

웹 접근성을 고려하여 테이블을 작성하는 것은 매우 중요합니다. 적절한 <th> 태그의 사용과 함께, 데이터가 어떤 내용을 담고 있는지를 명확히 전달할 수 있어야 합니다.

특히 시각적으로 장애가 있는 사용자에게 정보를 제공하는 데 있어 대체 텍스트와 같은 요소들을 활용하는 것이 필요합니다. 이렇게 함으로써 모든 사용자가 손쉽게 정보를 이해하고 활용할 수 있도록 도와줄 수 있습니다.

결론

HTML 테이블은 웹사이트에서 데이터를 매력적으로 정리하고 표시하는 데 중추적인 역할을 합니다. 기본적인 테이블 구조와 스타일링, 셀 병합 기술에 대한 이해는 웹 개발시 큰 도움이 됩니다. 이 글에서 소개한 내용을 바탕으로 여러분의 웹 페이지에 유용한 테이블을 적용해 보시길 바랍니다.

자주 묻는 질문과 답변