[HTML 테이블(Table)] #03 colspan, rowspan, 그리고 테이블 스타일 지정하기

 

 

안녕하세요 토스트데브입니다!
이번 시간에는 HTML 테이블에서 셀을 병합하는 속성인 colspan, rowspan과 함께 기본적인 스타일링 방법까지 함께 알아보겠습니다.
표를 좀 더 예쁘고 유용하게 만들기 위한 핵심 내용이니 꼭 기억해주세요!

 

 

📌 1. colspan 속성: 열(가로) 병합하기

colspan은 하나의 셀이 가로로 여러 열을 차지하게 만들어주는 속성입니다.

✅ 사용 예제

<table border="1">
  <tr>
    <th colspan="2">회원 정보</th>
  </tr>
  <tr>
    <td>이름</td>
    <td>홍길동</td>
  </tr>
</table>

 

• "회원 정보" 셀이 두 개의 열을 병합해 넓게 표시됩니다.
• colspan="2"는 두 칸을 하나로 합치겠다는 의미입니다.

 

 

📌 2. rowspan 속성: 행(세로) 병합하기

rowspan은 하나의 셀이 세로로 여러 행을 차지하게 만들어주는 속성입니다.

✅ 사용 예제

<table border="1">
  <tr>
    <th rowspan="2">이름</th>
    <td>홍길동</td>
  </tr>
  <tr>
    <td>이영희</td>
  </tr>
</table>

 

• "이름" 셀이 두 개의 행을 병합해서 표시됩니다.

 

 

🧪 병합 예시 종합

<table border="1">
  <tr>
    <th colspan="3">학생 성적표</th>
  </tr>
  <tr>
    <th>이름</th>
    <th>국어</th>
    <th>수학</th>
  </tr>
  <tr>
    <td rowspan="2">홍길동</td>
    <td>90</td>
    <td>95</td>
  </tr>
  <tr>
    <td>85</td>
    <td>88</td>
  </tr>
</table>

 

 

🎨 3. 테이블 스타일링 기초 (CSS)

✅ 테두리 합치기: border-collapse

table {
  border-collapse: collapse;
}

 

• collapse: 인접한 셀의 테두리를 하나로 합칩니다.
• separate: 기본값으로, 셀 사이에 간격이 생깁니다.

 

✅ 셀 여백: padding

td, th {
  padding: 8px;
}

 

• 내용과 셀 테두리 사이의 여백을 조정합니다.

 

✅ 정렬 및 배경색

th {
  background-color: #f2f2f2;
  text-align: center;
}

• 제목 셀을 강조하거나 가독성을 높일 때 사용합니다.

 

✅ 전체 스타일 예제

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f4f4f4;
  }
</style>

 

 

📌 마무리

• colspan, rowspan을 활용하면 데이터 구조를 유연하게 설계할 수 있습니다.
• CSS로 테이블을 꾸미면 사용자 친화적인 디자인을 만들 수 있습니다.
• 단순한 표에서 완성도 있는 표로 발전시키는 첫 걸음이 바로 이 병합과 스타일링입니다!

 

#HTML #테이블태그 #colspan #rowspan #table스타일 #웹개발기초 #HTML기초 #웹퍼블리싱 #프론트엔드기초 #코딩입문 #toastdev #웹디자인 #표스타일링