HTML Table

표를 만들어주는 태그. 뿐만 아니라 갤러리, 웹사이트 전체의 레이아웃 배치할때도 사용할 수 있고 다양하게 응용이 가능하다.

- 테이블의 구성 요소

• ＜table＞ : 테이블을 만드는 태그
• ＜th＞ : 테이블의 열의 제목을 만드는 태그 defualt값 (가운데 정렬, 굵은 글씨)
• ＜tr＞ : 테이블의 행을 만드는 태그 (table row)
• ＜td＞ : 테이블의 열을 만드는 태그 (table data)
• ＜caption＞ : 테이블의 제목 table의 가장 첫 번째 자식으로 와야된다.
  (접근성에 있어서 필수)
• ＜thead＞ : 테이블의 헤더 영역 지정
• ＜tbody＞ : 테이블의 바디 영역 지정
• ＜tfoot＞ : 테이블의 풋 영역 지정
• ＜colgroup＞ : 하나 이상의 열(col)을 그룹지을때 사용 자식으로 ＜col＞만 가질 수 있다.

-테이블을 만드는 순서

<table>
	<th>테이블 만들기</th>
	<tr>
		<td>첫 번째</td>
		<td>두 번째</td>
	</tr>
</table>

제일 바깥쪽에는 ＜table＞＜/table＞써주고 안에 가장위에 ＜th＞＜/th＞ 테이블헤더 기본값은 굵은 글씨체에 가운데 정렬 (하지만 ＜th＞안쓰고 그냥 바로 ＜tr＞을 활용하여 테이블 헤더를 만드는 경우가 더많다.)

- 테이블 디자인 변경

• border : 테이블의 테두리
  HTML자체에 줘야 CSS로 주는것보다 편하고 CSS로 줄때는 th tr td 경우에따라 줘야하기 때문에 번거롭다. ＜table border="1"＞＜/table＞이렇게 주는경우가 많고 이러면 살짝 공백이 생기게되는데 그럴때 CSS로 table에 border-collapse:: collapse;를 주게되면 깔끔하게 짤수있다.
• bordercolor : 테이블의 테두리 색상
• width : 테이블의 가로 크기
• height : 테이블의 세로 크기
• align : 정렬
  주는 방법은 여러가지가 있다. 태그에 align="center"를 주거나 CSS로 줄때는 유의사항이 하나 있다. 그건 table > tr 하면 CSS적용이 되지않는다 F12를 누르게되면 table아래에 tbody가 숨겨져 있는걸 확인할수있다 HTML에서
  ＜tbody＞를 안써줘도 브라우저가 인식하기에는 이렇게된다. 그렇게 때문에 직계를 쓸라면 table > tbody > tr 이런식으로 써주거나 CSS를 적용하려는 곳에 class 선택자나 id선택자를 이용해서 CSS를 적용해줘야 한다.

• bgcolor : 배경색

• cellspacing : 셀간의 간격을 지정한다.

• colspan : 가로 합병 (열 합병)

• rowspan : 세로 합병 (행 합병)

  colspan을 쓰건 rowspan을 쓰건 쓰게되면 병합이 되기때문에 필요에 따라 td를 삭제시켜야 table이 딱 떨어지게 된다.

결과창