HTML 테이블 정의 및 생성 방법

소개

HTML 테이블은 웹 페이지에서 표 형식 데이터를 표시하는 데 일반적으로 사용됩니다. 이 랩에서는 <table>, <tr>, <td>, 그리고 <th> 태그를 사용하여 기본적인 HTML 테이블을 만드는 방법을 배웁니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스는 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 실행합니다. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 85%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

테이블 생성

index.html이라는 새로운 HTML 파일을 생성하고 기본 구조를 설정하는 것으로 시작해 보겠습니다. <body> 태그 내에 <table> 요소를 생성합니다. 이 요소는 테이블의 모든 행과 열을 포함합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

행 정의

다음으로, <tr> 태그를 사용하여 테이블의 행을 정의합니다. 각 행은 하나 이상의 셀을 포함합니다. 단일 셀을 생성하려면 <td> 태그를 사용합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

테이블 헤더 추가

경우에 따라 테이블에 헤더 행을 추가하고 싶을 수 있습니다. 이렇게 하려면 <td> 태그 대신 <th> 태그를 사용합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

테두리 및 스타일 추가

기본적으로 HTML 테이블은 최소한의 스타일과 테두리가 없습니다. 테이블에 테두리를 추가하려면 CSS border 속성을 사용합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

요약

이 튜토리얼을 통해 기본적인 HTML 테이블을 만들고 CSS 를 사용하여 스타일을 지정하는 방법을 배웠습니다. 테이블은 셀에 colspan 및 rowspan과 같은 속성을 추가하고 <caption> 및 <thead>와 같은 추가 태그를 사용하여 더욱 사용자 정의할 수 있습니다. 이러한 도구를 사용하면 웹 페이지에 데이터를 표시하기 위해 복잡하고 유익한 테이블을 만들 수 있습니다.