テーブルの作成

テーブルは、<table>タグで作成できます。行は<tr>タグで指定し、セルは<td>タグで指定します。また、テーブルヘッダは<th>タグで指定します。

例:

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

さて、以下の演習問題に取り組んで、理解度を確認しましょう。

演習問題1

以下のデータを含むテーブルを作成してください。

見出し1 | 見出し2
データ1 | データ2
データ3 | データ4

入力フォームの追加

入力フォームは、<form>タグで作成できます。テキスト入力欄は<input>タグで指定し、type属性に”text”を指定します。また、送信ボタンは<input>タグで指定し、type属性に”submit”を指定します。

例:

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="送信">
</form>

さて、以下の演習問題に取り組んで、理解度を確認しましょう。

演習問題2

メールアドレスを入力するフォームを作成してください。送信ボタンも追加してください。

演習問題1の解答例:

<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

<form>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="送信">
</form>