javascript table tag

javascript 데이터 실행하기

▶ 오늘은 표를 만들 때 쓰는 tag에 대해 알아볼까합니다. 한번 알아두면 HTML에서 표 작업을 할 때 유용할테니 각각의 tag가 어떤 기능을 하는지 쭉 살펴봐요!

1. <tr></tr>

▶ HTML 테이블에서 행(row)을 나타내는 태그입니다. 간단한 예시를 살펴볼까요?

{
<table>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
  </tr>
  <tr>
    <td>다음 행 1</td>
    <td>다음 행 2</td>
  </tr>
</table>
}

▶ 위의 예시에서는 총 2개의 tr태그를 통해 행을 만들어 주었습니다.

2. <td></td>

▶ HTML 테이블에서 행 안에서 데이터 셀(data cell)을 나타내는 태그입니다. 간단한 예시를 살펴볼까요?

{
<table>
  <tr>
    <td>이름</td>
    <td>나이</td>
  </tr>
  <tr>
    <td>예린</td>
    <td>25</td>
  </tr>
</table>
}

▶ 위의 예시에서는 각각의 행 안에 이름, 나이, 예린, 25라는 데이터 셀을 만들어주었습니다.

3. <th></th>

▶ HTML 테이블에서 행이나 열의 제목(header)을 나타내는 태그입니다. 간단한 예시를 살펴볼까요?

{
<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>예린</td>
    <td>25</td>
  </tr>
</table>
}

▶ 위의 예시에서는 각각의 행 태그 안에 이름, 나이, 예린, 25라는 열 제목을 만들어주었습니다.

4. <thead></thead>

▶ HTML 테이블의 헤더 부분을 나타내는 태그입니다. 간단한 예시를 살펴볼까요?

{
<table>
    <thead>
        <tr>
        <th>이름</th>
        <th>나이</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>예린</td>
        <td>25</td>
        </tr>
    </tbody>
</table>
}

▶ 위의 예시에서는 하나의 테이블의 헤더를 만들고 그 안에 행을 만들어준 후 또 그 안에 이름, 나이라는 열 제목을 만들어주었습니다.

5. <tbody></tbody>

▶ HTML 테이블의 본문(body) 부분을 나타내는 태그입니다. 간단한 예시를 살펴볼까요?

{
<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>예린</td>
      <td>25</td>
    </tr>
    <tr>
      <td>지은</td>
      <td>30</td>
    </tr>
  </tbody>
</table>
}

▶ 위의 예시에서는 하나의 본문을 만들고 그 안에 2개의 행을 만들어준 후 그 안에 예린, 25, 지은, 30이라는 셀을 만들어주었습니다.

6. <tfoot></tfoot>

▶ HTML 테이블의 푸터(footer) 부분을 나타내는 태그입니다. 간단한 예시를 살펴볼까요?

{
<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>예린</td>
      <td>25</td>
    </tr>
    <tr>
      <td>지은</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">총 인원: 2명</td>
    </tr>
  </tfoot>
</table>
}

▶ 위의 예시에서는 푸터 부분을 만들어준 후 그 안에 “총 인원: 2명”이라는 텍스트를 포함한 한 행을 만들고, colspan=”2” 속성을 사용하여 두 개의 열을 병합해주었습니다.

7. <colgroup></colgroup>

▶ HTML 테이블에서 열(column)의 그룹을 지정하는 태그입니다. 이 태그는 스타일이나 속성을 적용할 때 사용됩니다.여러 열을 스타일링하거나 속성을 일괄적으로 지정할 때 유용합니다. 간단한 예시를 살펴볼까요?

{
<table>
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>예린</td>
      <td>25</td>
    </tr>
    <tr>
      <td>지은</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">총 인원: 2명</td>
    </tr>
  </tfoot>
</table>
}

▶ 위의 예시에서는 colgroup태그를 사용하여 열의 그룹을 만들고, col태그를 사용하여 각 열의 스타일을 지정했습니다.
여기서 첫 번째 열은 연한 파란색, 두 번째 열은 연한 녹색으로 배경색이 지정해주었는데, 이렇게 하면 해당 열에 속한 모든 셀에 동일한 스타일이 적용됩니다.

이렇게 오늘은 표를 만들 때 쓰는 tag에 대해 알아봤는데요,
다음엔 또 다른 태그들의 정보를 들고 오도록 하겠습니다😁!