[HTML] 표 만들기

✨표를 만드는 <table>, 제목을 만드는 <caption> 태그

<!-- 기본형 -->
<table>
  <caption>표 제목</caption>	<!-- 제목은 표의 위쪽 중앙에 표시됨 -->
</table>

✨행을 만드는 <tr> 태그와 셀을 만드는 <td>, <th> 태그

• <table> 태그만 작성하면 표가 만들어지지 않음
• <table> 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 지정해야 함
• <tr> : 행을 지정
• <td> : (행 안에 있는) 셀을 지정
  → <table> 태그 안에 <tr> , <td> 태그가 모두 모여야 하나의 셀을 만들 수 있다.
• 표의 제목 행에 셀을 만들 때는 <td> 태그 대신 <th> 태그를 사용한다. <th> 태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열되므로 다른 내용에 비해 눈에 띄기 때문.

예시 코드

<table>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>

결과

1행 1열	1행 2열
2행 1열	2행 2열

✨표의 구조를 지정하는 <thead>, <tbody>, <tfoot> 태그

• 표 아래쪽에 합계나 요약 내용을 표시하는 경우, 표의 구조를
  제목 / 본문 / 요약이 있는 부분으로 나누어 놓는 것이 좋다.
• 표의 구조를 지정하는 것의 장점
  • 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있다.
  • CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수 있다.
    
    

✨행이나 열을 합치는 rowspan, colspan 속성 알아보기

• rowspan : 행을 합칠 때
• colspan : 열을 합칠 때
  
  

✨열을 묶어 주는 <col>, <colgroup> 태그

• 원하는 열을 선택하고자 할 때 사용하는 태그
• <col> : 열을 1개만 지정할 때
• <colgroup> : <col> 태그를 2개 이상 묶어서 사용

<!-- 기본형 -->
<colgroup>
  <col>
</colgroup>

• 반드시 <caption> 태그 다음에 써야 함
• 표 전체 열의 개수만큼 <col> 태그를 넣어야 함
  
  
  

  출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)