表に関するタグは似ていて「どれをつかうんだっけ？」、「どちらがどっちだっけ？」と迷ってしまう事が多いと思います
でも実際はたった4つのタグを覚えてしまえば基本的な枠組みは作成でき、少しデザインすれば以下のようにありがちな表を作成する事ができます
えー、難しそう
大丈夫！
中盤くらいから例を出しながら一緒に作っていくので頑張ろう
1.表を作成する時に使うタグ
まず先に表を作るためにつかうタグを紹介しておきます。
| タグ | 意味 |
|---|---|
| table | このタグで囲う事により表を作る |
| tr | “Table Row”の略で行(横)を表す |
| th | “Table Head”の略で見出し(タイトル)を表す |
| td | “Table Data”の略で表のセル(中身)を表す |
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タグで２列目を作る
<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列目にもメニューを入れて完成です。
線が入っていないから表っぽくありませんが、線の入れ方は以下で紹介しています
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>
わぁーい！表が作れた！
あとはこれにCSSで色とかを付けれれば見栄えも良くなるよ
だいたい例の通りになったかと思われます
っぽくなった！
3.セルの操作
ここからは少し応用になりますが、セルの統合の仕方です
このような表があったとします。
3-1.横方向につなげる場合
セルを横方向につなげる場合はつなげたいセルのタグ内にcolspan=”数字”を記入すします。数字はつなげたいセルの数を書きます。
例えばセル１とセル２をつなげる場合はthタグ内に”colspan属性”を記入し、値を2とします。
<th colspan="2">セル</th>
<table border="1">
<tr>
<th colspan="2">セル１</th>
</tr>
<tr>
<td>セル３</td>
<td>セル４</td>
</tr>
<tr>
<td>セル５</td>
<td>セル６</td>
</tr>
</table>結合したセルを消すのを忘れないように注意。
またcolspan=” 3”とすると横3セル分結合できます。
<th colspan="3">セル</th>
<table border="1">
<tr>
<th colspan="3">セル１</th>
</tr>
<tr>
<td>セル３</td>
<td>セル４</td>
<td>セル5</td>
</tr>
<tr>
<td>セル6</td>
<td>セル7</td>
<td>セル8</td>
</tr>
</table>3-2.縦方向につなげる場合
セルを縦方向につなげる場合はつなげたいセルのタグ内にrowspan=”数字”を記入すします。こちらも数字はつなげたいセルの数を書きます。
<td rowspan="2">セル３</td>
<table border="1">
<tr>
<th>セル１</th>
<th>セル２</th>
</tr>
<tr>
<td rowspan="2">セル３</td>
<td>セル４</td>
</tr>
<tr>
<td>セル６</td>
</tr>
</table>こちらもrowspan=” 3”とすると縦3セル分結合できます。
<table border="1">
<tr>
<th rowspan="3">セル１</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>表はややこしく少し難しいけど使う機会も結構あるのでおさえておきましょう
最初にも言いましたがイメージが大事です。
4.まとめ
| タグ | 意味 |
|---|---|
| table | このタグで囲う事により表を作る |
| tr | “Table Row”の略で行(横)を表す |
| th | “Table Head”の略で見出し(タイトル)を表す |
| td | “Table Data”の略で表のセル(中身)を表す |
- tableタグ内にborder=”数字”とすると罫線をつけられます。また数字を変えると太さも変わる
- セルの結合は横だとタグ内にcolspan=”数字”、縦ならrowspan=”数字”とする。数字はつなげたいセルの数を書く。結合したセルを消すのを忘れない
コメント