【HTML】テーブルの作り方【セルの結合も！】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回はテーブルの作り方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

１分で理解できるHTML/CSS講座シリーズはじめっ！

テーブルとは？

テーブルとはいわゆる表をのことです。

エクセル等でよく見かけるこのような表を
HTMLで作成できるようになることが今回の目標です。

<table border="1"></table>

テーブル全体を囲うタグ。
“ここに表のデータがあるよ！”
というマークアップです。

border=”数値” という記述をしないと線が非表示になるよ！

<tr></tr>

trタグは”Table Row”の略で行のことです。

<td></td>

tdタグは”Table Data”の略で1つのセルのことです。

<th></th>

thタグは”Table Head”の略で見出しのことです。

thタグは任意の位置に設定できるよ！

上記のタグの情報を整理すると
このようになっていることがわかります。

さきほど資料に載せたテーブルを
実際に記述するとこのようになります。

テーブルの作り方が理解できて偉い！

あまり使わないかもしれないですが、
エクセルのようにセルを結合することもできます。

<!-- 左右のセルを結合 -->
<th colspan="2"></th>

<!-- 上下のセルを結合 -->
<th rowspan="2"></th>

colspan：column span, 左右のセルを結合
rowspan：row span, 上下のセルを結合
厳密には結合ではなく使うセルの数を指定しているよ！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈