HTML+CSS(Table) 정리

📌 <table> 정리

🔹 1. HTML <table> 기본 구조

HTML에서 <table> 태그는 표를 만들 때 사용됩니다.

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

🔹 2. 주요 HTML 태그

태그	설명
<table>	표(Table) 생성
<tr>	행(Row) 생성
<th>	제목 셀 (굵고 중앙 정렬)
<td>	데이터 셀
<thead>	표의 머리글 (제목 행)
<tbody>	표의 본문
<tfoot>	표의 바닥글

---

🔹 3. CSS로 표 스타일링

CSS를 사용해 표의 스타일을 개선할 수 있습니다.

table {
  width: 100%;
  border-collapse: collapse; /* 테두리 겹침 방지 */
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 짝수 행 배경색 */
}

tr:hover {
  background-color: #f1f1f1; /* 마우스 오버 시 강조 */
}

🔹 4. CSS를 활용한 응용

✅ 반응형 테이블 (스크롤 가능)

.table-container {
  overflow-x: auto;
}

<div class="table-container">
  <table>
    <!-- 표 내용 -->
  </table>
</div>

✅ 고정된 헤더 테이블

thead {
  position: sticky;
  top: 0;
  background: white;
}

✅ 테이블 크기 자동 조정

table {
  table-layout: auto; /* 기본값 */
}

table.fixed {
  table-layout: fixed; /* 고정 크기 */
}

---

🔹 5. <table> 사용 시 주의할 점

• 너무 많은 행이 있으면 성능에 영향을 줄 수 있음
• 반응형 웹에서는 작은 화면에서 가로 스크롤 필요
• 복잡한 테이블은 <div> + CSS Grid 또는 Flexbox 활용 가능