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> 태그를 사용하여 테이블에 목적과 내용을 설명하는 캡션을 제공 할 수 있습니다. 계속해서 다양한 기능을 활용하여 웹 페이지를 개발해보세요!
'Mark Up > HTML' 카테고리의 다른 글
[HTML] HTML5의 새로운 기능과 태그들 (0) | 2023.07.19 |
---|---|
[HTML] 시맨틱 웹과 시맨틱 태그 (2) | 2023.07.19 |
[HTML] 이미지와 멀티미디어 (2) | 2023.07.19 |
[HTML] 하이퍼링크와 앵커 태그 (<a> 태그) (0) | 2023.07.19 |
[HTML] HTML 폼(Form) 요소 (2) | 2023.07.19 |