Today I Learned 7 - HTML tables

오늘은 HTML에서 Table과 Form을 배웠다.
내용이 정말 많다...
처음 배우는 개념들이라 헷갈려서 복습이 필수일듯!

---

Create a Table

<table>

</table>

< table >태그 안에 표의 모든 데이타가 들어간다.

Table Components

표의 구성요소에는 크게

• 행 rows
• 열 columns
• 셀 cell (데이터의 내용이 들어가는)

의 세가지이다.

1) table rows

<table>
  <tr></tr>
  <tr></tr>
</table>

• < tr> ~ < /tr>에 해당되는 부분이 한 열이다.

2) table data

<table>
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

• < td>와 < /td>사이에 해당 줄에 들어갈 정보를 넣어준다.
• 한 행에 두가지 데이터가 들어가면 자동으로 한 줄에 셀 두개가 생긴다.

73

81

(위의 코드를 실행한 모습)

3) table headings

<table>
  <tr>
    <th></th>                        // blank heading
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
	<tr>
    <th scope="row">Temperature</th>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

• table data와 마찬가지로 table row안에 들어가야한다.
• 해당하는 행과 열에 들어가는 데이타들의 정보다.

	Saturday	Sunday
Temperature	73	81

scope attribute

• scope은 해당하는 heading이 행과 열중 어느 정보를 가리키는지에 대한 속성이다.

1. row : header가 줄에 해당할 때
2. col : header가 열에 해당할 때
   
   

4) spanning columns / rows

spanning columns

<td colspan="1">Table Data</td>

• table data가 여러 열에 걸쳐 있을 때
  
  

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

Monday	Tuesday	Wednesday
Out of Town	Back in Town

(위의 코드를 실행한 모습)

spanning rows

<td rowspan="1">Table Data</td>

• table data가 여러 행에 걸쳐 있을 때
  
  

헷갈림 주의!

• colspan = 가로로 셀 병합
• rowspan = 세로로 셀 병합
  
  

5) table body

<tbody> </tbody>

• table이 길어지면 table body를 이용해 섹션을 나눌 수 있다.
• 한 테이블 안에서 여러개 사용 가능하다!
  
  

6) table head

<thead> </thead>

• table body가 여러 < section >으로 나뉘었을 때 각 섹션에 header를

<table>
	<thead> ~ </head>
    <tbody> ~ </tbody>
    <tfoot> ~ </tfoot>
</table>

• 각단의 첫 셀만 < thead >안에 들어갈 수 있다.
• scope 속성으로 "row"나 "col"을 넣어 해당 header의 행과 열 정보를 넣을 수 있다.
  
  

7) table footer

<tfoot> </tfoot>

• 표의 가장 아랫부분을 < tfoot> 으로 나눌 수 있다.

<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>