LabEx
로그인무료 가입

기본 속성으로 HTML 테이블 만들기

CSSBeginner
지금 연습하기

소개

이 랩에서는 학생들이 기본적인 HTML 테이블 태그와 속성을 사용하여 HTML 테이블을 생성하고 조작하는 방법을 배우게 됩니다. 이 랩은 웹 페이지에서 데이터를 구조화된 그리드 형식으로 구성하고 표시하는 데 중요한 <table>, <tr>, <td>, 그리고 <th>와 같은 필수 태그를 포함하여 HTML 테이블의 핵심 구조를 이해하는 데 중점을 둡니다.

참가자들은 기본 테이블 생성, 헤더 및 본문 섹션 추가, colspan 및 rowspan을 사용한 셀 병합, 그리고 기본적인 스타일 속성 적용을 다루는 포괄적인 학습 여정을 거치게 됩니다. 랩이 끝나면 학생들은 잘 구조화된 HTML 테이블을 구성하고, HTML 테이블 요소와 관련 속성을 사용하여 데이터를 효과적으로 표현하는 실질적인 기술을 갖추게 될 것입니다.

HTML 테이블 구조 및 기본 태그 이해

이 단계에서는 HTML 테이블을 생성하는 데 사용되는 기본적인 구조와 기본 태그를 배우게 됩니다. HTML 테이블은 웹 페이지에서 데이터를 구조화된 그리드 형식으로 구성하고 표시하는 데 필수적입니다.

HTML 테이블은 몇 가지 주요 태그를 사용하여 생성됩니다.

  • <table>: 전체 테이블의 주요 컨테이너
  • <tr>: 테이블 행을 정의
  • <td>: 표준 테이블 셀 (데이터 셀) 을 정의
  • <th>: 테이블 헤더 셀을 정의

이러한 기본 테이블 태그를 시연하기 위해 간단한 예제를 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 basic_table.html이라는 새 파일을 만듭니다.

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

테이블 구조를 자세히 살펴보겠습니다.

  1. <table border="1">은 가시적인 테두리가 있는 테이블 컨테이너를 생성합니다. border 속성은 선택 사항입니다.
  2. 첫 번째 <tr>은 열 제목에 대한 <th> 헤더 셀을 포함합니다.
  3. 후속 <tr> 요소는 실제 내용이 있는 <td> 데이터 셀을 포함합니다.

참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요.

HTML table structure example

기억해야 할 주요 사항:

  • 각 <tr>은 테이블의 행을 나타냅니다.
  • <th>는 헤더 셀에 사용됩니다 (일반적으로 굵게 표시되고 가운데 정렬됨).
  • <td>는 표준 데이터 셀에 사용됩니다.
  • border 속성은 테이블 구조를 시각화하는 데 도움이 됩니다 (실제 응용 프로그램에서는 CSS 를 사용하여 스타일을 지정하는 것이 좋습니다).

행과 열을 사용하여 간단한 테이블 만들기

이 단계에서는 여러 행과 열이 있는 더 복잡한 테이블을 만드는 방법을 배우게 됩니다. 이전 단계를 기반으로, 정보를 효과적으로 표시하기 위해 다양한 수의 행과 열로 테이블을 구조화하는 방법을 살펴보겠습니다.

WebIDE 를 열고 ~/project 디렉토리에 product_table.html이라는 새 파일을 만듭니다. 여러 행과 열로 테이블을 만드는 것을 시연하기 위해 제품 재고 테이블을 만들겠습니다.

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

여러 행과 열로 테이블을 만드는 것에 대한 주요 사항:

  1. 각 <tr> (table row, 테이블 행) 은 테이블의 가로 행을 나타냅니다.
  2. 각 <tr> 내에서 여러 <td> (table data, 테이블 데이터) 요소가 열을 생성합니다.
  3. 각 <tr>의 <td> 요소 수는 열의 수를 결정합니다.
  4. 일관된 레이아웃을 위해 모든 행은 동일한 수의 열을 가져야 합니다.
  5. border 속성은 테이블 구조를 시각화하는 데 도움이 됩니다.

다음과 같이 4 열 테이블을 만들었습니다.

  • 첫 번째 행은 열 헤더입니다.
  • 제품 정보가 있는 세 개의 추가 행.
  • 각 행에는 열에 해당하는 네 개의 셀이 포함되어 있습니다.

웹 브라우저의 예시 출력은 제품 재고 세부 정보를 표시하는 4x4 그리드를 보여줍니다.

Product inventory table example

테이블 헤더 및 본문 섹션 추가

이 단계에서는 의미론적 HTML 태그 <thead>, <tbody>, <tfoot>을 사용하여 테이블 콘텐츠를 보다 효과적으로 구성함으로써 테이블 구조를 개선하는 방법을 배우게 됩니다. 이러한 태그는 HTML 테이블의 가독성과 접근성을 향상시키는 데 도움이 됩니다.

WebIDE 를 열고 ~/project 디렉토리에 student_grades.html이라는 새 파일을 만듭니다. 테이블 섹션 태그의 사용을 시연하는 학생 성적 테이블을 만들겠습니다.

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

테이블 섹션에 대한 주요 사항:

  1. <thead>: 열 제목이 있는 헤더 행을 포함합니다.
  2. <tbody>: 주요 데이터 행을 포함합니다.
  3. <tfoot>: 요약 또는 푸터 행을 포함합니다.
  4. <td> 대신 헤더 셀에 <th>를 사용합니다.
  5. 이러한 의미론적 태그는 테이블 구조와 접근성을 향상시키는 데 도움이 됩니다.

이 예제는 다음을 보여줍니다.

  • <th>를 사용하여 열 제목이 있는 헤더 행.
  • <tbody>의 여러 데이터 행.
  • <tfoot>의 반 평균이 있는 푸터 행.

웹 브라우저의 예시 출력은 헤더, 본문 및 푸터를 위한 명확한 섹션이 있는 구조화된 테이블을 보여줍니다.

Student grades table example

Colspan 및 Rowspan 을 사용하여 테이블 셀 병합

이 단계에서는 colspan 및 rowspan 속성을 사용하여 테이블 셀을 가로 및 세로로 병합하는 방법을 배우게 됩니다. 이러한 속성을 사용하면 여러 셀을 결합하여 더 복잡하고 유연한 테이블 레이아웃을 만들 수 있습니다.

WebIDE 를 열고 ~/project 디렉토리에 event_schedule.html이라는 새 파일을 만듭니다. 셀 병합을 시연하는 이벤트 일정 테이블을 만들겠습니다.

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

colspan 및 rowspan에 대한 주요 사항:

  1. colspan: 열을 가로질러 셀을 가로로 병합합니다.
    • 예: <td colspan="2">는 2 개의 열에 걸쳐 셀을 확장합니다.
  2. rowspan: 행을 가로질러 셀을 세로로 병합합니다.
    • 예: <td rowspan="2">는 2 개의 행에 걸쳐 셀을 확장합니다.
  3. 이러한 속성을 사용할 때는 다른 행의 해당 셀을 제거합니다.

이 예제에서:

  • "Keynote Speech"는 Room A 에서 2 개의 행에 걸쳐 있습니다.
  • "Lunch Break"는 두 방 모두에서 2 개의 열에 걸쳐 있습니다.
  • 다른 셀은 표준 단일 셀 레이아웃을 유지합니다.

웹 브라우저의 예시 출력은 병합된 셀이 있는 테이블을 표시하여 더 간결하고 정리된 일정을 만듭니다.

HTML table with merged cells example

테이블 속성 스타일 지정 및 사용자 정의

이 단계에서는 인라인 CSS 및 HTML 속성을 사용하여 HTML 테이블의 스타일을 지정하고 사용자 정의하는 방법을 배우게 됩니다. 적절한 스타일 지정을 통해 테이블의 가독성과 시각적 매력을 향상시킬 수 있습니다.

WebIDE 를 열고 ~/project 디렉토리에 styled_table.html이라는 새 파일을 만듭니다. 다양한 스타일 지정 기술을 사용하여 테이블을 만들겠습니다.

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

시연된 주요 스타일 지정 기술:

  1. border-collapse: 테이블 셀 사이의 간격을 제거합니다.
  2. 사용자 정의 글꼴 및 타이포그래피
  3. 색상 헤더 행
  4. :nth-child(even)을 사용하여 행 색상 번갈아 가며 표시
  5. 테이블 행에 마우스 오버 효과
  6. 셀에 대한 패딩 및 테두리 스타일 지정

스타일 지정 옵션에는 다음이 포함됩니다.

  • <style> 태그의 인라인 CSS
  • 별도의 CSS 파일 (더 큰 프로젝트에 권장)
  • style 속성을 사용한 인라인 스타일
  • 레이아웃, 색상 및 상호 작용을 위한 CSS 속성

웹 브라우저의 예시 출력은 마우스 오버 및 색상 효과가 있는 전문적으로 스타일이 지정된, 읽기 쉬운 테이블을 보여줍니다.

Styled HTML table example

요약

이 Lab 에서 참가자들은 <table>, <tr>, <td>, <th>와 같은 필수 HTML 태그를 사용하여 HTML 테이블을 만드는 기본 사항을 배웠습니다. 이 Lab 은 학습자가 테이블 구조를 이해하고, 행과 열이 있는 기본 테이블을 만들고, 헤더를 추가하고, 셀을 병합하고, 테이블 속성을 사용자 정의하는 기술을 탐구하도록 안내했습니다.

실습을 통해 웹 페이지에서 구조화된 그리드 형태의 데이터 프레젠테이션을 구성하는 방법을 시연했으며, 테이블 행 정의, 헤더 및 데이터 셀 생성, border와 같은 속성을 사용하여 테이블 시각화를 향상시키는 것과 같은 주요 개념을 다루었습니다. 참가자들은 다양한 웹 디자인 시나리오에서 정보를 효과적으로 표시할 수 있는 의미론적이고 잘 구성된 HTML 테이블을 구축하는 실질적인 경험을 얻었습니다.

관련 CSS 코스
초보자를 위한 CSS

초보자를 위한 CSS

cssweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development