표란?
table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.
문법(Syntax)
<table>
<tr>
<th>제목</th>
</tr>
<tr>
<td>데이터</td>
</tr>
</table>
설명(Description)
- 데이터를 구조화할 때 사용됨
- 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용
- th는 데이터 그룹의 제목에 해당함 (header cells)
- td는 th에 속하는 데이터 그룹 (standard cells)
예제(Example)
example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다. (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <table border="1"> <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>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다. (jsfiddle, github)
<!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>6</td> </tr> <tr> <td>최유빈</td><td>여</td><td>2</td> </tr> </table> </body> </html>
example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다. (jsfiddle, github)
<!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> </tr> <tr> <td>최유빈</td><td>여</td> </tr> </table> </body> </html>
example4.html - 열을 병합하고 싶다면 colspan을 사용한다. (jsfiddle, github)
<!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>
