![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はウェブページの【テーブル表】をつくるッピよ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
【テーブル表】??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ネットの表はこんな感じッピネ~
炭水化物 | 果物 | 野菜 |
---|---|---|
米 | バナナ | トマト |
パン | リンゴ | キャベツ |
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
へ~ こんなのがあるんだ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
表が作れると、
後からエクセルに変更できるソフトもあるゆえ、できることが増えて便利になるッピよ!
ではさっそく勉強していくッピネ!
- ウェブページでの表の作り方
- テーブルの見出しの作り方
- ヨコの項目の作り方
- タテの項目の作り方
ウェブページでテーブル表を作ってみよう
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- パソコン
- ネットを見るブラウザ
元になるコード
<html>
<head></head>
<body>
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上のコードを元に勉強していくッピ!
メモ帳にコピーして用意するッピネ!
テーブル表と見出しを作ろう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さっそく【テーブル表】と【表の見出し】を作っていくッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<body></body>の間に
<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
</table>
と入力するッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
オッケー!
<html>
<head></head>
<body>
<table>
<tr><th>炭水化物</th><th>果物</th><th>野菜</th></tr>
</table>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-23_1.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
お、なんか出てきた! これでいいのかな?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じッピ!
次は、今回使った<table><tr><th>タグを解説するッピよ~!
テーブル表を作る <table> タグ
![をうさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回使った<table>タグは、
まず表を作りますよ~とコンピュータにお知らせするタグッピネ!
縦列 の項目を作る <tr>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は表のタテ列を作る<tr>タグッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この<tr></tr>の間に、ヨコ列を作るタグを入れるッピ!
表の見出しとなる<th>や、通常のヨコ列をつくる<td>タグ等があるッピネ~!
【見出し】の 横列を作る <th> タグ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<th>は表の【見出し】をつくる タグ ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
コードを解説すると
<table>
<tr>
<th>炭水化物</th><th>果物</th><th>野菜</th>
</tr>
</table>
となるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<th></th>の間に
<th>データ1</th><th>データ2</th><th>データ3</th>
と入れていくッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
へ~ こうやって作るのか
横列 の項目を作る <td>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は、【見出し】の下
通常のヨコの項目を作るッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<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>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-23_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
おお、なんか増えた! しかも文字の太さが違ってる!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<td>は 通常のヨコ列をつくるタグッピ!
<th>と同じように
<td>データ1</td><td>データ2</td><td>データ3</td>
とタグで囲うことで表をつくることができるッピよ~
<th> と <td> の違い
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
<td>と<th>の違いって何なんだ?
どっちもヨコ列を増やすのは一緒だろ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
見て分かるとおり、<th>タグは太字、<td>は通常の文字・・・
<th>は太字なのでわかりやすいから、表の【見出し】、
<td>は【見出し】の下のデータに分けて使われているッピね~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
ふーん、そうなんだ~
表の数を増やしてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
表の数を増やしてみるッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<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>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-23_3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
おおお! タテに項目が増えてる!
前の列をコピーして表の数を増やす
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
主に表の列は
<tr><td></td></tr>
がセットになってつくられているッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
とコピーすることによって、【タテの表】を増やすことができるッピ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは見出しの<th>も一緒ッピネ!
<tr><th></th></tr>
で、増やしたいだけ増やせるッピネ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
横の表を増やしたいときは、
新しく<th>や<td>を付け加えれば良いッピ!
<tr><td></td><td></td><td></td></tr>
みたいな感じッピネ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
横の項目に入力漏れとかあったらどうなるんだ?
たとえば、
上の列は3つで、下の列は4つとかさ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうなると、
そこの部分がポッカリあいて、データが左詰めされるッピ!
炭水化物 | 果物 | 野菜 |
---|---|---|
米 | トマト | |
パン | リンゴ | キャベツ |
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
こんなかんじッピネ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
なるほど~
全体のコードの確認
<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>で 表を【ヨコ】に増やすことができる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなホームページの基礎解説をしていくッピ!
次回も楽しみにしているッピよ~~!