HTML에 표 삽입하기!

HTML에 표 삽입하기!

표 만들기

• 표는 행(row)과 열(column) 그리고 셀(cell)로 이루어집니다.
• 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미합니다.
• <table>과 </table> 태그는 표의 시작과 끝을 알려 줍니다.
• <caption> 태그를 사용하여 표에 제목을 붙일 수 있습니다.

<table>
   <tr>
       <td>1행 1열</td>
       <td>1행 2열</td>
   </tr>
   <tr>
       <td>2행 1열</td>
       <td>2행 2열</td>
   </tr>
</table>

• <tr> 태그는 행을 지정하고 <td> 태그는 셀을 지정합니다.
• <th> 태그는 표의 제목 행에 셀을 만들 때 사용합니다.
• <thead>와 <tbody>, <tfoot> 태그는 table의 ‘t’와 제목(head), 본문(body), 요약(foot)을 각각 합친 말입니다.

즉

이름	가격
이승호	50,000원
이호승	20,000원
총합	70,000원

이 표에선 이름,가격,우선순위가 thead가 되며  이승호,이호승,5만원,2만원 등은 tbody가 됩니다.

마지막 총합은 tfoot으로 만들 수 있습니다.

<table>
  <caption>표 구성하기</caption>
  <thead>
    <tr>
      <th>이름</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>이승호</td>
      <td>50,000원</td>
    </tr>
    <tr>
      <td>이호승</td>
      <td>20,000원</td>
    </tr>  
  </tbody>
  <tfoot>
    <tr>
      <td>총합</td>
      <td>70,000원</td?
    </tr>
  <tfoot>
</table>

 

 

 

 

행과 열 합치기

• 행을 합치려면 rowspan 속성을 사용하고 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정하면 됩니다.

<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>

예 :

이름	가격
이승호	50,000원
	20,000원
총합	70,000원

 

<tbody>
    <tr>
      <td rowspan="2">이승호</td>
      <td>50,000원</td>
    </tr>
    <tr>
      <td>20,000원</td>
    </tr>  
</tbody>

 

 

 

 

열을 묶어주기

원하는 열을 선택하여 특정 열에 스타일 속성을 지정할 수 있습니다.

예 : 첫열에 구분색 넣기

<colgroup>
   <col style="background-color:#eee;">
</colgroup>

• <col> 태그는 열을 1개만 지정할 때 사용하고, <colgroup> 태그는 <col>태그를 2개 이상 묶어서 사용합니다.
• <colgroup>, <col> 태그는 반드시 <caption> 태그 다음에 써야 합니다.
• <col> 태그를 사용할 때는 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 합니다.
• 같은 스타일 속성을 사용하는 <col> 태그가 있다면 span 속성을 사용해서 묶어 줄 수 있습니다.

예시 : 열을 묶어 구분색 입히기

이름	가격
이승호	50,000원
	20,000원
총합	70,000원