[코딩 17] HTML 테이블 태그 두번째

 

[코딩 17] HTML 테이블 태그 두번째 

 

 

html 편집기 입력 이미지 > 결과 이미지

 

 

 

테이블 태그의 기본구조와 속성은 [코딩 16]에서 포스팅했다. 

 

 

오늘은 한단계 더 나아가서 테이블 태그에 대해 적어보려고 한다. 

 

 

summary="표에 대한 설명" -> 웹페이지 화면에는 보여지지 않는다. 

 

 

 

 

caption

 

 

<capntion>표에 대한 설명</caption>

-> 화면에 보여지는 부분으로, 표의 가운데 위쪽에 표시된다.

 

 

 

 

colgroup

 

 

<colgroup><col></colgroup>

-> 열 하나 하나에 속성을 넣어서 너비나 배경색 등을 바꿔줄 수 있다.

     col은 닫히는 태그가 없다. 

 

 

 

 

thead

 

 

<thead><tr><th></th></tr></thead>

-> 헤드라는 말처럼 표의 머리글이라고 생각하면 된다.

     글자가 굵게 나타난다.

     tr 다음에 td가 아닌 th가 들어간다.

 

 

 

 

tbody

 

 

<tbody><tr><td></td></tr></tbody>

-> 바디라는 말처럼 표의 몸통부분이다. 

    테이블 태그의 기본구조인 tr과 td 태그로 코딩하면 된다.

 

 

 

 

tfoot

 

 

<tfoot><tr><td></td></tr></tfoot>

-> 열에 대한 마지막 내용을 적어준다.

     예를 들면 열을 전부 더한 값이라던가 평균값이 보여진다고 생각하면 된다. 

 

 

 

위에 적은 순서대로 thead > tbody > tfoot 

이런 순서대로 적어줘야 한다. 

 

 

이렇게 태그로 묶어주면

css작업 시 적용하기에 좋다. 

 

 

 

 

[ 그외 코딩 포스팅 보러가기 ]

 

[코딩 16]HTML 테이블 태그 첫번째

 

[코딩 15]HTML 이미지 링크 걸기

 

[코딩 12]HTML 비순차적 목록태그 ul