#05 HTML 태그의 이해 -2. table 태그

=======================================================

Keyword:

 

<table> <tr> <td>

 

table 옵션 

cellpadding

cellspacing

border

width 

 

td 옵션

width

height

width

 

<caption>

============================================================================

 

테이블 태그 : 표를 만들 때 사용한다.

 

                 - 웹초기 테이블 레이아웃 구조로 표현 

                 - 주로 표를 만들 때 사용

            **  - <th>  자동 중간 정렬 / 굵게 표현

            **  - 기본적으로 테이블 내용의 세로 정렬은 중간 

태그	설명
<table>	표의 시작과 끝, 테이블의 전체
<tr> </tr>	줄의 시작과 끝 (행을 만드는 태그)
<td> </td>	칸의 시작과 끝 (열을 만드는 태그)
<th> </th>	테이블의 헤더 부분을 만드는 태그 (제목 역할)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<table> : 표의 시작과 끝, 테이블의 전체 

<table>

<table>안에 <tr>, 그리고 <tr> 안에 <td>를 넣는다. 

그러나 이것만으로는 표가 표현되지 않는다.

<table border="1">

이처럼 table 태그 옆에 border 값을 넣어서 표를 나타나게 할 수 있다.

여기서 border 는 여러가지 옵션들 중 하나인데, 

 

옵션에 대해서는 이따 알아보겠다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<td> : 칸의 시작과 끝 (열을 만드는 태그)

<td>

이처럼 <td>를 두번 쓰면 가로로 2열이 된다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

<tr> : 줄의 시작과 끝 (행을 만드는 태그)

<tr>

<tr>에 묶인 문장 전부를 두번 쓰면 위처럼 가로로 두행이 이루어진다.

 

+

<tr>

한 <tr>안에 <td>를 세번 반복하고

<tr>에 묶인 문장 전부를 세번 반복하여

위처럼 3 열 3 행 으로 이루어졌다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

<th> : 테이블의 헤더 부분을 만드는 태그 (제목 역할)

<th> 사용

첫번째 행의 <td>를 <th> 로 바꾸어 헤더 부분을 만들어 냈다. 

 이때,  

 **<th> 를 사용하여 "자동중간 정렬, 굵게 표현됨" 을 알 수 있다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

여기서 옵션에 대해서 얘기해 보겠다. 

table 옵션	설명
cellpadding = "0"	칸의 여백
cellspacing = "0"	border의 여백
border = "숫자"	선을 통해 결과값 확인 옵션
width = "숫자"	표의 전체 넓이

td 옵션	설명
width = "숫자"	칸의 넓이
height= "숫자"	선을 통해 결과값 확인 옵션
width= "숫자"	표의 전체 넓이

**내용의 양에 따라 폭길이가 달라짐 

**차후 스타일에 습득에 따라 사용하지 않아도 되는 옵션./ html에서는 스타일 시트 활용

 

 

옵션 사용 예시

border ="1" : 선을 통해 결과값을 나타냈다.

cellpadding = "0" : 칸의 여백이 "0" (없다.)

cellspacing = "0" : border의 여백이 "0" (없다.)

 

 

옵션들 + width옵션 사용

width = "500" : 표의 전체 넓이를 500으로 설정

 

 

cellpading = "10" : 여백을 10으로 함

cellspcing = "10" : border의 여백을 5로 함

나머지는 앞 상황과 동일.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

td옵션 중 하나인 width옵션 사용

width = "150" : 칸의 넓이를 150으로 함.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

td옵션 사용 

               width

               height

               bgcolor

 

-3번째 행의 <tr> 에서

height = "80" : 칸의 높이를 80으로 함.

 

-3번째 행의 <tr> 에서 3번째 <td> 에 배경색상을 지정.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

이 앞까지 테이블을 만드는 법에 대해 얘기했다면

 

지금부터는 각 칸을 병합하는 방법에 대해 얘기해보겠다.

 

 

칸을 병합할 때는 colspan 과 rowspan 을 사용한다. 각각 가로병합, 세로병합이다.

2행2열 표를 만들었다.

여기서 첫번째 <tr>의 <th>를 하나 없애고 한 <th> 안에 colspan="2" 이라는 내용을 입력해주었다.

2를 입력한 이유는 묶을 칸의 개수가 2이기 때문이다. 

 

colspan (가로 병합)

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

세로 병합은 rowspan 을 사용하여 표현한다.

 

2행2열 표이다.

여기서 첫번째 <tr> 의 첫번째<th>에 rowspan= "2" 를 입력하고

 두번째 <tr>의 <td>하나를 없앴다.

 

여기서 rowspan="2" 를 입력한 이유는 묶을 칸의 개수가 2이기 때문이다.

rowspan (세로 병합)

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

<caption>: 해당 테이블의 표의 의미, 타이틀

 

<tr> 이나 <td> 안이 아닌 <table> 안에 작성한다.