<table> 태그
1. 표란?
table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.
2. 문법(Syntax)
<table>
<tr>
<th>제목</th>
</tr>
<tr>
<td>데이터</td>
</tr>
</table>
3. 설명(Description)
- 데이터를 구조화할 때 사용됨
- 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용
- th는 데이터 그룹의 제목에 해당함 (header cells)
- td는 th에 속하는 데이터 그룹 (standard cells)
4. 예제(Example)
example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<table border="1">// 표는 table로 시작
<tr>//tr로 한줄씩 만든다.
<td>이름</td><td>성별</td><td>나이</td>
</tr>
<tr>
<td>최진혁</td><td>남</td><td>6</td>
</tr>
<tr>
<td>최유빈</td><td>여</td><td>2</td>
</tr>
</table>
</body>
</html>
example2.html - <th>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<table border="1">
<tr>
<th>이름</th><th>성별</th><th>나이</th>//th은 각각의 contents의 제목에 해당한다.
</tr>
<tr>
<td>최진혁</td><td>남</td><td>6</td>
</tr>
<tr>
<td>최유빈</td><td>여</td><td>2</td>
</tr>
</table>
</body>
</html>
example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<table border="1">
<tr>
<th>이름</th><th>성별</th><th>나이</th>
</tr>
<tr>
<td>최진혁</td><td>남</td><td rowspan="2">비공개</td>//row:행, span: 묶는다.(통합한다.)--> 두개의 행을 하나의 행으로 묶는다.--> 병합될 대상은 다음행을 말한다.
</tr>
<tr>
<td>최유빈</td><td>여</td>
</tr>
</table>
</body>
</html>
example4.html - 열을 병합하고 싶다면 colspan을 사용한다.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>이름</th><th>성별</th><th>나이</th>
</tr>
<tr>
<td>최진혁</td><td colspan="2">비공개</td>// 두개의 열을 하나의 박스로 묶는다.
</tr>
<tr>
<td>최유빈</td><td>여</td><td>2</td>
</tr>
</table>
</body>
</html>
'WebFont-end > HTML5' 카테고리의 다른 글
| [HTML5] <a> 태그 (0) | 2014.12.21 |
|---|---|
| [HTML5] <input> 태그 (0) | 2014.12.21 |
| [HTML5] <form> 태그_GET과 POST (0) | 2014.12.21 |
| [HTML5] <form> 태그 2 (0) | 2014.12.20 |
| [HTML5] <form> 태그 1 (0) | 2014.12.20 |