![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
表に関するタグは似ていて「どれをつかうんだっけ?」、「どちらがどっちだっけ?」と迷ってしまう事が多いと思います
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
でも実際はたった4つのタグを覚えてしまえば基本的な枠組みは作成でき、少しデザインすれば以下のようにありがちな表を作成する事ができます
![表サンプル](https://kbyt-programming.com/wp-content/uploads/2020/07/f9369408e38355735a4862f26bba8619.png)
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
えー、難しそう
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
大丈夫!
中盤くらいから例を出しながら一緒に作っていくので頑張ろう
1.表を作成する時に使うタグ
まず先に表を作るためにつかうタグを紹介しておきます。
タグ | 意味 |
---|---|
table | このタグで囲う事により表を作る |
tr | “Table Row”の略で行(横)を表す |
th | “Table Head”の略で見出し(タイトル)を表す |
td | “Table Data”の略で表のセル(中身)を表す |
![tableタグ早見表](https://kbyt-programming.com/wp-content/uploads/2020/06/0818112cc532b16e00fd8ec1412fd459-1024x727.png)
4つのタグとこの表の関係をイメージしておくようにしてください。
ちなみに見出しがない場合は<th>タグはカットできます。
では実際に作りながら見ていきましょう。
2.表の作り方
- STEP1tableタグを書く
<table> </table>
- STEP2tableタグ内にtrタグで行を作る
<table> <tr></tr> </table>
- STEP3trタグ内にthタグで表のタイトルを入れるタイトルを必要な分作成します。ちなみに一番先頭を開けているのはレイアウトのためです。
<table> <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr> </table>
タイトルっぽい太さの文字になりました。
- STEP4trタグで2列目を作る
<table> <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr> <tr></tr> </table>
- STEP5tdタグを用いて2列目の中身を作るこちらは先頭も記入しています
<table> <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr> <tr><td>データ量</td><td>3GB</td><td>5GB</td><td>10GB</td></tr> </table>
- STEP6tdタグを用いてさらに3列目の中身を作る
<table> <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr> <tr><td>データ量</td><td>3GB</td><td>5GB</td><td>10GB</td></tr> <tr><td>料金</td><td>¥1,480</td><td>¥2,780</td><td>¥3,500</td></tr> </table>
3列目にもメニューを入れて完成です。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
線が入っていないから表っぽくありませんが、線の入れ方は以下で紹介しています
tableタグ内にborder=”数字”とすると罫線をつけられます。また数字を変えると太さも変わります。
<table border="1">
<tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr>
<tr><td>データ量</td><td>3GB</td><td>5GB</td><td>10GB</td></tr>
<tr><td>料金</td><td>¥1,480</td><td>¥2,780</td><td>¥3,500</td></tr>
</table>
![表に線を入れたもの](https://kbyt-programming.com/wp-content/uploads/2020/08/615a4d9280c835b9dfe06c7db5ebce66.png)
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
わぁーい!表が作れた!
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
あとはこれにCSSで色とかを付けれれば見栄えも良くなるよ
![表をCSSで装飾したもの](https://kbyt-programming.com/wp-content/uploads/2020/08/df496885269d6a493a2e9d8aa839b9d1.png)
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
だいたい例の通りになったかと思われます
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
っぽくなった!
3.セルの操作
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
ここからは少し応用になりますが、セルの統合の仕方です
![セルの結合例_1](https://kbyt-programming.com/wp-content/uploads/2020/06/0ac30c0542f2393d0086fa311d97853b.png)
このような表があったとします。
3-1.横方向につなげる場合
セルを横方向につなげる場合はつなげたいセルのタグ内にcolspan=”数字”を記入すします。数字はつなげたいセルの数を書きます。
例えばセル1とセル2をつなげる場合はthタグ内に”colspan属性”を記入し、値を2とします。
<th colspan="2">セル</th>
![上のセルを結合](https://kbyt-programming.com/wp-content/uploads/2020/06/4d719b1ee8fc12335b8afdb785a04bf9.png)
<table border="1">
<tr>
<th colspan="2">セル1</th>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
<tr>
<td>セル5</td>
<td>セル6</td>
</tr>
</table>
結合したセルを消すのを忘れないように注意。
またcolspan=” 3”とすると横3セル分結合できます。
<th colspan="3">セル</th>
![セルを3つ結合](https://kbyt-programming.com/wp-content/uploads/2020/06/69d370c487bf33c88e52f08a39f5f4f9.png)
<table border="1">
<tr>
<th colspan="3">セル1</th>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
<td>セル5</td>
</tr>
<tr>
<td>セル6</td>
<td>セル7</td>
<td>セル8</td>
</tr>
</table>
3-2.縦方向につなげる場合
セルを縦方向につなげる場合はつなげたいセルのタグ内にrowspan=”数字”を記入すします。こちらも数字はつなげたいセルの数を書きます。
<td rowspan="2">セル3</td>
![縦にセルを結合](https://kbyt-programming.com/wp-content/uploads/2020/06/e866c7da3ed6033c33df836da2ec0239.png)
<table border="1">
<tr>
<th>セル1</th>
<th>セル2</th>
</tr>
<tr>
<td rowspan="2">セル3</td>
<td>セル4</td>
</tr>
<tr>
<td>セル6</td>
</tr>
</table>
こちらもrowspan=” 3”とすると縦3セル分結合できます。
![縦にセルを3つ結合](https://kbyt-programming.com/wp-content/uploads/2020/06/5b475ecee6d9510b247980001352aa96.png)
<table border="1">
<tr>
<th rowspan="3">セル1</th>
<th>セル2</th>
<th>セル3</th>
</tr>
<tr>
<td>セル5</td>
<td>セル6</td>
</tr>
<tr>
<td>セル8</td>
<td>セル9</td>
</tr>
</table>
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
表はややこしく少し難しいけど使う機会も結構あるのでおさえておきましょう
最初にも言いましたがイメージが大事です。
4.まとめ
タグ | 意味 |
---|---|
table | このタグで囲う事により表を作る |
tr | “Table Row”の略で行(横)を表す |
th | “Table Head”の略で見出し(タイトル)を表す |
td | “Table Data”の略で表のセル(中身)を表す |
![表を作るタグ](https://kbyt-programming.com/wp-content/uploads/2020/06/0818112cc532b16e00fd8ec1412fd459-1024x727.png)
- tableタグ内にborder=”数字”とすると罫線をつけられます。また数字を変えると太さも変わる
- セルの結合は横だとタグ内にcolspan=”数字”、縦ならrowspan=”数字”とする。数字はつなげたいセルの数を書く。結合したセルを消すのを忘れない
コメント