| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- 아두이노 프로미니
- mysql api
- 아두이노
- html input
- mysql c
- HTML
- Codility
- 아두이노 wifi
- wifi멀티탭
- Arduino pin map
- 아두이노 핀 맵
- 라즈베리파이
- 코딜리티
- 아두이노 와이파이
- vm
- ubuntu
- 아두이노 핀
- MySQL
- 아두이노 pro mini
- Arduino
- 데이터베이스
- Raspberry Pi
- database
- web
- 알고리즘
- Arduino pin
- 웹 프로그래밍
- Virtual Box
- Mysql c API
- 아두이노 핀맵
- Today
- Total
offfff
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
'프로그래밍' 카테고리의 다른 글
| HTML 블록(HTML Blocks) (0) | 2016.09.06 |
|---|---|
| HTML 리스트(HTML Lists) (0) | 2016.09.05 |
| HTML 이미지(HTML Images) (0) | 2016.09.03 |
| HTML 링크(HTML Links) (0) | 2016.09.02 |
| HTML CSS (0) | 2016.09.01 |