04-3 표 만들기

웹 문서에서 자료를 정리할 때 자주 쓰는 태그는 표임. 
이 장에서는 표를 만들 때 사용하는 여러 가지 태그를 알아보겠음.

>> 표의 구성 요소 알아보기
표는 행과 열 그리고 셀로 이루어짐. 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미함.
행은 row , 열은 column을 뜻함

>> 표를 만드는 <table>, <caption> 태그
표의 시작과 끝을 알려 주는 <table>과 </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣음.
표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption>태그를 사용함.
<caption> 태그를 사용하면 제목은 표 위쪽 중앙에 표시됨.

ex) <table>
<caption>표 제목</caption>
    </table>

>> 행을 만드는 <tr> 태그 / 셀을 만드는 <td>, <th> 태그 
<table> 태그만 작성하면 표가 만들어지지 않음. <table> 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 지정해야 함.
<tr>태그 : 행을 만듦 (table row)
<td>태그 : 행 안에 있는 셀을 만듦 (table data)
그러므로 <table> 태그 안에 <tr>, <td> 태그가 모두 모여야 하나의 셀을 만들 수 있음.

ex) <table>
<tr> ----> tr태그는 행을 지정함.
  <td>1행 1열</td> -----> td태그는 셀을 지정함.
  <td>1행 2열</td>
</tr>
<tr>
  <td>2행 1열</td>
   <td>2행 2열</td>
</tr>
    </table>

<th>태그 : 표의 제목 행에 셀을 만들 때 사용함. (table header)
<th>태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열되므로 다른 내용에 비해 눈에 띔. 

>> 표의 구조를 지정하는 <thead>, <tbody>, <tfoot> 태그
일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래쪽에 합계나 요약 내용을 표시하기도 함.
이런 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋음.
이때 <thead>와 <tbody>, <tfoot> 태그를 사용함.
태그 이름은 표를 뜻하는 table의 't'와 제목(head),본문(body),요약(foot)을 각각 합친 말임.
표의 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있음.
또한 CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수도 있음. 표의 본문이 길어 한 화면을 넘어갈 경우,
자바스크립트를 이용해 <thead>와 <tfoot>태그는 표의 위아래에 고정하고 <tbody> 태그만 스크롤하도록 만들 수 있음.
특히 이 방법은 내용이 긴 표를 여러 장 인쇄할 때도 각 장마다 표의 제목 부분과 요약 부분이 자동으로 인쇄되므로 편리함

>> 행이나 열을 합치는 rowspan, colspan 속성 알아보기
표는 <tr> 태그와 <th>태그, <td>태그를 이용해서 여러 셀로 구성함.
이때 여러 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있음.
행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td>태그나 <th>태그에서 이루어짐.
행을 합치려면 rowspan속성을 사용하고 열을 합치려면 colspan속성을 사용해서 몇 개의 셀을 합칠지 지정하면 됨.
ex) <td rowspan="합칠 셀의 개수">셀의 내용</td>
    <td colspan="합칠 셀의 개수">셀의 내용</td>
-- 셀을 합칠 경우에는 먼저 종이에 펜으로 직접 표를 그려 보고 어느 부분을 어떻게 합칠 것인지 미리 확인하는 것이 좋음.
그러면 실수를 줄일 수 있음. --

>> 열을 묶어주는 <col>, <colgroup>태그 (column)
단순히 표를 만들기만 하는 것이 아니라 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 함.
그럴 때 사용하는 태그가 <col>태그와 <colgroup>태그임. 
이름에서 알 수 있듯이 <col>태그는 열을 1개만 지정할 때 사용하고, <colgroup>태그는 <col>태그를 2개 이상 묶어서 사용함.
<colgroup>,<col> 태그는 반드시 <caption> 태그 다음에 써야함. 즉, 표의 내용이 시작되기 전에 열의 상태를 알려줌.
그리고 <col>태그를 사용할 때는 <colgroup>태그 안에 <col>태그를 포함해 표 전체 열의 개수만큼 <col>태그를 넣어야함.
즉, 스타일 속성을 지정하지 않은 열이 있을 경우에는 각각 <col> 태그를 작성해야 한다는 말임.
이때 같은 스타일 속성을 사용하는 <col>태그가 있다면 span속성을 사용해서 묶어 줄 수있음