표 만들기

표의 구성 요소 알아보기

- 표는 행과 열 그리고 셀로 이루어진다.

- 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미한다.

- 표를 만들려면 표를 만드는 태그와 행을 만드는 태그, 열을 만드는 태그가 필요하다.

 

표를 만드는 <table>, <caption> 태그

- 표의 시작과 끝을 알려 주는 <table>과 </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다.

- 표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용한다.

- <caption 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다.

 

 

행을 만드는 <tr> 태그와 셀을 만드는 <td>, <th> 태그

- <table> 태그만 작성하면 표가 만들어지지 않는다. <table> 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 지정해야 한다.

- <tr> 태그는 행을 만들고 <td> 태그는 행 행안에 있는 셀을 만들기 때문에 <table> 태그 안에 <tr>,<td> 태그가 모두 모여야 하나의 셀을 만들 수 있다.

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

- <th> 태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열디므로 다른 내용에 비해 눈에 띈다.

<h2>상품 구성</h2>
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <tr>
      <th>용도</th>
      <th>중량</th>
      <th>개수</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>선물용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>35,000원</td>
    </tr>
    <tr>
      <td>선물용</td>
      <td>5kg</td>
      <td>18~26과</td>
      <td>52,000원</td>
    </tr>
    <tr>
      <td>가정용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>30,000원</td>
    </tr>   
    <tr>
      <td>가정용</td>
      <td>5kg</td>
      <td>18~26과</td>
      <td>47,000원</td>
    </tr>   
  </table>

 

---

표의 구조를 지정하는 <thead>, <tbody>, <tfoot> 태그

- 일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래쪽에 합계나 요약 내용을 표시하기도 한다.

- 이런 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋다.

- 이 때 <thead>와 <tbody>, <tfoot> 태그를 사용한다.

- css를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수 있다.

 

방 이름	대상	크기	가격	<thead>
유채방	여성 도미토리	4인실	1인 20,000원	<tbody>
동백방	동성 도미토리
	가족 1팀
천혜향방	-
바깥채 전체를 렌트한다.				<tfoot>

 

 <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>개수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>선물용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td>가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>가정용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>

 

---

행이나 열을 합치는 rowspan, colspan 속성 알아보기

- 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td> 태그나 <th> 태그에서 이루어진다.

- 행을 합치려면 rowsapn 속성을 사용하고, 열을 합치려면 colsapn 속성을 사용해서 몇개의 셀을 합칠지 지정하면 된다.

 

<table>
    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>개수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>

 

---

열을 묶어주는 <col>, <colgroup> 태그

- 단순히 표를 만들기만 하는 것이 아니라 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 한다.

- 그럴 때 사용하는 태그가 <col> 태그와 <colgroup> 태그이다. 

- <col>태그는 열을 1개만 지정할 때 사용하고, <colgroup> 태그는 <col> 태그를 2개 이상 묶어서 사용한다.

- <colgroup>, <col> 태그는 반드시 <caption> 태그 다음에 써야 한다. (표의 내용이 시작 되기 전에 열의 상태를 알려주는 것)

- <col> 태그를 사용할 때는 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 한다.

 

<table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>

- 이때 같은 스타일 속성을 사용하는 <col> 태그가 있다면 span 속성을 사용해서 묶어 줄 수 있다.

 <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col span="2" style="width:150px">
    </colgroup>
    <thead>

 

 

---

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]