[Web/HTML] HTML - 표 만들기

✏️ 표를 만드는 <table>, <caption> 태그

// 표의 시작과 끝을 알려 주는 <table> </table> 태그 사이에 표와 관련된 태그 내용 넣기
// <caption> 태그를 사용해서 표의 제목을 넣기, 제목은 자동으로 중앙 정렬

<table>
  <caption>표의 제목</caption>
</table>

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

// <tr> 태그를 통해서 표의 행을 만들고 <td> 태그를 통해서 셀을 만들기
// <td> 태그를 통해 표의 제목 행에 셀을 만들기

<table>
  <caption>표의 제목</caption>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>

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

제목과 본문 요약이 있는 부분으로 나누고 싶을 때 위의 태그들을 사용

표의 본문이 길어 한 화면을 넘어갈 경우, JS를 이용해 <thead>와 <tfoot> 태그는 표의 위아래에 고정하고

<tbod> 태그만 스크롤하도록 만들 수 있음

 

✏️ 행이나 열을 합치는 rowspan, colspan 속성

// 표는 <tr>태그와 <td>태그를 이용해서 여러 셀로 구성함
// 여기서 셀을 합치는 속성을 사용할 수 있음, 한글에서 셀을 합치는 것과 같은 원리

<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>

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

// 표를 만들기 위해서는 특정 열에 배경색을 넣거나 너비를 바꿀 수 있어야 함, 이럴 때 사용하는 태그가 <col>과 <colgroup> 태그
// 단 <colgroup>태그를 먼저 지정한 후 그 태그 안에서 col의 개수만큼 <col>태그를 선언해야 함

<colgroup>
  <col>
</colgroup>