📝 표를 만드는 HTML 태그들!

표를 만드는 태그 <table>의 기본 구조

📥입력

<table>
  <thead>
    <tr>
      <th>열제목1</th>
      <th>열제목2</th>
      <th>열제목3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>행제목1</th>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <th>행제목2</th>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>정리</th>
      <td>정리1</td>
      <td>정리2</td>
    </tr>
  </tfoot>
</table>

📤출력

열제목1	열제목2	열제목3
행제목1	내용	내용
행제목2	내용	내용
정리	정리1	정리2

 

• <table>는 <thead>, <tbody>, <tfoot>으로 구성되어 있다.
• 그리고 <tr>로 행(row)마다 묶어져 있으며, <tr> 안에는 제목(head)인 <th>, 내용(data)인 <td>가 들어갈 수 있다.

 

HTML 표에 추가할 수 있는 속성

colspan, rowspan : 행 합치기, 열 합치기

📥입력

<table>
  <tr>
    <td rowspan="2">합친 행</th> //rowspan="합치고 싶은 셀 갯수"
    <td>내용</td>
    <td>내용</td>
  </tr>
  <tr>
    <td>내용</td>
    <td>내용</td>
  </tr>
  <tr>
    <td>내용</td>
    <td colspan="2">합친 열</td> //colspan="합치고 싶은 셀 갯수"
  </tr>
</table>

📤출력

 

합친 행	내용	내용
	내용	내용
내용	합친 열

rowspan

• rowspan은 각 행에서 같은 위치에 있는 셀끼리 합쳐진다.
• 합쳐진 행은 세로로 길게, 같은 열 위에 위치하게 된다.
• ⭐ 주의할 점으로 표가 정상적으로 표시되려면 아래 행들에서는 합친 행 만큼 셀들을 빼줘야 된다.
  (예를 들어 위쪽 행에서 rowspan을 통해 셀을 합쳤다면 그 다음 행들에서는 <td> 하나를 빼줘야 된다.)

 

colspan

• colspan은 각 열에서 같은 위치에 있는 셀끼리 합친다.
• 합쳐진 열은 가로로 길게, 같은 행에 위치하게 된다.
• ⭐ 주의할 점은 표가 정상적으로 표시되려면 같은 행에서 합친 셀만큼 셀들을 빼줘야 된다.
  (예를 들어 colspan으로 셀을 합치면 합친 셀 만큼 다른 셀 <td>는 빼줘야 된다.)

 

aira_describedby : 표에 대한 설명 제공하기

<p id="summary">요약내용<P>
<table aira_describedby="summary">
  ...
</table>

 

 aira_describedby="summary"라 적고, 다른 곳에 id="summary"라 설정 후 적으면 표에 대한 설명을 제공하게 된다. 웹 접근성 측면에서 중요하다.

 

HTML 표에 추가할 수 있는 태그

<caption>, <figcaption> : 표에 제목 붙이기

<!-- caption -->
<!-- table 안에 존재 -->
<table>
  <caption>
    <p>표 제목</p>
  </caption>
...
</table>

<!-- figcaption -->
<!-- figure가 한번 더 감싼다, table 밖에 존재 -->
<figure>
  <figcaption>
    <p>
      표 제목
    </p>
  </figcaption>
  <table>
    ...
  </table>
</figure>

<caption>과 <figcaption> 둘 다 표에 제목을 붙이는 방법! 차이점은?

caption과 figcaption 차이점

• caption : <table>안에 존재, 위에 중앙정렬, 표만을 위한 방법
• figcaption : <table> 밖에 존재, 위 또는 아래에 달 수 있음, 중앙정렬 아님, 표 뿐만이 아니라 이미지 등에도 사용 가능!

 

<col>, <colgroup> : 여러 열 묶어 스타일 지정하기

<table>
  <caption>colgroup 연습</caption>
  <colgroup>
    <col>
    <col span="2" style="background-color:blue;">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>색없음</td>
    <td>파랑임</td>
    <td>파랑임</td>
    <td>노랑임</td>
  </tr>
</table>

• ⭐ 열 갯수만큼 <col>이 있어야함
• 아무런 스타일을 지정하지 않을 때는 <col>만 씀
• span="숫자" 속성으로 여러 열의 색을 지정할 수 있다. (이 때는 여러 열을 선택한 만큼 col 태그를 빼줘야 한다.)