HTML入門講座|テーブル表ついて学ぼう

HTML
うさタブ
うさタブ

今回はウェブページの【テーブル表】をつくるッピよ~!

ユウキ
ユウキ

【テーブル表】??

うさタブ
うさタブ

ネットの表はこんな感じッピネ~

炭水化物果物野菜
バナナトマト
パンリンゴキャベツ
ユウキ
ユウキ

へ~ こんなのがあるんだ

うさタブ
うさタブ

表が作れると、

後からエクセルに変更できるソフトもあるゆえ、できることが増えて便利になるッピよ!

ではさっそく勉強していくッピネ!

この記事で学べること
  • ウェブページでの表の作り方
  • テーブルの見出しの作り方
  • ヨコの項目の作り方
  • タテの項目の作り方

ウェブページでテーブル表を作ってみよう

メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザ

元になるコード

<html>
<head></head>
<body>

</body>
</html>
うさタブ
うさタブ

上のコードを元に勉強していくッピ!

メモ帳にコピーして用意するッピネ!

テーブル表と見出しを作ろう

うさタブ
うさタブ

さっそく【テーブル表】と【表の見出し】を作っていくッピ!

うさタブ
うさタブ

<body></body>の間に

<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
</table>

と入力するッピよ~

ユウキ
ユウキ

オッケー!

サンプルコード
<html>
<head></head>
<body>

<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
</table>

</body>
</html>
ユウキ
ユウキ

お、なんか出てきた! これでいいのかな?

うさタブ
うさタブ

いい感じッピ!

次は、今回使った<table><tr><th>タグを解説するッピよ~!

テーブル表を作る <table> タグ

をうさタブ
をうさタブ

今回使った<table>タグは、

まず表を作りますよ~とコンピュータにお知らせするタグッピネ!

縦列 の項目を作る <tr>

うさタブ
うさタブ

次は表のタテ列を作る<tr>タグッピ!

うさタブ
うさタブ

この<tr></tr>の間に、ヨコ列を作るタグを入れるッピ!

表の見出しとなる<th>や、通常のヨコ列をつくる<td>タグ等があるッピネ~!

【見出し】の 横列を作る <th> タグ

うさタブ
うさタブ

<th>表の見出し】をつくる タグ ッピ!

うさタブ
うさタブ

コードを解説すると

<table>表をつくります

<tr>タテの項目をつくります

<th>見出しをつくります 炭水化物</th>見出しを終わります <th>果物</th><th>野菜</th>

</tr>タテの項目を終わります

</table>表を終わります

となるッピ!

うさタブ
うさタブ

<th></th>の間に

<th>データ1</th><th>データ2</th><th>データ3</th>

と入れていくッピ!

ユウキ
ユウキ

へ~ こうやって作るのか

横列 の項目を作る <td>

うさタブ
うさタブ

次は、【見出し】の下

通常のヨコの項目を作るッピよ~

うさタブ
うさタブ

<table></table>の間に

<tr><td>米</td><td>バナナ</td><td>トマト</td></tr>

と入力するッピネ

サンプルコード
<html>
<head></head>
<body>

<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
<tr><td>米</td><td>バナナ</td><td>トマト</td></tr>
</table>

</body>
</html>

ユウキ
ユウキ

おお、なんか増えた! しかも文字の太さが違ってる!!

うさタブ
うさタブ

<td>通常のヨコ列をつくるタグッピ!

<th>と同じように

<td>データ1</td><td>データ2</td><td>データ3</td>

とタグで囲うことで表をつくることができるッピよ~

<th> と <td> の違い

ユウキ
ユウキ

<td><th>の違いって何なんだ?

どっちもヨコ列を増やすのは一緒だろ?

うさタブ
うさタブ

見て分かるとおり、<th>タグは太字<td>通常の文字・・・

<th>太字なのでわかりやすいから、表の【見出し】

<td>は【見出しの下のデータに分けて使われているッピね~!

ユウキ
ユウキ

ふーん、そうなんだ~

表の数を増やしてみよう

うさタブ
うさタブ

表の数を増やしてみるッピよ~

うさタブ
うさタブ

<table></table>の間に、あらたに

<tr><td>パン</td><td>リンゴ</td><td>キャベツ</td></tr>

と入力するッピよ~

サンプルコード
<html>
<head></head>
<body>

<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
<tr><td>米</td><td>バナナ</td><td>トマト</td></tr>
<tr><td>パン</td><td>リンゴ</td><td>キャベツ</td></tr>
</table>

</body>
</html>

ユウキ
ユウキ

おおお! タテに項目が増えてる!

前の列をコピーして表の数を増やす

うさタブ
うさタブ

主に表の列は

<tr><td></td></tr>

がセットになってつくられているッピ!

うさタブ
うさタブ

<tr><td></td></tr>

<tr><td></td></tr>

<tr><td></td></tr>

とコピーすることによって、【タテの表】を増やすことができるッピ

うさタブ
うさタブ

これは見出しの<th>も一緒ッピネ!

<tr><th></th></tr>

で、増やしたいだけ増やせるッピネ!

うさタブ
うさタブ

横の表を増やしたいときは、

新しく<th><td>を付け加えれば良いッピ!

<tr><td></td><td></td><td></td></tr>

みたいな感じッピネ~

ユウキ
ユウキ

横の項目に入力漏れとかあったらどうなるんだ?

たとえば、

上の列は3つで、下の列は4つとかさ

うさタブ
うさタブ

そうなると、

そこの部分がポッカリあいて、データが左詰めされるッピ!

炭水化物果物野菜
トマト
パンリンゴキャベツ
うさタブ
うさタブ

こんなかんじッピネ~

ユウキ
ユウキ

なるほど~

全体のコードの確認

<html>
<head></head>
<body>

<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
<tr><td>米</td><td>バナナ</td><td>トマト</td></tr>
<tr><td>パン</td><td>リンゴ</td><td>キャベツ</td></tr>
</table>

</body>
</html>
学習のまとめ
  • <table>タグで、ウェブページに表を作ることができる
  • <th>で 表の【見出し】をつくれる
  • <tr>で 表を【タテ】に増やすことができる
  • <td>で 表を【ヨコ】に増やすことができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

HTMLプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました