前回の記事で少しだけ触れた、レイアウトタグについての記事とさせていただきます。
なお、レイアウトタグは自分が勝手につけた名前なので、ここだけの呼び名としてください
tableタグ
前回すこしだけ見たtableタグです
<table>というタグで囲まれたタグのことを指しますが、この記事では覚えることが全部で4つあります
これが書けるようになると、こんな表を作れるようになります。
| 日付 | 今日の勉強時間 |
|---|---|
| 2019年 4月1日 | 3時間 |
| 2019年 4月2日 | 5時間 |
| 2019年 4月3日 | 1時間 |
| 2019年 4月4日 | 4時間 |
では実際にどのようになっているのか、一緒に見ていきましょう
<table> <tbody> <tr> <th>日付</th> <th>今日の勉強時間</th> </tr> <tr> <td>2019年 4月1日</td> <td>3時間</td> </tr> <tr> <td>2019年 4月2日</td> <td>5時間</td> </tr> <tr> <td>2019年 4月3日</td> <td>1時間</td> </tr> <tr> <td>2019年 4月4日</td> <td>4時間</td> </tr> </tbody> </table>
すこし長くなりましたが、実際は簡単ですぐに覚える事ができます！
これから１つずつ紐解いていこうと思います
tableタグ
まずtableタグを書きはじめるには
<table>
で始まります
終わるときも
</table>
で終わります。
tdタグ テーブルの枠（セル）
テーブルの１つ分の枠がこのtdタグです。
他のタグと同じように</td>で終わります。
先ほどのtableタグと、このtdタグだけで表を組んでみます
| A | B | C |
こんな感じになります！
<table > <tbody> <td>A</td> <td>B</td> <td>C</td> </tbody> </table>
本当にtableタグとtdタグしか使っていませんが、一応これだけでも形にはなります！
ちなみにこのテーブル枠1つ分のことをセルと呼びます。
ドラゴンボールではありません
では次に、trタグを組み込んでみましょう！
trタグ テーブルに段落を追加する
trタグでは、tableの段落を追加できます。
先ほどのABCすべてに段落を追加してみました！
| A |
| B |
| C |
<table > <tbody> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> </tbody> </table>
最初に出た表のように、横に2列ずつ表示して改行したい場合は
このような書き方になります
| A | A |
| B | B |
| C | C |
<table > <tbody> <tr> <td>A</td> <td>A</td> </tr> <tr> <td>B</td> <td>B</td> </tr> <tr> <td>C</td> <td>C</td> </tr> </tbody> </table>
そろそろ全体が見えてきたのではないでしょうか？
次はthタグを紹介します！
thタグ 見出しのセルを追加する
tdタグではセルの追加を行いましたが、thタグはセルの見出しの部分を追加します
tdタグでも賄うことは出来るのですが、thタグを使うほうが構文的には適切です。
またCSSを扱う際にも、thタグを使うほうが編集をやりやすくなると思います
では、最初に紹介した表をもう一度確認してみましょう
| 日付 | 今日の勉強時間 |
|---|---|
| 2019年 4月1日 | 3時間 |
| 2019年 4月2日 | 5時間 |
| 2019年 4月3日 | 1時間 |
| 2019年 4月4日 | 4時間 |
タグはこちらです。
<table> <tbody> <tr> <th>日付</th> <th>今日の勉強時間</th> </tr> <tr> <td>2019年 4月1日</td> <td>3時間</td> </tr> <tr> <td>2019年 4月2日</td> <td>5時間</td> </tr> <tr> <td>2019年 4月3日</td> <td>1時間</td> </tr> <tr> <td>2019年 4月4日</td> <td>4時間</td> </tr> </tbody> </table>
以上がtableタグの基本です
これらを覚えていれば、簡単な表を組むことが出来ると思います。
最後に、より便利にするための機能を紹介します
colspan rowspanセルを結合する
まずはこちらをご覧下さい
| 日付 | 2019年 4月1日 | 2019年 4月2日 | 2019年 4月3日 | やすみ | 2019年 4月6日 |
|---|---|---|---|---|---|
| 今日の勉強時間 | 3時間 | 5時間 | 1時間 | 5時間 |
<table> <tbody> <tr> <th>日付</th> <td>2019年 4月1日</td> <td>2019年 4月2日</td> <td>2019年 4月3日</td> <td rowspan="2">やすみ</td> <td>2019年 4月6日</td> </tr> <tr> <th>今日の勉強時間</th> <td>3時間</td> <td>5時間</td> <td>1時間</td> <td>5時間</td> </tr> </tbody> </table>
『やすみ』という枠を追加してみました
これはrowspanで縦に繋げています。
tdのすぐ後ろにrowspanで数値を追加します
ここで入れている2という数は、結合させたいセルの数です
colspanは横にセルを繋げます。
rowspanは縦にセルを繋げます。
コメント