[HTML] 목록과 표 태그

표를 만드는 태그

🌳 표(table)

<table> ~ </table> : 표 전체

<tr> ~ </tr> : 행

<td> ~ </td> : 셀

<th> ~ </th> : 제목 셀

 

예) 2*3 (2행 3열) 표

<table border="1">
  <caption>표 제목 연습</caption>
  <tr>
    <th>1행 1열(제목)</th>
    <td>1행 2열</td>
    <td>1행 3열</td>
  </tr>
  <tr>
    <th>2행 1열(제목)</th>
    <td>2행 2열</td>
    <td>2행 3열</td>
  </tr> 
</table>

  - caption 태그 : 표 제목

    제목이 위쪽 중앙에 표시된다.

    table 태그 바로 뒤에 작성하며, 한 번만 사용할 수 있다.

실행 결과

 

caption 태그 대신 figure 태그 사용하기

<figure>
  <figcaption>표 제목 연습</figcaption>
    <!-- figcaption을 </table> 태그 아래에 작성하면 '표 제목 연습'이 표 아래쪽에 작성된다. -->
<table border="1">
  <tr>
    <th>1행 1열</th>
    <td>1행 2열</td>
    <td>1행 3열</td>
  </tr>
  <tr>
    <th>2행 1열</th>
    <td>2행 2열</td>
    <td>2행 3열</td>
  </tr> 
</table>
</figure>

   - figure 태그 : 표 제목

     위치에 따라 표의 위나 아래에 제목을 표시한다.

   - table에 있는 caption 태그보다 다양하게 활용할 수 있으며, 표 뿐만 아니라 이미지나 동영상 등과 같은

     다른 부분에도 적용이 가능하다.

실행 결과

 

🌳 colspan, rowspan 속성 - 행 또는 열 합치기

- colspan 기본형

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

<th colspan="합칠 열의 개수"> 내용 </th>

 

- rowspan 기본형

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

<th rowspan="합칠 행의 개수"> 내용 </th>

 

<table border="1">
  <colgroup>
    <col style="width:100px;">
    <col style="width:300px;">
    <col style="width:100px;">
    <col style="width:300px;">
  </colgroup>
  <tr>
    <th>이름</th>
    <td>홍길동</td>
    <th>연락처</th>
    <td>010-1234-1234</td>
  </tr>
  <tr>
    <th>주소</th>
    <td colspan="3">서울시</td>
  </tr> 
  <tr>
    <th>자기소개</th>
    <td colspan="3">안녕하세요</td>
  </tr>
</table>

   - <th> 태그를 사용하면 해당 내용이 가운데 정렬이 되고, 진하게 표시된다.

실행 결과

 

🌳 <thead>, <tbody>, <tfoot> - 표 구조 정의하기

- 표의 구조를 제목 부분과 실제 본문 그리고 요약 부분이 있는 부분으로 나눈다.

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

- 시각 장애인도 화면 판독기를 통하여 표의 구조를 쉽게 이해할 수 있다.

- 표의 본문이 길 경우 자바스크립트를 이용하면 제목과 바닥 부분을 고정하고

  본문만 스크롤되도록 할 수 있다.

- 제목<thead>, 본문<tbody>, 요약<tfoot>에 태그를 각각 지정함으로써 각각의 스타일을 지정하기가 쉬워진다.

<table border="1">
  <thead>
   <tr>
    <th>방 이름</th>
    <th>대상</th>
    <th>크기</th>
    <th>가격</th>
   </tr>
  </thead>
  <tbody> 
  <tr>
    <th>유채방</th>
    <td>여성 도미토리</td>
    <td rowspan="3">4인실</td>
    <td rowspan="4">1인 20,000원</td>
  </tr>  
  <tr>
    <th rowspan="2">동백방</th>
    <td>동성 도미토리</td>
  </tr>
  <tr>
    <td>가족 1팀</td>   
  </tr>
  <tr>
    <th>천혜향방</th>
    <td>-</td>
    <td>2인실</td>
  </tr> 
  </tbody>
  <tfoot>
  <tr>
    <th colspan="4">바깥채 전체를 렌트합니다</th>
  </tr>
  </tfoot>
</table>

실행 결과

 

🌳 <col>, <colgroup> - 열끼리 묶어서 스타일 지정하기

- <col> 태그

  한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용한다.

  닫는 태그가 없다.

- <col> 태그에 span 속성을 사용하여 여러 열을 묶을 수 있다.

- <colgroup> 태그로 여러 열을 묶을 수도 있으나 <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 사용한다.

  닫는 태그가 있다.

- <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤에, <tr>, <td> 태그 전에 사용해야 한다.

- <colgroup> 태그 안에 있는 <col> 태그를 비롯하여 단독으로 사용한 <col> 태그의 개수와

  표의 열의 개수가 같아야 한다.

<table border="1">
          <caption>colgroup 연습</caption>
          <colgroup>
          <col>
          <col span="2" style="background-color:blue">
          <col style="background-color:yellow">
          </colgroup>
          <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
          </tr>
          <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
          </tr>
</table>

실행 결과