• 표 만들기
  • 표 만드는 <table>, <caption> 태그
  • 행 만드는 <tr>태그, 셀 만드는 <td>, <th> 태그
  • 표의 구조 지정 <thead>, <tbody>,<tfoot> 태그
  • 행, 열을 합치는 <rowspan>, <colspan> 태그
  • 특정 열에 배경색, 너비 지정을 위한 묶어주는 <col>, <colgroup> 태그

표 만들기

표 만드는 <table>, <caption> 태그

표의 시작과 끝을 알려주는 <table> 태그 표에 제목을 붙이는 <caption> 태그 (표의 위쪽 중앙에 표시)

• 기본형

<table>
  <caption> 제목 </caption>
</table>

행 만드는 <tr>태그, 셀 만드는 <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>

• 출력 결과

표의 구조 지정 <thead>, <tbody>,<tfoot> 태그

• 기본형

<table>
    <caption>제목</caption>
    <thead>             //<thead> 태그 (제목)
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
    </thead>
    <tbody>            //<tbody> 태그 (본문)
      <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
      </tr>
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
      </tr>
    </tbody>
  </table>

• 출력 결과

행, 열을 합치는 <rowspan>, <colspan> 태그

<rowspan> : 행을 합치는 태그 <colspan> : 열을 합치는 태그

• 기본형

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

<table>
    <caption>제목</caption>
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
      </tr>
      <tr>
        <td colspan="2">2행 1열</td>
        <td>2행 2열</td>
        <td>2행 3열</td>
      </tr>
    </tbody>
  </table>

• 출력 결과

특정 열에 배경색, 너비 지정을 위한 묶어주는 <col>, <colgroup> 태그

<col> 태그 : 열 1개만 지정 <colgroup> 태그 : 여러개의 <col> 태그들

• 기본형

<colgroup>
  <col>
</colgroup>

<colgroup>
  <col style="background-color: aqua;"> // 1열
  <col>                               // 2열 (속성 지정 안해도 <col> 태그를 작성해줘야 한다.)
  <col style="background-color: blueviolet;">   // 3열
</colgroup>

• 출력 결과

---

출처

• (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.