HTML Tables | 테이블 기본 서식

 

HTML Tables: 기본 서식과 활용 가이드

HTML 테이블은 데이터를 구조적으로 표시하고 정리된 형식으로 정보를 제공하는 데 유용한 요소입니다. 이 글에서는 HTML 테이블의 기본 구조, 주요 속성, 그리고 실무에서 활용할 수 있는 팁을 소개합니다.

 

 

 

HTML 테이블의 기본 구조

HTML 테이블은 <table> 태그와 그 하위 요소로 구성됩니다. 기본적인 HTML 테이블의 구조는 다음과 같습니다:

 

<table>
    <thead>
        <tr>
            <th>헤더 1</th>
            <th>헤더 2</th>
            <th>헤더 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>데이터 1</td>
            <td>데이터 2</td>
            <td>데이터 3</td>
        </tr>
        <tr>
            <td>데이터 4</td>
            <td>데이터 5</td>
            <td>데이터 6</td>
        </tr>
    </tbody>
</table>

 

 

• <table>: 테이블 전체를 감싸는 태그.
• <thead>: 테이블 헤더를 정의.
• <tbody>: 테이블 본문 데이터를 정의.
• <tr>: 행(Row)을 정의.
• <th>: 열(Column) 헤더를 정의하며, 기본적으로 텍스트가 굵게 표시되고 중앙 정렬됩니다.
• <td>: 데이터 셀을 정의.

 

 

 

HTML 테이블의 주요 속성

1. border 속성 테이블의 테두리를 설정합니다:

 

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

 

 

2. cellpadding과 cellspacing

 

• cellpadding: 셀 안쪽 여백을 설정합니다.
• cellspacing: 셀 사이의 간격을 설정합니다.

 

3. colspan과 rowspan 셀이 여러 열이나 행에 걸쳐 표시되도록 설정합니다:

 

<tr>
    <td colspan="2">두 열을 합침</td>
</tr>
<tr>
    <td rowspan="2">두 행을 합침</td>
</tr>

 

 

4. width와 height 테이블이나 셀의 크기를 지정합니다:

 

<table width="100%" height="300">
    <!-- 테이블 내용 -->
</table>

 

 

 

 

테이블 스타일링: CSS 활용

HTML 기본 테이블은 단순하지만, CSS를 활용하면 더욱 세련된 디자인을 만들 수 있습니다:

 

1. 테이블 테두리 스타일

 

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

 

2. 배경색과 텍스트 색상 행과 열에 배경색을 추가해 가독성을 높일 수 있습니다:

 

th {
    background-color: #f4f4f4;
    color: #333;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}

 

 

3. 호버 효과 추가 마우스를 올렸을 때 행이 강조되도록 설정합니다:

 

tr:hover {
    background-color: #ddd;
}

 

 

 

 

실무에서의 HTML 테이블 활용 팁

1. 반응형 테이블 디자인 모바일 환경에서 테이블이 깨지지 않도록 CSS를 활용합니다:

 

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
} 

 

 

2. 접근성을 고려한 작성

• <caption> 태그를 사용해 테이블 제목을 추가합니다.
• <scope> 속성을 사용해 헤더와 데이터를 명확히 구분합니다:

<th scope="col">헤더</th>
<th scope="row">행 제목</th> 

 

 

 

3. 테이블 최적화

• 데이터를 간결하게 표시하고, 너무 많은 정보를 한 테이블에 담지 않도록 합니다.
• 정렬과 필터 기능은 JavaScript를 활용해 추가합니다.

 

 

 

결론

HTML 테이블은 데이터를 구조적으로 표현하는 데 매우 유용한 도구입니다. 기본 태그와 속성을 잘 활용하고, CSS로 스타일을 추가하면 더욱 가독성 높은 테이블을 만들 수 있습니다. 이 가이드를 바탕으로 다양한 웹 개발 프로젝트에서 효율적인 테이블을 구현해 보세요.