Tuesday_May_12
.
.
.

<table>

다음 태그는 테이블을 생성한다.

<table>
</table>

하지만 이렇게 열고 닫기만 하면 아무 효과가 없다.

<tr> = table row

다음 태그는 테이블에 행을 추가한다.

행...?? 쉽게 말해 가로줄이다.

만약 행(가로줄)이 3줄인 테이블을 만들고 싶다면
다음과 같이 작성하면 된다.

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

<td> = table data

하지만 table 태그와 마찬가지로 tr 태그만 쓴다고 보이진 않는다.
table 태그는 tr 태그로 행을 줘야하고, 행 안에 td 태그로 데이터를 추가해야한다.

tr 태그의 예제 코드에서 각 행마다 데이터를 2개씩 추가해보겠다.

<table>
  <tr>
    <td>첫 번째 행 첫째 칸</td>
    <td>첫 번째 행 둘째 칸</td>
  </tr>
  <tr>
    <td>두 번째 행 첫째 칸</td>
    <td>두 번째 행 둘째 칸</td>
  </tr>
  <tr>
    <td>세 번째 행 첫째 칸</td>
    <td>세 번째 행 둘째 칸</td>
  </tr>
</table>

첫 번째 행 첫째 칸	첫 번째 행 둘째 칸
두 번째 행 첫째 칸	두 번째 행 둘째 칸
세 번째 행 첫째 칸	세 번째 행 둘째 칸

이렇게 td 태그 안에 데이터까지 주게 되면 끝~!

<th> = table header

th 태그는 표 제목의 데이터의 의미를 좀 더 명확하게 보여준다.

다음 두 예제를 비교해보자.

<table>
  <tr>
    <td>3학년 1반</td>
    <td>3학년 2반</td>
  </tr>
  <tr>
    <td>34명</td>
    <td>31명</td>
  </tr>
</table>

3학년 1반	3학년 2반
34명	31명

여기서 첫 번째 행의 데이터인 td 태그를 없애고 th 태그를 넣어 보겠다.

<table>
  <tr>
    <th>3학년 1반</th>
    <th>3학년 2반</th>
  </tr>
  <tr>
    <td>34명</td>
    <td>31명</td>
  </tr>
</table>

3학년 1반	3학년 2반
34명	31명

차이가 보인다면 PASS~!

<colspan> & <rowspan>

<colspan>

만약에 위의 예제에서 1반과 2반의 학생 수가 모두 32명으로 동일하다고 치면,
굳이 칸을 나눌 필요가 있을까?

해서! colspan 등장.

colspan이란 'col + span'인데, 여기서 col은 영어에서 열을 뜻하는 column의 약자이다.

<table>
  <tr>
    <th>3학년 1반</th>
    <th>3학년 2반</th>
  </tr>
  <tr>
    <td colspan="2">34명</td>
  </tr>
</table>

3학년 1반	3학년 2반
32명

이렇게 왼쪽에서 부터 n칸을 묶는다.

<rowspan>

rowspan 역시 'row + span'이고 여기서 row는 영어의 행이다.

위에서 부터 아래로 n칸을 묶는다.

<table>
  <tr>
    <td rowspan="2">이민호</td>
    <td>키</td>
    <td>몸무게</td>
  </tr>
  <tr>
    <td>?cm</td>
    <td>?kg</td>
  </tr>
</table>

이민호	키	몸무게
?cm	?kg