HTML 테이블 만들기 초보자용 익히기

HTML 테이블 만들기 – 기본 개념과 활용

웹 페이지에서 정보를 조직적으로 표현하기 위한 방법 중 하나는 HTML의 <table> 태그를 사용하는 것입니다. 이 태그를 통해 데이터를 행과 열의 형태로 배열하여 더욱 읽기 쉽게 만들 수 있습니다. 이번 포스팅에서는 초보자를 위한 HTML 테이블의 기반 지식과 활용법에 대해 알아보겠습니다.

테이블의 기본 구조

HTML 테이블은 몇 가지 핵심 요소로 구성됩니다. 이들은 각각 테이블의 기능을 담당하며, 사용자가 원하는 구조를 변경할 수 있습니다.

• <table>: 전체 테이블을 감싸는 태그로 테이블의 시작과 끝을 나타냅니다.
• <tr>: 테이블의 행을 정의하는 태그로, 각 가로줄을 나타냅니다.
• <th>: 테이블 헤더 셀을 정의하는 태그로, 열의 제목을 나타내며 기본적으로 굵은 글씨와 중앙 정렬 됩니다.
• <td>: 테이블 데이터 셀을 정의하는 태그로, 실제 데이터를 입력하는 영역입니다.

기본 테이블 예시

아래는 간단한 HTML 테이블의 예시입니다. 이 코드를 웹 브라우저에 입력하면 표 형태로 데이터를 볼 수 있습니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>30</td>
    <td>디자이너</td>
  </tr>
</table>

셀 병합과 정렬

테이블을 더욱 유용하게 활용하기 위해서는 셀 병합과 데이터 정렬의 개념을 이해해야 합니다. rowspan과 colspan 속성을 사용하여 셀을 병합할 수 있습니다.

셀 병합

셀 병합은 주로 두 가지 방향으로 이루어질 수 있습니다: 행 방향과 열 방향입니다. 다음은 각 병합 방식의 간단한 설명입니다.

• 행 병합(rowspan): 세로 방향으로 여러 행을 하나의 셀로 병합합니다. 예를 들어, 아래의 코드는 ‘1학년’이라는 값을 2개의 행에 걸쳐 병합합니다.
• 열 병합(colspan): 가로 방향으로 여러 열을 하나의 셀로 병합합니다. 이를 통해 보다 명확하게 제목 등을 나타낼 수 있습니다.

행 병합 예시

<table>
  <tr>
    <th rowspan="2">1</th>
    <td>1학년</td>
    <td>1반</td>
  </tr>
  <tr>
    <td>1학년</td>
    <td>2반</td>
  </tr>
</table>

열 병합 예시

<table>
  <tr>
    <th colspan="3">학생 정보</th>
  </tr>
  <tr>
    <td>이름</td>
    <td>나이</td>
    <td>학년</td>
  </tr>
</table>

스타일링을 통한 테이블 개선

기본 테이블은 기능적으로는 충분하지만, 시각적인 요소를 추가하여 사용자 경험을 향상시킬 수 있습니다. CSS를 이용해 테이블에 다양한 스타일을 적용해 보세요.

• 테두리 스타일: 경계선을 더 세련되게 만들 수 있습니다.
• 셀 간격: cellspacing 속성을 통해 셀 간의 여백을 조정합니다.
• 배경 색상: bgcolor 속성을 활용하여 셀 배경 색상을 바꿀 수 있습니다.

CSS로 테이블 스타일링

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

위와 같은 CSS 코드를 추가하면 테이블이 더욱 깔끔하게 표시될 것입니다. 사용자가 데이터에 쉽게 접근하고 이해할 수 있도록 도와줍니다.

결론

HTML 테이블 태그는 데이터와 정보를 구조적으로 표현하기 위한 강력한 도구입니다. 기본적인 구조와 다양한 속성을 이해하고, CSS를 통해 스타일링을 추가하면 이 도구의 활용도가 훨씬 높아집니다. 여러분의 웹 페이지에서 HTML 테이블을 적절히 활용하여 효과적인 정보 전달을 경험해 보시길 바랍니다.

자주 묻는 질문과 답변