HTML <table> 태그, 표 만들기와 스타일

HTML <table> 태그, 표 만들기와 스타일링

HTML에서 <table> 태그는 데이터를 표 형식으로 표시할 수 있는 매우 유용한 태그입니다. 이 가이드에서는 <table> 태그를 사용하여 표를 만드는 기본 방법부터, CSS를 활용한 스타일링 기법까지 자세히 다룰 것입니다. HTML로 데이터를 시각적으로 표현하는 방법을 배워보세요.

 

 

목차

1. <table> 태그란?
2. 기본 표 구조
3. 표의 머리글과 본문
4. 표에 스타일 적용하기
5. 표 크기와 너비 조정
6. 반응형 표 만들기

 

<table> 태그란?

HTML의 <table> 태그는 데이터를 행(row)과 열(column)로 정리하여 표시하는 데 사용됩니다. 웹 페이지에서 복잡한 데이터를 구조화하여 보여줄 수 있으며, 일반적으로 텍스트, 숫자, 이미지 등을 셀(cell) 안에 배치합니다. 표는 데이터가 명확하고 논리적인 순서로 표시되므로, 정보를 쉽게 비교할 수 있습니다.

 

 

 

기본 표 구조

<table> 태그는 여러 하위 태그들과 함께 사용됩니다. 표는 기본적으로 <tr> 태그로 행을 정의하고, 그 안에 <td> 태그로 각 셀을 정의합니다. 표의 머리글은 <th> 태그로 정의하며, 이는 각 열의 제목을 나타냅니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이순신</td>
    <td>45</td>
    <td>군인</td>
  </tr>
</table>
    

위 예시에서는 3개의 열과 2개의 데이터 행을 가진 간단한 표를 만들었습니다. <th> 태그는 열 제목을 나타내며, <td>는 데이터를 표시합니다.

 

 

 

표의 머리글과 본문

표의 구조를 더 명확하게 만들기 위해, <thead>와 <tbody> 태그를 사용할 수 있습니다. <thead>는 표의 머리글을 정의하고, <tbody>는 실제 데이터가 들어가는 본문을 정의합니다. 이 방식은 특히 스타일링과 접근성을 향상시키는 데 유리합니다.

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>30</td>
      <td>개발자</td>
    </tr>
    <tr>
      <td>이순신</td>
      <td>45</td>
      <td>군인</td>
    </tr>
  </tbody>
</table>
    

<thead>와 <tbody>로 구분하여 표의 구조를 명확히 정의할 수 있으며, 브라우저는 이를 기반으로 표의 머리글과 데이터를 분리하여 렌더링합니다.

 

 

 

표에 스타일 적용하기

기본적인 HTML 표는 단순한 흑백 텍스트로만 표시됩니다. CSS를 사용하면 표의 스타일을 개선할 수 있으며, 가독성과 시각적인 효과를 높일 수 있습니다. 예를 들어, 테두리를 추가하거나 셀에 배경색을 입히는 등의 작업을 할 수 있습니다.

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>
    

위의 CSS 예제에서는 표 전체의 너비를 100%로 설정하고, 셀 간의 테두리를 추가했습니다. nth-child()를 사용하여 짝수 행에만 배경색을 적용하면, 데이터를 쉽게 구분할 수 있습니다.

 

 

 

 

표 크기와 너비 조정

표의 크기와 셀의 너비를 조정하여 데이터를 더 보기 쉽게 정리할 수 있습니다. 기본적으로 표는 콘텐츠에 맞게 자동으로 크기가 조정되지만, CSS로 명시적으로 크기를 설정할 수도 있습니다.

<style>
table {
  width: 80%;
  margin: auto;
}
th, td {
  width: 30%;
}
</style>
    

위 예시에서는 표의 너비를 80%로 설정하고, 각 열의 셀 너비를 30%로 고정하여 일정한 크기로 나타냈습니다. margin: auto;는 표를 화면 중앙에 배치합니다.

 

 

 

반응형 표 만들기

모바일 기기에서도 표가 적절하게 표시되도록 반응형 디자인을 적용할 수 있습니다. overflow 속성을 사용하여 작은 화면에서 표가 넘치지 않도록 스크롤 기능을 추가하거나, 미디어 쿼리를 사용하여 특정 화면 크기에 맞춘 스타일을 적용할 수 있습니다.

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
</style>
    

위 코드는 화면 너비가 600px 이하일 때 표가 화면에 맞지 않으면, 자동으로 가로 스크롤이 생성되도록 설정한 예시입니다. 이렇게 하면 작은 화면에서도 표를 쉽게 확인할 수 있습니다.