[HTML] Table 아직 살아있다..

 

[HTML] Table 아직 살아있다..

"테이블은 옛날 기술이라며?"

그렇게 생각하는 순간, 데이터가 흐트러지고, 정렬이 엉망이 됩니다.

HTML 테이블, 단순해 보여도 표현 하나 잘못하면 사용자 눈에 ‘엉망진창’으로 보여요.

중급자도 종종 헷갈리는 부분이니까, 이번 기회에 정리 제대로 해보는 거 어때요?

오늘은 기초부터 실전까지, HTML Table을 다룹니다.

오늘 배울 태그는
<table>입니다.

 

<table border="1">
  <tr>
    <th>이름</th>
    <th>직업</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>개발자</td>
    <td>29</td>
  </tr>
</table>

 

HTML 테이블의 기본 구조는 <table>로 시작해서 행(<tr>), 열(<td>/<th>)로 구성됩니다.

<th>는 헤더 셀, <td>는 일반 셀입니다.
border="1"은 테두리를 추가하기 위한 HTML 속성인데, 실제로는 CSS로 스타일링하는 게 더 일반적이에요.

시멘틱 구조를 유지하면서도 시각적으로 정돈된 표를 만드는 게 핵심입니다.

 

 

728x90

 

<table style="width: 100%; border-collapse: collapse;" border="1">
  <thead>
    <tr style="background-color: #f0f4f8;">
      <th>상품명</th>
      <th>가격</th>
      <th>재고</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>무선 이어폰</td>
      <td>99,000원</td>
      <td>12개</td>
    </tr>
    <tr>
      <td>블루투스 스피커</td>
      <td>79,000원</td>
      <td>7개</td>
    </tr>
  </tbody>
</table>

이건 실전에서 자주 쓰이는 테이블 구조예요.

<thead>, <tbody>로 구분하면 HTML과 CSS, JavaScript에서 제어하기가 더 명확해집니다.

특히 정렬이나 검색 기능을 추가할 땐 이 구조가 큰 힘을 발휘하죠.
그리고 border-collapse: collapse는 테이블 테두리를 붙여주는 CSS 속성입니다.

 

<table border="1" style="text-align: center;">
  <tr>
    <th rowspan="2">이름</th>
    <th colspan="2">점수</th>
  </tr>
  <tr>
    <th>수학</th>
    <th>영어</th>
  </tr>
  <tr>
    <td>김하늘</td>
    <td>95</td>
    <td>88</td>
  </tr>
</table>

rowspan과 colspan은 테이블 레이아웃에서 행과 열을 병합할 때 사용됩니다.

rowspan="2"는 세로로 두 칸을 차지하고, colspan="2"는 가로로 두 칸을 합쳐주는 구조예요.

복잡한 데이터 구조일수록 이 기능을 제대로 써야 사용자 눈에 한눈에 들어오는 테이블이 됩니다.

 

<style>
  table.custom-table {
    width: 100%;
    border-collapse: collapse;
  }
  .custom-table th, .custom-table td {
    padding: 10px;
    border: 1px solid #ddd;
  }
  .custom-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table class="custom-table">
  <tr><th>항목</th><th>설명</th></tr>
  <tr><td>HTML</td><td>웹의 뼈대 구조</td></tr>
  <tr><td>CSS</td><td>디자인과 스타일을 담당</td></tr>
</table>

CSS를 조합하면 테이블도 훨씬 보기 좋아집니다.

nth-child(even)은 짝수 행 배경색을 지정해서 가독성을 높이는 방법입니다.

패딩, 간격, 배경색만 잘 조절해도 복잡한 프레임워크 없이도 충분히 감성 있는 테이블을 만들 수 있어요.

 

💡 팁 하나 더 드릴게요.

table 태그를 쓴다고 해서 모든 데이터를 담을 필요는 없습니다.
리스트가 더 적합한 구조는 <ul>, <dl> 등으로 구성하고 진짜 표 형식의 구조는 테이블로 분리하세요.

이게 바로 HTML의 시멘틱한 구조를 살리는 방식입니다.

마무리하며 🌿

<table> 은 여전히 유효한 HTML 요소입니다.

단순 나열이 아닌 정렬된 정보를 보여줘야 할 땐, 지금도 가장 효과적인 구조죠.

레이아웃용이 아닌 ‘의미 있는 정보용’ 테이블을 만들 줄 아는 것.
그게 바로 상급 HTML 사용자의 기본기입니다.

👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com

배웠다 말았다 다시 시작했다😎