table 요소는 표를 만들 수 있는 태그이다.
table 요소를 만든 뒤, 행을 tr로 만든 뒤, td로 셀을 표현한다.
table 요소는 작은 표를 만드는 데 쓰일 수 있고,
홈페이지의 전체 구성(layout)을 만드는 데도 사용될 수 있다.
하지만 원래 table 태그는, 데이터를 담고 있는 표를 만들기 위한 목적이다.
html 기초 태그처럼, <table> 역시 </table>과 쌍을 이루어 사용한다.
<table>은 각각 셀로 만드는데 header cell과 standard cell로 나누어진다.
<th>를 header cell이라 부르며 나머지를 standard cell로 부른다.
⊙ <th>내용</th> : table head 약자로, 표의 제목을 쓰는 역할 (기본값은 굵은 글씨체에, 중앙 정렬)
⊙ <tr>내용</tr> : table row 약자로, 가로줄을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)
⊙ <td>내용</td> : table data 약자로, 셀을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <th>번호</th> <th>이름</th> </tr> <tr> <td>1</td> <td>김철수</td> </tr> <tr> <td>2</td> <td>최영희</td> </tr> </table> </body> </html>
<table> 태그와 함께 사용될 수 있는 속성은 다음과 같습니다.
table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등
(1) colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <td colspan="2">1반</td> </tr> <tr> <td>1</td> <td>김철수</td> </tr> <tr> <td>2</td> <td>최영희</td> </tr> </table> </body> </html>
(2) rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <td rowspan="3">1반</td> <td>박영철</td> </tr> <tr> <td>김철수</td> </tr> <tr> <td>최영희</td> </tr> </table> </body> </html>
