🐔HTMLステップアップ編🐔
〜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>ヘッダー１</th>
<th>ヘッダー２</th>
</tr>
</thead>
<tbody>
<tr>
<td>ボディー１</td>
<td>ボディー２</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>フッター１</td>
<td>フッター２</td>
</tr>
</tfoot>
</table>
💡利用目的
文書構造をより正確に表現できる
CSSでスタイルを当てやすい
table>thead>tr>th*2
🌟テーブルのキャプションについて
キャプションとは、、テーブルのタイトルのこと
🌟セルの結合
🌱横に結合
colspan属性を利用
<table border="1">
<caption>行方向（横方向）に結合</caption>
<tr>
<th colspan="3">セルを結合</th>
</tr>
<tr>
<td>コンテンツ１</td>
<td>コンテンツ２</td>
<td>コンテンツ３</td>
</tr>
</table>
🌱縦に結合
rowspan属性を利用
<table border="1">
<caption>列方向（縦方向）に結合</caption>
<tr>
<td rowspan="3">セルを結合</td>
<td>コンテンツ１</td>
</tr>
<tr>
<td>コンテンツ２</td>
</tr>
<tr>
<td>コンテンツ３</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>の型を参照！！
今日はHTMLステップアップ編！
テーブルとフォームを作成_φ(･_･
早くCSSに入れるよう、平日もなんとか時間作って進めるぞ❤️🔥
Discussion