저번 포스팅에서는 테이블에 대한 기본적인 설명을 드렸습니다.
이번 포스팅에서는 테이블을 어떻게 활용하는지 예제를 들어보겠습니다.
이 사진을 보시면 테이블로 하나의 구단순위를 만들어 본 예제입니다.
바로 소스코드를 보고 설명을 드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table 활용</title>
</head>
<body>
<h1>구단 순위</h1>
<table border="1" summary="EPL구단 순위">
<caption>구단 순위표</caption>
<thead>
<tr>
<th>순위</th>
<th>팀</th>
<th>승</th>
<th>패</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><img src="http://t1.daumcdn.net/media/img-section/sports13/logo/team/14/17_300300.png?_t=20180528" width="24" alt="맨시티 구단마크">맨시티</td>
<td>32</td>
<td>2</td>
</tr>
<tr>
<th>2</th>
<td><img src="http://t1.daumcdn.net/media/img-section/sports13/logo/team/14/35_300300.png?_t=20180528" width="24" alt="맨시티 구단마크">맨유</td>
<td>25</td>
<td>7</td>
</tr>
<tr>
<th>3</th>
<td><img src="http://t1.daumcdn.net/media/img-section/sports13/logo/team/14/33_300300.png?_t=20180528" width="24" alt="맨시티 구단마크">토트넘</td>
<td>23</td>
<td>7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">자료제공 : 제공</td>
</tr>
</tfoot>
</table>
<!--
table 활용
1) caption요소 : 표의 제목처럼 사용하는 요소
2) 테이블은 thead, tbody, tfoot으로 구성
tbody는 필수(없다면 브라우저가 생성)
3) summary 속성 : 표에 대한 요약 정리(웹 접근성)
4) th(table header) 요소 : 표 안에서 제목
-->
</body>
</html>
저번 포스팅에서도 설명을 드린것과 같이 테이블 요소안에 border라는 속성은 css에 써야하지만 처음엔 보기 편하게 하기위해 기재하였습니다.
테이블은 표를 나타내는걸로 설명을 드릴 수 있는데요 caption 요소와 테이블의 구성 그리고 웹 접근성을 위하여 summary 속성까지 써줘보았습니다.
마지막에 colspan이 있는데 colspan과 rowspan 이런식으로 테이블 셀을 합친다고 보시면 됩니다.
행을 합치는지 열을 합치는지 그리고 몇개의 행 혹은 몇개의 열을 합치는지 보시면 됩니다.
다음 예제를 들어 한번 보시면 테이블의 행을 합치는지 열을 합치는지에 대한 설명이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블셀합치기</title>
</head>
<body>
<h1>테이블 합치기</h1>
<h2>수평으로 합치기</h2>
<!-- column 간의 합치기 : colspan 속성 -->
<table border="1" width="300" height="300">
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<hr/>
<h2>수직으로 합치기</h2>
<!-- row 간의 합치기 : rowspan 속성 -->
<table border="1" width="300" height="300">
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>
</html>
이 예제를 보시면 어떤식으로 합치는지 확실히 이해가 가실겁니다.
테이블 합치는것은 의외로 많이 사용되는 속성이므로 반드시 기억해야합니다!
이번 포스팅은 여기까지입니다. 많은 도움이 되셨길 바랍니다.
'Front-end > HTML' 카테고리의 다른 글
| 10. 복습 예제 (0) | 2018.08.01 |
|---|---|
| 9. 폼의기능(GET, POST 방식) (0) | 2018.07.31 |
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |
| 7. Font Awesome (0) | 2018.07.25 |
| 6. 파비콘과 내부링크 (0) | 2018.07.24 |