[HTML] 테이블 생성과 활용

HTML에서 테이블은 데이터를 표 형태로 보여주기 위해 사용되며, 정보를 정렬하여 시각적으로 이해하기 쉽게 합니다. 테이블은 <table> 태그를 사용하여 생성하며, <tr>, <th>, <td> 태그들을 활용하여 행과 셀을 정의합니다.

---

기본적인 테이블 생성

기본적인 테이블 생성은 다음과 같이 <table>, <tr>, <th>, <td> 태그들을 사용합니다.

<table>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>아이린</td>
        <td>29</td>
        <td>가수</td>
    </tr>
</table>

위의 예제에서는 이름, 나이, 직업을 갖는 간단한 테이블을 생성했습니다.

---

테이블 헤더와 본문 구분

<th> 태그를 사용하면 테이블 헤더(Header)를 지정할 수 있습니다. 헤더는 테이블의 제목 행으로, 기본적으로 굵은 글씨로 표시됩니다. <td> 태그를 사용하여 테이블 본문(Body)의 데이터를 정의합니다.

<table>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>아이린</td>
        <td>29</td>
        <td>가수</td>
    </tr>
</table>

---

셀 병합하기

<th>나 <td> 태그에 colspan과 rowspan 속성을 사용하여 셀을 병합할 수 있습니다.

<table>
    <tr>
        <th>이름</th>
        <th>성별</th>
        <th colspan="2">주소</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>남성</td>
        <td rowspan="2">서울</td>
        <td>강남구</td>
    </tr>
    <tr>
        <td>아이린</td>
        <td>여성</td>
        <td>강서구</td>
    </tr>
</table>

위의 예제에서 "주소" 셀은 colspan="2" 속성을 사용하여 2개의 셀을 병합하였고, "서울" 셀은 rowspan="2" 속성을 사용하여 2개의 행을 병합하였습니다.

---

테이블 스타일링

테이블의 스타일을 변경하기 위해서는 CSS를 활용할 수 있습니다. 테이블에 대한 스타일링은 border, background-color, text-align 등을 활용하여 다양한 디자인을 적용할 수 있습니다.

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

위의 예제에서는 테이블 전체 스타일을 변경하는데, border-collapse를 사용하여 셀 테두리를 병합하고, width 속성을 사용하여 테이블의 폭을 100%로 지정하였습니다. 또한, 헤더와 본문의 배경색을 다르게 지정하고, 짝수 행의 배경색을 변경하였습니다.

---

<caption> 태그

<caption> 태그는 <table> 태그의 첫 번째 자식으로 사용되며, 테이블에 대한 캡션(제목)을 정의합니다. 테이블의 목적이나 내용에 대한 간단한 설명을 캡션으로 제공하여 사용자들이 테이블을 더 잘 이해할 수 있도록 도와줍니다.

<table>
    <caption>월별 판매량</caption>
    <tr>
        <th>월</th>
        <th>제품 A 판매량</th>
        <th>제품 B 판매량</th>
    </tr>
    <tr>
        <td>1월</td>
        <td>100</td>
        <td>200</td>
    </tr>
    <!-- 나머지 데이터 행들 -->
</table>

위의 예제에서는 <caption> 태그를 사용하여 "월별 판매량"이라는 테이블에 대한 캡션을 제공했습니다.

<caption> 태그는 웹 접근성에도 중요한 역할을 합니다. 스크린 리더를 사용하는 시각 장애인들은 테이블에 대한 캡션을 읽어주기 때문에, 테이블에 대한 정보를 누락하지 않고 이해할 수 있습니다.

---

이제 테이블 생성과 활용에 대한 설명을 마치겠습니다. 테이블을 사용하여 데이터를 체계적으로 표현하고, CSS를 이용하여 스타일을 변경하여 멋진 디자인의 테이블을 만들고, <caption> 태그를 사용하여 테이블에 목적과 내용을 설명하는 캡션을 제공 할 수 있습니다. 계속해서 다양한 기능을 활용하여 웹 페이지를 개발해보세요!