테이블 구성 요소
- 테이블은
행(row)과열(column),셀(cell)로 구성되어 있다.- 셀(cell) : 행과 열이 만나는 곳(테이블의 한 칸)
- 행 : 세로
- 열 : 가로
테이블 만들기 : <table>,<caption>, <tr>, <td>, <th>태그
-
<table>태그: 웹 페이지에 테이블을 삽입한다. -
<caption>태그: 삽입한 테이블에 제목을 붙인다. -
<tr>태그: 행을 만들어주는 태그 -
<td>태그: 행안에 셀을 만들어주는 태그 -
<th>태그: 테이블에 제목 행에 셀을 만들 때 사용하는 태그 -
테이블 안에
<tr>태그,<td>태그가 모두 모여야 하나의 셀을 만들 수 있다. -
기본문법
<table border = "1">
<caption>테이블 만들기</caption>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>사용예시
border = "1": 테이블의 경계선 두께를 1픽셀로 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오늘의 날씨</title>
</head>
<body>
<table border="1">
<caption></caption>
<tr>
<th>지역</th>
<th>최저기온</th>
<th>최고기온</th>
</tr>
<tr>
<td>서울</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>대구</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>광주</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>부산</td>
<td>20</td>
<td>30</td>
</tr>
</table>
</body>
</html>
colspan, rowspan속성
<!--열(column) / 가로 병합-->
<td colspan="합칠 셀의 개수">cell text</td>
<!--행(row) / 세로 병합-->
<td rowspan="합칠 셀의 개수">cell text</td>사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 만들기</title>
</head>
<body>
<h3>상품 구성</h3>
<table border="1">
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
<tr>
<!--2개의 행 합치기-->
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<!--3개의 셀만 작성-->
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</table>
</body>
</html>
표 구조 지정하기 : <thead>, <tbody>, <tfoot>태그
-
테이블 아래쪽에 합계나 요약내용이 표시된 테이블을 만들 경우
표의 구조를 나누어 만드는 것이 바람직하다. -
<thead>태그: 테이블의 제목을 만든다. -
<tbody>태그: 테이블의 본문 내용을 담는다. -
<tfoot>태그: 테이블 하단에 합계, 요약 내용을 담는다.
사용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 만들기</title>
</head>
<body>
<h3>테이블 구조 지정하기</h3>
<table border="1" width="500px" height = "300px" style="text-align: center;">
<caption>Hanwool객실</caption>
<thead>
<tr style="background-color: black; color: aliceblue;">
<th>방 이름</th>
<th>예약 대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>장미룸</td>
<td>여성 전용</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인당 25,000원</td>
</tr>
<tr>
<td rowspan="2">국화룸</td>
<td>동성 전용</td>
</tr>
<tr>
<td>가족 전용</td>
</tr>
<tr>
<td>수선화 룸</td>
<td>커플 전용</td>
<td>2인실</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color: black; color: aliceblue;">
<td colspan="4">방마다 존재하는 테라스는 사용 가능합니다.</td>
</tr>
</tfoot>
</table>
</body>
</html>
열(column) 묶어주기 : <col>, <colgroup>태그
-
특정 열에 배경색을 넣거나 너비를 바꾸기 위해 사용하는 태그
-
<col>태그: 열을 1개만 지정할 때 사용 -
<colgroup>태그:<col>태그를 2개 이상 묶어서 사용 -
두 태그는
<caption>태그 다음에 사용해야 한다. -
기본문법
<colgroup>
<col>
</colgroup> 사용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 만들기</title>
</head>
<body>
<h3>테이블 특정 열에 스타일 속성 지정하기</h3>
<table border="1" style="height: 150px; text-align: center;">
<caption>Hanwool학원</caption>
<colgroup>
<!--첫 번째 열 : 배경색 지정-->
<col style="background-color: burlywood;">
<!--두 번째 열 : 적용할 스타일이 없어도 <col>명시-->
<col>
<!--세,네 번째 열 : 너비(가로)지정-->
<col span="2" style="width: 150px;">
</colgroup>
<tr>
<th>대상</th>
<th>나이</th>
<th>과목</th>
<th>가격</th>
</tr>
<tr>
<td rowspan="2">청소년</td>
<td>14~16세</td>
<td rowspan="2">HTML</td>
<td rowspan="2">70,000원</td>
</tr>
<tr>
<td>17~19세</td>
</tr>
<tr>
<td>성인</td>
<td>20세 이상</td>
<td>HTML</td>
<td>100,000원</td>
</tr>
</table>
</body>
</html>
참고
- Do it! HTML+CSS+자바스크립트 웹 표준의 정석
- HTML/CSS 입문
