## 目標
従業員情報を構造化されたテーブル形式で提示し、適切なHTMLタグを使用して行と列を作成する。

## 課題
3つの列（**Name**、**Position**、**Wage**）を持つテーブルを作成する。適切なHTMLタグを使用して、正しい行と列でテーブルを構成することに重点を置く。
以下のデータを含める：
1. Name: **Emma Johnson** | Position: **Sales Associate** | Wage: **$15.50 per hour**。
2. Name: **Liam Thompson** | Position: **Customer Service Representative** | Wage: **$14.75 per hour**。
3. Name: **Olivia Rodriguez** | Position: **Marketing Coordinator** | Wage: **$18.25 per hour**。
4. Name: **Noah Smith** | Position: **IT Support Specialist** | Wage: **$20.00 per hour**。
5. Name: **Ava Davis** | Position: **Administrative Assistant** | Wage: **$16.80 per hour**。


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx0YWJsZT4KICAgICAgPCEtLSBUYWJsZSBoZWFkZXI6IERlZmluZXMgdGhlIGNvbHVtbiBoZWFkaW5ncyAtLT4KICAgICAgPHRoZWFkPgogICAgICAgIDx0cj4KICAgICAgICAgIDx0aD5fX188L3RoPgogICAgICAgICAgPHRoPlBvc2l0aW9uPC90aD4KICAgICAgICAgIDxfX18+V2FnZTwvX19fPgogICAgICAgIDwvdHI+CiAgICAgIDwvdGhlYWQ+CgogICAgICA8IS0tIFRhYmxlIGJvZHk6IENvbnRhaW5zIGRhdGEgZm9yIGVhY2ggZW1wbG95ZWUgLS0+CiAgICAgIDx0Ym9keT4KICAgICAgICA8IS0tIFJvdyAxIC0tPgogICAgICAgIDx0cj4KICAgICAgICAgIDx0ZD5FbW1hIEpvaG5zb248L3RkPgogICAgICAgICAgPHRkPl9fXzwvdGQ+CiAgICAgICAgICA8dGQ+JDE1LjUwIHBlciBob3VyPC90ZD4KICAgICAgICA8L3RyPgogICAgICAgIDwhLS0gUm93IDIgLS0+CiAgICAgICAgPHRyPgogICAgICAgICAgPF9fXz5MaWFtIFRob21wc29uPC9fX18+CiAgICAgICAgICA8dGQ+Q3VzdG9tZXIgU2VydmljZSBSZXByZXNlbnRhdGl2ZTwvdGQ+CiAgICAgICAgICA8dGQ+JDE0Ljc1IHBlciBob3VyPC90ZD4KICAgICAgICA8L3RyPgogICAgICAgIDwhLS0gUm93IDMgLS0+CiAgICAgICAgPF9fXz4KICAgICAgICAgIDx0ZD5PbGl2aWEgUm9kcmlndWV6PC90ZD4KICAgICAgICAgIDx0ZD5NYXJrZXRpbmcgQ29vcmRpbmF0b3I8L3RkPgogICAgICAgICAgPHRkPiQxOC4yNSBwZXIgaG91cjwvdGQ+CiAgICAgICAgPC9fX18+CiAgICAgICAgPCEtLSBSb3cgNCAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+Tm9haCBTbWl0aDwvdGQ+CiAgICAgICAgICA8dGQ+SVQgU3VwcG9ydCBTcGVjaWFsaXN0PC90ZD4KICAgICAgICAgIF9fXwogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgNSAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+QXZhIERhdmlzPC90ZD4KICAgICAgICAgIF9fXwogICAgICAgICAgPHRkPiQxNi44MCBwZXIgaG91cjwvdGQ+CiAgICAgICAgPC90cj4KICAgICAgPC90Ym9keT4KICAgIDwvdGFibGU+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogCiAgV2UgY29sbGFwc2UgdGhlIGJvcmRlcnMgb2YgZWFjaCBjZWxsLiAKICBCeSBkZWZhdWx0LCBlYWNoIGNlbGwgaGFzIGl0cyBvd24gYm9yZGVycyAKICB3aGljaCBhcmUgbm90IGNvbm5lY3RlZC4KKi8KdGFibGUgewogIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7CiAgbWFyZ2luOiAwIGF1dG87CiAgbWFyZ2luLXRvcDogMzBweDsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7Cn0KCi8qIAogIEFkZCBhIGJvcmRlciBhbmQgcGFkZGluZyB0byB0aGUgY2VsbHMsIAogIHRoZSBkaXN0YW5jZSBmcm9tIHRoZSBjb250ZW50IHRvIHRoZSBib3JkZXIuCiovCnRhYmxlIHRoLAp0YWJsZSB0ZCB7CiAgcGFkZGluZzogMTBweDsKICBib3JkZXI6IDNweCBzb2xpZCAjZmY4YTAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLyogU3R5bGUgZm9yIHRhYmxlIGhlYWRlciByb3cgKi8KdGhlYWQgdGggewogIGJhY2tncm91bmQtY29sb3I6ICNmMmYyZjI7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTsKfQoKLyogQWx0ZXJuYXRlIHJvdyBiYWNrZ3JvdW5kIGNvbG9yICovCnRib2R5IHRyOm50aC1jaGlsZChldmVuKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YyZjJmMjsKfQoKLyogSG92ZXIgZWZmZWN0IG9uIHRhYmxlIHJvd3MgKi8KdGJvZHkgdHI6aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNmZmQ2OTk7Cn0KCi8qIFRleHQgc3R5bGluZyBmb3IgY2VsbHMgKi8KdGFibGUgdGggewogIGZvbnQtc2l6ZTogMTZweDsKICBjb2xvcjogIzMzMzsKfQoKdGFibGUgdGQgewogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzU1NTsKfQoKLyogRW1waGFzaXplIHdhZ2UgKi8KdGFibGUgdGQ6bnRoLWNoaWxkKDMpIHsKICBmb250LXdlaWdodDogYm9sZDsKICBjb2xvcjogI2ZmOGEwMDsKfQ==

1. `<table>` タグを使用してテーブルのメインコンテナを定義する；
2. `<thead>` タグを使用して、列見出しなどテーブルのヘッダー内容をグループ化する；
3. `<tr>` タグを使用してテーブル内の新しい行を定義する；
4. `<th>` タグを使用して各列のヘッダーテキストを定義する；
5. `<tbody>` タグを使用して、行やデータセルを含むテーブルの主な内容をグループ化する；
6. `<td>` タグを使用して各テーブルセル内の実際のデータや内容を定義する。


ヒント

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <table>
      
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Wage</th>
        </tr>
      </thead>

      
      <tbody>
        
        <tr>
          <td>Emma Johnson</td>
          <td>Sales Associate</td>
          <td>$15.50 per hour</td>
        </tr>
        
        <tr>
          <td>Liam Thompson</td>
          <td>Customer Service Representative</td>
          <td>$14.75 per hour</td>
        </tr>
        
        <tr>
          <td>Olivia Rodriguez</td>
          <td>Marketing Coordinator</td>
          <td>$18.25 per hour</td>
        </tr>
        
        <tr>
          <td>Noah Smith</td>
          <td>IT Support Specialist</td>
          <td>$20.00 per hour</td>
        </tr>
        
        <tr>
          <td>Ava Davis</td>
          <td>Administrative Assistant</td>
          <td>$16.80 per hour</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
```

解答例

HTMLの基本を学びましょう。HTMLはすべてのウェブサイトの基盤です。タグや属性を使ってコンテンツを構造化し、明確なドキュメントレイアウトを構築し、画像、リンク、テーブルを追加します。入力やインタラクションを取得するためのアクセシブルでユーザーフレンドリーなフォームを作成します。ベストプラクティスに従いながら、構造化され機能的なウェブページの作成を実践します。HTMLを習得してウェブ開発の第一歩を踏み出しましょう。

HTMLフォームの多様性を探求します。主要な概念と技術を活用して、直感的でユーザーフレンドリーなフォームの設計方法を学びます。フォームがウェブサイト上でユーザーの操作やデータ送信を可能にする仕組みを理解します。

チャレンジ：機能的なHTMLテーブルの設計

目標

課題