-
HTML5 테이블 태그 <table>, <td>, <tr>, <thead>, <tbody>, <tfoot>Programming/HTML5 - CSS3 2017. 7. 7. 15:45반응형
테이블 태그
표를 만드는 태그, 코딩으로 표를 만들때 사용하지만 웹사이트의 프레임(구조)를 잡을때도 사용한다. 예전에는 HTML 테이블로 웹페이지 레이아웃 구조를 잡는데 많이 사용했으나, 최근들어 table을 이용해서 레이아웃을 잡는건 그다지 권장하지 않으나 여전히 쓰는 곳도 있다고 한다.
<td>태그 : table data의 약자(표 각각의 실제 데이터를 의미)
<tr>태그 : table row(행) td태그를 행으로 묶어줌
table 태그의 구성
12345678910<body><table><tr><td></td></tr></table></body>12345678910<body><table border="1"><tr><td>이름</td><td>나이</td><td>직업</td></tr><tr><td>원빈</td><td>30</td><td>영화배우/연예인</td></tr></table></body>cs 결과
전 게시물 HTML5 요소와 태그, 속성 에서 배운
<table 속성이름="속성 값">
<table border="1"> 표의 테두리 선 두깨를 1px로 하겠다라는 뜻
<thead> : 테이블 제목
<tbody> : 테이블 내용
<tfoot> : 끝에 오는 내용
12345678910111213141516<body><table border="1"><thead><td>이름</td><td>나이</td><td>직업</td></thead><tbody><td>원빈</td><td>30</td><td>영화배우/연예인</td></tbody><tfoot><td>마지막 말</td></tfoot><tbody><td>원빈</td><td>30</td><td>영화배우/연예인</td></tbody></table></body>cs 결과
처음 보시는 분은 복잡할 수 있으나 잘 살펴보시면 이해하기 편함
<thead>, <tbody>, <tfoot>는 필수사항은 아니나 구분하기 편하게 하기 위함입니다.
tfoot는 보시다 싶이 중간에 선언해도 마지막 끝인 맨 밑에 나오게 됩니다.
행병합 -> <td rowspan="숫자">
열병합 -> <td colspan="숫자">
12345678910111213141516171819202122<body><table border="1"><thead><tr><td>이름</td><td>나이</td><td>직업</td></tr></thead><tbody><tr><td>원빈</td><td>30</td><td rowspan="2">영화배우/연예인</td></tr><tr><td>이나영</td><td>30</td></tr></tbody><tfoot><tr><td colspan="3" align="center">마지막 말</td></tr></tfoot></table></body>cs 결과'Programming > HTML5 - CSS3' 카테고리의 다른 글
HTML5 UPLOAD (0) 2017.07.08 HTML5 FORM 태그 (0) 2017.07.07 HTML5 <p>태그 , <br>태그 (0) 2017.07.07 HTML5 태그와 요소, 속성 (0) 2017.07.07 HTML5 란 (0) 2017.07.07
