3-1. html 표 <table> 태그

우선 표를 만들기 위해서는

표의 시작과 끝을 알려주는 <table>...</table> 태그를 표시한 후에 표와 관련된 태그를 모두 넣어준다. 

 

1. <caption>...</caption>

표에 제목을 추가하고 싶을 때 사용하는 태그이다. 

 

2. <tr>..</tr>, <td>..</td>

<tr> 태그는 행을 만들고, <td> 태그는 행 안에 있는 셀을 만든다. 

이 두 태그는 모두 사용해야 하나의 셀을 만들 수 있다. 

 

3. <th>..</th>

표의 제목 행에 셀을 만들 때는 <td> 태그 대신 <th> 태그를 사용한다. 

 

4. <thead>, <tbody>, <tfoot>

표에 제목과 본문, 요약이 있는 부분으로 표의 구조를 나눌 수 있다. 

 

5. rowspan, colspan 

rowspan은 행을 합칠 때 사용하는 속성이다.

colspan은 열을 합칠 때 사용하는 속성이다. 

 

6. <col>, <colgroup>

특정 열에 배경색을 넣거나 너비를 바꾸려는 등 원하는 열을 선택해서 지정해줘야하는데, 이럴때 <col>과 <colgroup>

태그를 사용해준다. 

주의할 점은 <col>과 <colgroup> 태그는 반드시 <caption> 태그 다음에 써서 표의 열 상태를 알려준다. 

 

 

 

7. 예제 

예제

 

- 이 코드는 우선 <caption>으로 표의 제목을 '선물용과 가정용 상품 구성'으로 지정해줬다. 

- 열을 선택할 수 있도록 <col>과 <colgroup> 태그를 사용했으며, 이 표는 4개의 열이 존재하므로 각각의 열에서 원하는 열에 속성을 지정해 스타일을 적용해줬다. 

- 그리고 첫번째 행에서는 표의 제목 셀을 만들기 위해 <th> 태그를 사용했다. 

- <rowspan="2"> 을 통해 행 2개를 합쳤다. 

 

 

8. 테이블에 스타일 적용하기 

테이블에 이 스타일을 적용해주지 않으면 그냥 테두리가 없는 형식으로 브라우저에 나타나게 되므로 

스타일을 지정해줘야한다.