본문 바로가기
📁 [4] 개발자 정보 & 코드 노트/HTML

HTML 기초 강의 7편: 테이블로 데이터 정리하기

by wawManager 2024. 11. 7.

1. HTML 테이블 기본 구조

HTML에서 테이블은 <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>25</td>
        <td>디자이너</td>
    </tr>
</table>

 

  • <table>: 테이블 전체를 감싸는 태그
  • <tr>: 테이블의 행을 나타내는 태그
  • <th>: 테이블 헤더 셀(굵은 글씨)로, 각 열의 제목을 설정
  • <td>: 테이블 데이터 셀로, 각 행의 데이터를 표시

2. 테이블 속성

1) border

border 속성은 테이블의 테두리를 설정하며, 각 셀의 구분을 명확하게 해줍니다.

<table border="1">
    <!-- 테이블 내용 -->
</table>

 

2) cellpadding와 cellspacing

  • cellpadding: 셀 안쪽의 여백을 설정합니다.
  • cellspacing: 셀 사이의 간격을 설정합니다.
<table border="1" cellpadding="10" cellspacing="0">
    <!-- 테이블 내용 -->
</table>

3. 열 및 행 병합

데이터를 보기 좋게 정리하기 위해 열(span) 또는 **행(span)**을 병합할 수 있습니다. 이를 위해 각각 colspan과 rowspan 속성을 사용합니다.

열 병합 (colspan)

열을 병합하려면 colspan 속성을 사용합니다.

<table border="1">
    <tr>
        <th colspan="2">이름</th> <!-- 2개의 열을 병합 -->
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>김철수</td>
        <td>개발자</td>
    </tr>
</table>

행 병합 (rowspan)

여러 행을 하나로 병합하려면 rowspan 속성을 사용합니다.

<table border="1">
    <tr>
        <th rowspan="2">이름</th> <!-- 2개의 행을 병합 -->
        <td>홍길동</td>
    </tr>
    <tr>
        <td>김철수</td>
    </tr>
</table>

4. 스타일 적용하기

테이블에 CSS를 적용해 더 보기 좋게 꾸밀 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>직원 정보</h2>
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>김철수</td>
            <td>25</td>
            <td>디자이너</td>
        </tr>
    </table>
</body>
</html>

코드 설명

  • border-collapse: 테두리를 하나로 합쳐 깔끔하게 표시합니다.
  • nth-child(even): 짝수 행에 배경색을 지정해 가독성을 높입니다.

 

요약

이번 강의에서는 HTML 테이블의 기본 구조와 다양한 속성을 배웠습니다. 다음 강의에서는 테이블을 더 고급스럽게 스타일링하는 방법과 데이터 정렬에 대해 알아볼 예정입니다.

 

 

 

'📁 [4] 개발자 정보 & 코드 노트 > HTML' 카테고리의 다른 글

HTML 기초 강의 9편: 폼 유효성 검사(Validation)  (1) 2024.11.09
HTML 기초 강의 8편: HTML5 시맨틱 태그로 웹 구조 개선하기  (5) 2024.11.08
HTML 기초 강의 6편: 폼과 입력 필드  (5) 2024.11.06
HTML 기초 강의 5편: 반응형 웹 디자인과 미디어 쿼리  (0) 2024.11.05
HTML 기초 강의 4편: CSS 레이아웃(Flexbox와 Grid)으로 웹 페이지 구성하기  (0) 2024.11.04

관련글

티스토리툴바