표란?
table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.
문법(Syntax)
1 2 3 4 5 6 7 8 | <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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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 > |