lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

webIntroHtmlChapter3Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>HTML 테이블 예시</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th>과목</th>
        <th>월요일</th>
        <th>화요일</th>
        <th>수요일</th>
      </tr>
      <tr>
        <td>수학</td>
        <td>9:00 - 10:00</td>
        <td>10:00 - 11:00</td>
        <td>11:00 - 12:00</td>
      </tr>
      <tr>
        <td>영어</td>
        <td>10:00 - 11:00</td>
        <td>9:00 - 10:00</td>
        <td>10:00 - 11:00</td>
      </tr>
      <tr>
        <td>과학</td>
        <td>11:00 - 12:00</td>
        <td>11:00 - 12:00</td>
        <td>9:00 - 10:00</td>
      </tr>
    </table>
  </body>
</html>

# 테이블(Table)

테이블(Table)은 데이터를 행과 열로 이루어진 **표**로 구성합니다.

HTML에서는 `<table>` 태그를 활용해 웹 페이지에 표를 만들 수 있습니다.

<br />

## 기본 구성

테이블을 만들기 위한 주요 태그들은 다음과 같습니다.

- **`<table>`** : 테이블 요소 생성

- **`<tr>`** : 테이블의 행을 정의합니다. "table row"의 줄임말입니다.

- **`<td>`** : 테이블의 데이터 셀을 정의합니다. "table data"의 줄임말입니다.

- **`<th>`** : 테이블의 제목 셀을 정의합니다. 일반적으로 굵은 글씨로 표시됩니다.

<br />

## 사용 예제

아래는 간단한 테이블 예제입니다.

```html title="테이블 예제"
<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>
```

위의 예제는 3x3 크기의 테이블을 생성하며, 첫 번째 행은 제목 셀로 구성되고 나머지 행은 데이터 셀로 구성합니다.

<br />

## 기타 테이블 관련 태그

테이블을 더 정교하게 구성하기 위한 태그들도 있습니다.

- **`<thead>`** : 테이블의 헤더(머리말) 그룹화

- **`<tbody>`** : 테이블의 본문 그룹화

- **`<tfoot>`** : 테이블의 푸터(바닥글) 그룹화