lec05 테이블 table, thead, tbody, tfoot, caption

*테이블

- 테이블은 시간표, 달력, 게시판에만 쓴다.

- 테이블은 줄단위로 작성한다.

- 한줄을 먼저 작성한 뒤 복사 붙이기로하면 빠르다.

 

+ 테이블 한줄은 <tr></tr> 사용하고 (table row)

+ 테이블 한칸의 데이터는 <td></td> (table data)

 

   <h1>table</h1>
   <table>
      <tr>
         <td>구분</td><!-- table data -->
         <td>title 1</td>
         <td>title 2</td>
         <td>title 3</td>
      </tr><!-- table row -->
   </table>

기본구조는 수집에 용이하지 않다.

 

아래처럼 <thead>, <tbody>,  <tfoot>으로 작성해준다.

<thead>에 있는 <td>들을 모두 <th>로 바꿔줌 (table heading)

각줄의 첫번째 데이터들도 <th>로 빠꿔준다.

<th>가 들어간 부분은 가운데 정렬과 볼드로 바뀐다.

 

<table border="1">
      <thead>
         <tr>
            <th>구분</th><!-- table heading -->
            <th>title 1</th>
            <th>title 2</th>
            <th>title 3</th>
         </tr><!-- table row -->
      </thead>
      <tbody>
         <tr>
            <th>no.1</th>
            <td>title 11</td>
            <td>title 12</td>
            <td>title 13</td>
         </tr>
         <tr>
            <th>no.2</th>
            <td>title 21</td>
            <td>title 22</td>
            <td>title 23</td>
         </tr>
         <tr>
            <th>no.3</th>
            <td>title 31</td>
            <td>title 32</td>
            <td>title 33</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <th>total</th>
            <td>total 1</td>
            <td>total 2</td>
            <td>total 3</td>
         </tr>
      </tfoot>
   </table>

 

 

*세로줄을 대표하는 제목 작성

- scope="col" 사용

<tr>
    <th scope="col">구분</th><!-- table heading -->
    <th scope="col">title 1</th>
    <th scope="col">title 2</th>
    <th scope="col">title 3</th>
</tr><!-- table row -->

 

*가로줄을 대표하는 제목 작성

- scope="row" 사용

<tbody>
  <tr>
    <th scope="row">no.1</th>
    <td>title 11</td>
    <td>title 12</td>
    <td>title 13</td>
  </tr>
  <tr>
    <th scope="row">no.2</th>
    <td>title 21</td>
    <td>title 22</td>
    <td>title 23</td>
  </tr>
  <tr>
    <th scope="row">no.3</th>
    <td>title 31</td>
    <td>title 32</td>
    <td>title 33</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <th scope="row">total</th>
    <td>total 1</td>
    <td>total 2</td>
    <td>total 3</td>
  </tr>
</tfoot>

 

*테이블의 설명

<caption></caption>사용

<h1>table</h1>
   <table border="1">
      <caption>
         <h2>분기별 실적표</h2>
         <p>2018년도 4/4분기 매출 실적표</p>
      </caption>

 

*셀 합치기

 

 

1.가로 부분 (data 12, 22)

- colspan="칸수"

데이터 12, 22가 두칸을 다쓸때
<tr>
    <th scope="row">no.1</th>
    <td>title 11</td>
    <td colspan="2">title 12</td>
</tr>
<tr>
    <th scope="row">no.2</th>
    <td>title 21</td>
    <td colspan="2">title 22</td>
</tr>

 

 

2.세로 부분 (data 11)

- rowspan="칸수"

<tr>
    <th scope="row">no.1</th>
    <td rowspan="2">title 11</td>
    <td colspan="2">title 12</td>
</tr>