🐓

🐔HTMLステップアップ編🐔

2022/11/28に公開

〜HTMLステップアップ編〜

🌟テーブル

table
テーブル全体のエリア(テーブルの親要素)

  • tr
    table rowの略
    テーブルの一行を定義。行は横方向

  • td
    table data cellの略
    テーブルのデータが入るセルを定義

dl>(dt+dd)*2

🌟行と列の覚え方
2本並んだ棒の方向が一致する
行は横 列は縦

🌟ヘッダーのあるテーブル
th要素
table header の略
テーブルのヘッダーを定義する要素

td要素
テーブルでデータが入るセルを定義

<table border="1">
      <tr>
        <th>姓</th>
        <th>名</th>
      </tr>
      <tr>
        <td>山田</td>
        <td>太郎</td>
      </tr>
      <tr>
        <td>田中</td>
        <td>花子</td>
      </tr>
    </table>

🌟thead,tbody,tfootがあるテーブルについて

  • thead  テーブルのヘッダ行を定義
  • tbody テーブルのボディ部分(本体部分)を定義する
  • tfoot テーブルのフッター行を定義する
<table border="1">
      <thead>
        <tr>
          <th>ヘッダー1</th>
          <th>ヘッダー2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ボディー1</td>
          <td>ボディー2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>フッター1</td>
          <td>フッター2</td>
        </tr>
      </tfoot>
    </table>

💡利用目的
文書構造をより正確に表現できる
CSSでスタイルを当てやすい

table>thead>tr>th*2

🌟テーブルのキャプションについて
キャプションとは、、テーブルのタイトルのこと

🌟セルの結合

🌱横に結合
colspan属性を利用

    <table border="1">
      <caption>行方向(横方向)に結合</caption>
      <tr>
        <th colspan="3">セルを結合</th>
      </tr>
      <tr>
        <td>コンテンツ1</td>
        <td>コンテンツ2</td>
        <td>コンテンツ3</td>
      </tr>
    </table>

🌱縦に結合
rowspan属性を利用

 <table border="1">
      <caption>列方向(縦方向)に結合</caption>
      <tr>
        <td rowspan="3">セルを結合</td>
        <td>コンテンツ1</td>
      </tr>
      <tr>
        <td>コンテンツ2</td>
      </tr>
      <tr>
        <td>コンテンツ3</td>
      </tr>
    </table>

🌟フォーム

form要素

<form action=“#” method=“POST”>
</form>

・Action属性 どこにデータを送信するかを記述
・method属性 HTTPリクエストメソッドの種類を記述

🌟HTTPリクエストメソッドとは
ブラウザからサーバーに対して依頼する処理の種類

利用頻度が高い
🌱GET 
サーバーからデータを取得したいとき
例)Webページを取得(表示)、画像を取得(ブログの更新情報を取得)RSSフィードの取得

🌱POST
サーバへデータを送信したいとき
例)ログインフォーム、ECサイトでの商品注文フォーム、アンケートを送信

🌟input要素
データを入力するためのフォーム部品を作る要素

Type属性を指定することで様々な入力フォームを作成可能
例)

<input type=“text”>

⚠️終了タグを付けない、空要素

MDN form input で検索
フォームの<input>の型を参照!!
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

今日はHTMLステップアップ編!
テーブルとフォームを作成_φ(・_・
早くCSSに入れるよう、平日もなんとか時間作って進めるぞ❤️‍🔥

Discussion