この記事は約 5 分で読めます ( 約 2893 文字 )

記事の概要

この記事では表の書き方について書いていきます。記事の構成は以下の通りです。

  • HTMLタグで表を書く理由
  • 表の書き方
  • まとめ

HTMLタグで表を書く理由

表なんて縦棒"|"と項目だけで十分と思っているかたもいらっしゃるかもしれません。しかし、実際にするとレイアウトが崩れる等なかなかうまくいかないものです。表を作る際はHTMLタグを使うことで綺麗な表を作ることが出来ます。

表の書き方

普通の表の書き方

まずは併合がない普通の表の書き方を説明します。<tr>タグで囲まれた部分が1行に表示されます。表の見出しには<th>タグを、表のデータには<td>を使います。

ソースコードの例1

<table>
<tbody>
<tr><th>あ行</th><td>あいうえお</td></tr>
<tr><th>か行</th><td>かきくけこ</td></tr>
<tr><th>さ行</th><td>さしすせそ</td></tr>
</tbody>
</table>

例1の実際の表示

あ行あいうえお
か行かきくけこ
さ行さしすせそ

ソースコードの例2

<table>
<tbody>
<tr><th></th><th>あ音</th><th>い音</th><th>う音</th><th>え音</th><th>お音</th></tr>
<tr><th>あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
<tr><th>か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
<tr><th>さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
</tbody>
</table>

例2の実際の表示

あ音い音う音え音お音
あ行
か行
さ行

横のいくつかのセルを併合した表の書き方

横のいつくかのセルを併合する際は"colspan=2"と言った感じにcolspanオプションを使います。

ソースコードの例

<table>
<tbody>
<tr><th colspan=2>名前</th><th colspan=2>英語表記</th></tr>
<tr><td colspan=2>ワンダーウォール</td><td colspan=2>Wonder Wall</td></tr>
<tr><th colspan=4>種類</th></tr>
<tr><td colspan=4>無属性クリーチャー</td></tr>
<tr><th>レア度</th><th>コスト</th><th>ST</th><th>HP</th></tr>
<tr><td>S</td><td><b>G</b>30+□</td><td>0</td><td>30</td></tr>
<tr><th colspan=2>配置制限</th><th colspan=2>アイテム制限</th></tr>
<tr><td colspan=2>なし</td><td colspan=2>武器・防具</td></tr>
<tr><th colspan=4>効果</th></tr>
<tr><td colspan=4>防御型;無効化[火・水・地・風]</td></tr>
</tbody>
</table>

実際の表示

名前英語表記
ワンダーウォールWonder Wall
種類
無属性クリーチャー
レア度コストSTHP
SG30+□030
配置制限アイテム制限
なし武器・防具
効果
防御型;無効化[火・水・地・風]

縦のいくつかのセルを併合した表の書き方

縦のいつくかのセルを併合する際は"rowspan=2"と言った感じにrowspanオプションを使います。

ソースコードの例

<table>
<tbody>
<tr><th>機種名</th><th>OS</th></tr>
<tr><td>Xperia</td><td rowspan="2">Android</td></tr>
<tr><td>Zenfone</td></tr>
<tr><td>iPhone</td><td>iOS</td></tr>
</tbody>
</table>

実際の表示

機種名OS
XperiaAndroid
Zenfone
iPhoneiOS

まとめ

今回は<table>タグの使い方について書きました。