html 고급 문서 만들기 3 - table 태그로 표 만들기
네 안녕하세요, 이번 포스팅에서는 표를 만드는 방법에 대하여 알아보도록 하겠습니다.
우리가 웹 페이지를 만들면서 리스트 보다 좀 더 체계적인 구조로 무언가를 짜고 싶을 때에는 표를 씁니다.
그리고 html 문서를 작성할 때 이러한 표를 작성하는 요령이 있습니다.
그래서 이번 포스팅에서는 그러한 방법을 알아보려 합니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 표 만들기 : <table> 태그 이용
html 태그에서는 표도 만들 수 있습니다.
앞서 말씀드렸듯이, 우리가 한 번에 많은 양의 데이터를 간단하게 요약하여 보여주고자 할 때 표를 씁니다.
그래서 html에서는 table이라는 태그를 이용하여 표를 만듭니다.
이런 식으로 사용을 합니다.
<!-- 기본 템플릿 -->
<table>
<caption>제목</caption>
<thead>헤딩 셀 그룹</thead>
<tbody>데이터 셀 그룹</tbody>
<tfoot>바닥 셀 그룹</tfoot>
</table>
<!-- 제목과 데이터 셀 표기법 -->
<table>
<caption>제목</caption>
<thead><tr><th>제목<td>내용</td></th></tr></thead>
<tbody><tr><th>제목<td>내용</td></th></tr></tbody>
<tfoot><tr><th>제목<td>내용</td></th></tr></tfoot>
</table>
<!-- tr : 행, th : 제목, td : 데이터(내용) -->
<!-- 비정형 테이블 만들기 -->
<table>
<caption>제목</caption>
<thead><tr><th>제목<td colspan="2">내용</td></th></tr></thead>
<tbody><tr><th>제목<td rowspan="2">내용</td></th></tr></tbody>
<tfoot><tr><th>제목<td>내용</td></th></tr></tfoot>
</table>
<!-- colspan : 열 너비 조정(열 합침) -->
<!-- rowspan : 행 너비 조정(행 합침) -->이런 식으로 정형 테이블도 만들 수 있고, 비정형 테이블도 만들 수 있습니다.
그리고 표의 전반적인 부분을 담당하는 태그들은 이렇습니다
- caption 태그 : 표의 제목
- thead 태그 : 표의 제일 윗 부분(표를 작성하여 나눈 기준)
- tbody 태그 : 표의 중간 부분(주요 내용)
- tfoot 태그 : 표의 제일 밑 부분(비고나 총합 등이 여기 들어가는 경우가 많음)
이런 식으로 쓸 수 있으며,
이 뼈대를 구성하는 태그 내에 있는 인라인 태그들은 이러한 역할을 합니다.
- tr 태그 : 표의 행(html에서는 행 단위로 표를 표현함)
- th 태그 : 행의 제목 정보를 가진 태그
- td 태그 : 행의 내용을 가진 태그
또한, 비정형 표를 만들 경우에는 행 관련 태그 내에 특별한 속성을 가지고 나타낼 수 있습니다.
속성은 아래와 같습니다.
- rowspan : 아래로 이동하여 행을 합침
- colspan : 옆으로 이동하여 열을 합침
그럼 이제 이들을 이용하여 긴딘힌 예제 코드를 작성해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 테이블 만들기</title>
</head>
<body>
<h3>기본 구조를 가진 표</h3>
<hr>
<table border="1">
<caption>2017년 1학기 성적</caption>
<thead>
<tr><th>이름</th><th></th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
<tr><th>합</th><th>225</th><th>230</th></tr>
</tfoot>
<tbody>
<tr><td>황기태</td><td>80</td><td>70</td><td>70</td></tr>
<tr><td>이재문</td><td>95</td><td>99</td><td>99</td></tr>
<tr><td>이병은</td><td>40</td><td>61</td><td>61</td></tr>
</tbody>
</table>
</body>
</html>여기에서 보면 border라는 속성을 쓴 게 보이시나요?
border 속성은 경계의 너비를 조절할 수 있게 하는 css 속성입니다.
이걸 이렇게 태그 옆에다가 쓸 수도 있습니다.
그냥 css를 적기 위해 style 태그를 써서 선언을 해도 되지만,
때에 따라서 이런 식으로 쓰는 것이 좀 더 편할 때가 있습니다.
그래서 이러한 경우에는 저렇게 그냥 직접 써서 끝내거나,
아니면 저 방법을 써서 적절한 너비가 나왔을 때 style 태그 내에 다시 쓰는 방법이 있습니다.
css에 대해서는 나중에 css에 대하여 설명할 때 자세히 다루도록 하겠습니다.
그리고 여기서는 테두리의 폭을 1로 설정을 했습니다.
그럼 결과 화면을 같이 보실까요?
이런 식으로 표의 테두리 너비는 1로 설정이 된 표가 만들어진 것을 볼 수 있습니다.
2. 그림을 가지고 있는 표 만들기
표에는 글 뿐만 아니라 그림도 들어가곤 합니다.
html 태그 역시 그림을 넣은 표도 만들 수 있습니다.
이 부분도 예제 코드를 통하여 같이 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 테이블 만들기</title>
</head>
<body>
<h3>>표에 이미지 삽입</h3>
<hr>
<table>
<caption>좋아하는 과일</caption>
<tbody>
<tr>
<td><img src="media/apple.png"></td>
<td><img src="media/banana.png"></td>
<td><img src="media/mango.png"></td>
</tr>
</tbody>
</table>
</body>
</html>이렇게 이미지 주소를 td 태그 안에 넣어주면 이미지가 표 안에 데이터로 출력이 됩니다.
그럼 같이 결과를 봅시다.
이렇게 요구한 대로 사과, 바나나, 망고 이미지가 표에 삽입이 되어있는 것을 볼 수 있습니다.
여기까지 표 만들기를 끝으로 html 고급 문서 만들기에 대하여 알아보았습니다
다음 포스팅에서는 문서에 하이퍼링크를 넣는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 다시 한번 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html iframe 태그로 인라인 프레임 사용하기 (0) | 2023.03.02 |
|---|---|
| html a 태그로 하이퍼링크(하이퍼텍스트, 하이퍼미디어)와 다운로드 링크 만들기 (0) | 2023.03.02 |
| html 고급 문서 만들기 2 - ol, ul, dl 태그로 리스트 만들기 (0) | 2023.03.01 |
| html 고급 문서 만들기 1 - img 태그로 이미지 삽입하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 10 - 블록 태그와 인라인 태그 이용하기 (0) | 2023.03.01 |
댓글