HTML 표(HTML Tables)
Defining an HTML Table
HTML에서 표는 <table> 태그로 정의된다.
<th> 태그로는 table header, 즉 테이블 각 필드가 어떤 데이터인지 정의한다.
한 행은 <tr> 태그로 정의하고, <tr>의 내용으로 각 필드 값이 <td>와 함께 들어간다.
<td>에는 HTML의 모든 종류의 element를 내용으로 넣을 수 있다. (텍스트, 이미지. 리스트. 다른 표 등)
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
<td>여</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
<td>남</td>
</tr>
</table>
</body>
</html>
HTML Table - Adding a Border
위의 예제처럼 하면 표의 테두리, 경계선이 표시되지 않는다.
선을 넣기 위해서 CSS border 속성을 사용한다.
선을 넣을때는 테이블과 테이블 셀 모두에 경계선을 정의해야 한다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
<td>여</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
<td>남</td>
</tr>
</table>
</body>
</html>
실행 결과는 아래와 같다.
| 이름 | 나이 | 성별 |
|---|---|---|
| 홍길동 | 22 | 여 |
| 이순신 | 44 | 남 |
HTML Table - Collapsed Borders
위의 예제대로 HTML을 작성해보면, 실행결과 처럼 표의 테두리와 각 셀의 테두리가 따로 떨어져 출력된다.
테두리들이 하나로 합쳐진것을 보고 collapsed border라고 한다.
아래 소스코드는 collapsed border를 적용 하는 소스코드이다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
<td>여</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
<td>남</td>
</tr>
</table>
</body>
</html>
실행 결과는 아래와 같다.
| 이름 | 나이 | 성별 |
|---|---|---|
| 홍길동 | 22 | 여 |
| 이순신 | 44 | 남 |
HTML Table - Adding Cell Padding
cell padding은 셀의 내용과 경계선 사이의 간격을 조절하는 속성이다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse:collapse; }
th, td { padding: 15px; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
<td>여</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
<td>남</td>
</tr>
</table>
</body>
</html>
실행 결과는 아래와 같다.
| 이름 | 나이 | 성별 |
|---|---|---|
| 홍길동 | 22 | 여 |
| 이순신 | 44 | 남 |
HTML Table - Left-align Headings
table header는 기본값으로 굵은 글씨, 가운데 정렬으로 설정되어 있다.
좌측정렬로 바꾸기 위해서 text-align 속성을 사용한다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse:collapse; }
th, td { padding: 15px; }
th { text-align: left; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
<td>여</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
<td>남</td>
</tr>
</table>
</body>
</html>
HTML Table - Adding Border Spacing
border-spacing 속성은 셀 사이의 간격을 조절하는 속성이다.
그런데 만약 collaped border속성이 이미 되어있으면,
border-spacing 속성은 아무런 효과가 없다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; padding: 5px; }
table { border-spacing: 15px; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
<td>여</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
<td>남</td>
</tr>
</table>
</body>
</html>
실행결과는 아래와 같다.
| 이름 | 나이 | 성별 |
|---|---|---|
| 홍길동 | 22 | 여 |
| 이순신 | 44 | 남 |
HTML Table - Cells that Span Many Columns
한 데이터 셀을 두 칸으로 나누어 사용하고 싶을때 colspan 속성을 사용한다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; text-align: left; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<th colspan="2">연락처</th>
</tr>
<tr>
<td>홍길동</td>
<td>010-1234-5678</td>
<td>02-1234-5678</td>
</tr>
</table>
</body>
</html>
실행 결과는 아래와 같다.
| 이름 | 연락처 | |
|---|---|---|
| 홍길동 | 010-1234-5678 | 02-1234-5678 |
HTML Table - Cells that Span Many Rows
위의 예제와 비슷하게 열(row)에 적용하는 방법이다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; text-align: left; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>이름</th>
<td>홍길동</td>
</tr>
<tr>
<th rowspan="2">연락처</th>
<td>010-1234-5678</td>
</tr>
<tr>
<td>02-1234-5678</td>
</tr>
</table>
</body>
</html>
실행결과는 아래와 같다.
| 이름 | 홍길동 |
|---|---|
| 연락처 | 010-1234-5678 |
| 02-1234-5678 |
HTML Table - Adding a Caption
표에 캡션(제목)을 달고 싶을때, <caption>태그를 사용하면 된다.
<caption>태그는 <table>태그 바로 다음에 넣어줘야 한다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; text-align: left; }
</style>
</head>
<body>
<table style="width:100%">
<caption>홍길동의 연락처</caption>
<tr>
<th>이름</th>
<td>홍길동</td>
</tr>
<tr>
<th rowspan="2">연락처</th>
<td>010-1234-5678</td>
</tr>
<tr>
<td>02-1234-5678</td>
</tr>
</table>
</body>
</html>
실행 결과는 아래와 같다.
| 이름 | 홍길동 |
|---|---|
| 연락처 | 010-1234-5678 |
| 02-1234-5678 |
A Special Style for One Table
id 속성을 사용해서 표의 style을 정의하는 방법을 알아본다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; text-align: left; }
table#t01 { width: 100%; background-color: #f1f1c1; }
table#t02 tr:nth-child(even){ background-color: #eee; }
table#t02 tr:nth-child(odd){ background-color: #fff; }
table#t02 th { background-color: black; color: white; }
</style>
</head>
<body>
<table id="t01">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
</tr>
</table>
<table id="t02">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>22</td>
</tr>
<tr>
<td>이순신</td>
<td>44</td>
</tr>
<tr>
<td>왕건</td>
<td>50</td>
</tr>
<tr>
<td>주몽</td>
<td>100</td>
</tr>
</table>
</body>
</html>
HTML Table Tags
Tag |
설명 |
<table> |
테이블 정의 |
<th> |
테이블의 헤더 셀 정의 |
<tr> |
테이블 행 정의 |
<td> |
테이블 셀 정의 |
<caption> |
테이블 캡션 정의 |
<colgroup> |
테이블 컬럼 포멧팅 시, 컬럼을 그룹 지으려고 사용 |
<col> |
한 <colgroup> 내에서 각 컬럼의 속성을 정의할 때 사용 |
<thead> |
한 테이블 내 헤더들의 그룹 |
<tbody> |
한 테이블 내 바디들의 그룹 |
<tfoot> |
한 테이블의 footer들의 그룹 |
아래 링크를 참조하여 번역 및 수정 함
http://www.w3schools.com/html/html_tables.asp