HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그 - 텍스트 표시 (7)

HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 

캡션(caption) 태그 - 텍스트 표시 (7)

오늘은 HTML -  테이블(itable), tr, th, td, 열과 행의 병합,

 캡션(caption) 태그에 대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 테이블(itable)태그란?

표 형태의 데이터를 표시하는 데 사용 되는 태그 이며

예전 초기 웹 페이지에서는 레이아웃에도 테이블을 사용하였으며

테이블(itable)로 정의 합니다.

< 단순한 2행 2열 테이블(itable)태그 사용법 > 

여기서 테이블 태그의 border 속성은 테이블에 경계선을 주라는 뜻이며

행이 시작 될시 tr태그를 생성해 그 안에 td로 여러개의 열을 만들어 줄수 있다.

1. 첫번째 행 : 철수 92

2, 두번째 행 : 영희 90

이 다음 th 태그로 제일 첫번쨰 행과 열을 

제목으로 표시하는 경우 입니다.

< th 태그 사용법>

위 사진상 테이블 첫번째 행에 td 대신 th 태그가 작성되어 있는데

이 상태로 웹 브라우저상에 출력이 되면 자동으로 제목으로 표시가 됩니다.

이 다음은 테이블에서 열과 행의 병합 입니다.

먼저 테이블에서는 각 셀의 필요에 따라서 알마든지 병합이 가능 합니다.

행이 병합되는 것을 행병합(rowspan)이라고 하고

열이 병합되는 것을 열병합(colspan)이라고 합니다.

<행병합(rowspan) 과 열병합(colspan) 사용법>

1. 위 이미지 상 "1행 1열" 부분을 행병합(rowspan) 2라고 지정하면

현재 셀 위치에서 2개의 행을 병합하겠다는 의미 입니다.

2. 그리고 위 이미지 상 제일 아래 "3행 1열" 부분을 열병합(colspan) 3이라고

지정하면 현제 셀 위치에서 3개의 열을 병합하겠다는 의미가 됩니다.

여기까지 간단한 테이블 태그 열과 행의 병합 작성법에 대해서

알아 보았으며 이 다음은 마지막 캡션(caption) 태그에 대해서 알아 보도록 하겠습니다.

먼저  캡션(caption) 태그란?

테이블에 제목을 삽입하는 태그로 사용법은 아래와 같이 간단 합니다.

< 캡션(caption) 태그 사용법 >

위 이미지상 캡션(caption) 태그는 table 태그 작성 후 최 상위에 작성해야

상단 테이블 제목으로 웹 브라우저상에 표시가 됩니다. ^^

여기까지  HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그

 사용법에 관련되어 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보는게 더 이해하기 쉽습니다.

이상  HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그 - 텍스트 표시 (7)에 

관련된 포스팅을 마치도록 하겠습니다.