04. HTML5와 table의 호환성

HTML5에서 다시 태어난 table...!

1. HTML5부터 달라진 table태그?!?!

※ 기존의 <table>태그 역시 지원하지만,
아래의 기본 table 토대를 권고


html4까지는 table태그 사용 시 tr, td의 향연으로 표를 완성하면 되었는데, html5부터는 표에서 head부분은 어디인지, body부분은 어디인지, 표의 결말 부분은 어디인지를 나타내는 태그를 추가하여 표를 표현하는 코드를 업그레이드했다.

(예시)

항목	금액
연봉	7,400만원
총 합계	7,400만원

• head- 해당 표에서 '항목, 금액'의 1행은 표의 head이고,
• body- '연봉'과 그 값을 나타내는 2행은 body이고,
• foot- '총 합계'와 그 값을 나타내는 3행은 foot이다.
  
  
  

2. HTML5에서 권고하는 table의 기본 토대

<table>
	<thead>
		<tr><th>항목</th><th>금액</th></tr>
	</thead>
	<tbody>
	<tr><td>연봉</td><td>7,400만원</td></tr>
	</tbody>
	<tfoot>
		<tr><td>총 합계</td><td>7,400만원</td></tr>
	</tfoot>
</table>

• <thead>: 통상적으로 표의 맨 윗줄(이름, 금액, 기록 등 아래 내용을 통칭하는 항목들)
• <th>: thead에 있는 각 셀을 지칭
• <tbody>: 항목명 아래의 실 내용들
• <tfoot>: 총합계 처럼 마지막 란

(각 데이터마다 의미를 부여해주기 위해 이런 정보 써 줄 것을 HMTL5에서 제안)

3. table에서 사용되는 다양한 프로퍼티

• border 프로퍼티는 선굵기 선종류 선색
  세가지를 연달아 적어도 됨(, 없이)
  ex) border: 1px solid black;
• td {} 안에서
  color : 글자색
  font-size : 글자크기
• 태그 여러개에 공통의 프로퍼티를 적용시키고 싶으면 태그를 그냥 td, th {} 이렇게 연달아 적으면 됨
• 표 전체 테두리의 간격 처리
  html : cellspacing="0"
  css : border-collapse: collapse;
  (ex)
  table {
  border-collapse: collapse;
  }
  => border-collapse를 쓰면 border간의 간격이 없어짐

(ex)

1) border-collapse 프로퍼티 사용 O

2) border-collapse 프로퍼티 사용 X

4. caption 태그(table태그에 사용되는 css태그)

• caption 태그 : table 태그에서 표 제목을 표시하는 데에 사용
  (아래에 thead, th, tbody, tfoot 모두 그대로 들어감)
• 표는 표제목 아래에 표 머리글, 표 본문 으로 진행된다고 보면 됨
  (표 제목은 표 위에 써있음)
  
  
  

<참고>

• 주석(Comment) : 코드에 설명을 적는 것
  ㅡ 실행되지 않음
  ㅡ html 주석 작성 방법 : <!--설명-->
  ㅡ css 주석 작성 방법 : /*설명*/
  
  
  

잠깐❗ 깨알 IT 지식 막간 IT 기초지식

• Version(버전)
  : 어떤 프로그램을 수정, 개선한 것
  (새로워질때마다 번호를 늘려감)

ex) v1, ver1.2, HTML5 / iOS v1.0 1.1 1.2.1 ...
1.0beta 1.0alpha
(완벽하게 만들긴 했는데 아직 많은사람들이 이용하지 않아서 문제가 발생할수도 있는 경우)

• compatibility(호환성)
  기존 프로그램에서 지원하는 문법도 웬만하면 지원함

ex) html5는 css언어와 더 구별하는데 집중
=> center, h 태그는 비권장, CSS언어로 쓸 것을 권장
<sytle="text-align:center;">

(center, h태그도 쓸수는 있음 => 이게 바로 호환성)