🧾 <Table> 태그 개념과 스타일링 방법

 

웹에서 데이터를 표 형태로 깔끔하게 보여주고 싶을 때 사용하는 것이 바로 <table> 태그입니다.
테이블 태그를 잘 활용하면 정보 전달력이 높아지고, 레이아웃 구성에도 많은 도움이 됩니다.
이번 글에서는 테이블 구조와 관련 태그, 그리고 기본적인 스타일링까지 정리해볼게요!

---

 

📌 테이블 구조 태그 정리

태그	의미	설명
<table>	표 전체	표의 시작과 끝을 감쌉니다.
<thead>	table head	테이블의 제목 혹은 열 영역을 정의합니다. <tr>안에 <th>를 넣어 구성.
<tbody>	table body	실제 데이터가 들어가는 영역입니다. <tr>로 구성.
<tfoot>	table footer	테이블의 맨 아래 요약 또는 합계 영역에 사용됩니다. <th>나 <td> 사용.
<th>	table header	테이블 헤더 셀, 기본적으로 굵은 글씨와 가운데 정렬이 적용됩니다.
<tr>	table row	테이블의 한 행(row) 을 나타냅니다. 안에 <th>나 <td>가 들어갑니다.
<td>	table data	테이블의 한 셀(cell), 즉 열(column) 을 나타냅니다.

 

---

 

🎨 Table Styling - CSS로 테이블 꾸미기

CSS를 활용하면 테이블의 테두리, 간격, 정렬 등 다양한 부분을 꾸밀 수 있어요.

🔹 테두리 관련 속성

속성	설명	예시
border	셀에 테두리 추가	table, th, td { border: 1px solid black; }
border-collapse	테두리 간격 제거	table { border-collapse: collapse; }
border-spacing	셀 간격 설정	table { border-spacing: 10px; }

• border-collapse: collapse: 셀 간의 경계를 겹치게 하여 깔끔하게 만듭니다.

 

🔹 셀 정렬 및 간격 조정

속성	설명	예시
text-align	텍스트 정렬	th, td { text-align: center; }
padding	셀 내부 여백	th, td { padding: 8px; }

• padding과 text-align으로 셀 내부 정렬 및 여백 조절도 가능해요.

 

🔹 배경 및 글자 색상

속성	설명	예시
background-color	배경색 설정	th { background-color: #f2f2f2; }
color	글자 색상 설정	td { color: #333; }

• border-spacing: 셀 사이의 간격을 직접 설정할 수 있습니다 (collapse와 함께 사용할 수 없습니다).

 

---

 

✅ 예시 코드

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>28</td>
      <td>프론트엔드 개발자</td>
    </tr>
    <tr>
      <td>김영희</td>
      <td>25</td>
      <td>디자이너</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">총 2명</td>
    </tr>
  </tfoot>
</table>

 

스타일 추가 예시 (CSS)

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 8px;
}
th {
  background-color: #f4f4f4;
}

---

 

📝 마무리하며

테이블은 정보 전달에 매우 강력한 도구입니다.
구조와 스타일을 이해하고 나면 다양한 데이터를 사용자에게 더 보기 좋게 전달할 수 있어요.
프론트엔드 개발을 준비하면서 반드시 알아야 할 중요한 개념 중 하나입니다 😊