html <table>태그 정리

학원에서 table 사용을 되도록 쓰지 말라고 시켜서
처음 배울 때 빼고 1나도 안 쓰다가 이번에 작업하면서 너무 많이 사용해서 당황했다.
앞으로 table 태그도 많이 사용할 것 같으니 공부해두자.
헷갈릴 때마다 보도록 하자!

table 태그의 기본 구조

<table>
	<caption></caption>
    <thead>
    	<tr>
        	<th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
    </tbody>
</table>

1. 테이블 기본 태그

1-1. caption
테이블 전체의 제목을 표시
table 태그 바로 다음에 작성
table과 caption 사이에는 다른 태그 사용 불가!
*사용 시 숨기기

1-2. tr : table row
:행을 정의하는 태그

1-3. td : table data
:데이터를 작성하는 태그
*tr태그 안에 td태그 작성할 것

2. 테이블 그룹 태그
: 전체 레이아웃에 영향을 미치지 않는다.

2-1. thead : 테이블 행에서 제목 해당 한번만 사용
2-2. tbody : 테이블 내용
2-3. tfoot : 테이블 행에서 합계 같은거 정리 한번만 사용

3. 테이블 병합 속성

3-1. <colspan="n">
: 가로 칸 합칠 때 사용

3-2. <rowspan="n">
: 세로 칸 합칠 때 사용

3-3. 가로 세로 합칠 때는 둘 다 적는다.
합쳐지는 칸은 삭제하고 제일 처음 시작하는 칸에 속성을 적용한다.

4. 중복된 선을 제거해주는 {border-collapse : collapse;}

5. 간단 연습

<table>
	<thead>
    	<tr>
        	<th>지역</th>
            <th>이름</th>
        </tr>
    </thead>
    <tbody>
      <tr>
          <td rowspan="2">서울</td>
          <td>김ㅇㅇ</td>
      </tr>
      <tr>
          <!-- <td>서울</td> 중복 삭제 -->
          <td>이ㅇㅇ</td>
      </tr>
      <tr>
          <td>경기</td>
          <td>박ㅇㅇ</td>
      </tr>
      <tr>
          <td rowspan="2">부산</td>
          <td>유ㅇㅇ</td>
      </tr>
      <tr>
          <!-- <td>부산</td> 중복 삭제 -->
          <td>최ㅇㅇ</td>
      </tr>
    </tbody>
</table>

결과창

<table>
	<thead>
    	<tr>
        	<th colspan="3">보고서 제출여부</th>
      		<!-- <th>보고서 제출여부</th> -->
            <!-- <th>보고서 제출여부</th> -->
        </tr>
        <tr>
            <th>1차</th>
            <th>2차</th>
            <th>3차</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>제출</td>
            <td>제출</td>
            <td>미제출</td>
        </tr>
    </tbody>
</table>

결과창

더 복잡한 레이아웃도 많이 연습해보자..!!