HTML表のつくり方tableタグ使い方を解説

HTML

html

HTMLを使用したサイト制作で、表を制作する時のhtmlタグの使い方を解説します。
テーブルタグ(table)を利用しての表作成はHTML記述でも複雑な部類ですが、
すでに作成されているテーブルタグを利用してカスタムすることにより、
ある程度簡単に表記述をしていくことができます。

テーブルタグの使い方例と応用方法

すでに作成されているテーブルタグを利用して数値やキーワードを変更することにより、
実際にHTMLタグに深く精通していなくてもある程度の表を作成していけます。

以下に基本的なテーブルタグを利用した表例とHTML記述を掲載します。
記述をコピペした後に、部分的に変更して使用していきましょう。

変更すべき点は以下等です。

  • キーワードの装飾(太文字・サイズ・文字色)
  • 枠の数(trタグの数で調整していく)

テーブルタグも利用方法を理解していくと様々な活用ができます。

長渕剛 名曲リスト

曲名 年代 最高度 感想
とんぼ 1988年 100点! ボクはこの曲で、人生が変わりました。
雨の嵐山 1977年 100点! 剛のデビュー曲!!ここからすべてははじまった!
ろくなもんじゃねえ 1987年 100点! 親子ジグザグ主題歌。本気の怒りがここにある!
静かなるアフガン 2002年 100点! 湾岸戦争への剛からのメッセージ

上記のような表を作成するには、「table」タグを使用します。

<h4>長渕剛 名曲リスト</h4>
<table border=”1″>
<tbody>
<tr>
<td>曲名</td>
<td>年代</td>
<td>最高度</td>
<td>感想</td>
</tr>
<tr>
<td>とんぼ</td>
<td>1988年</td>
<td>100点!</td>
<td>ボクはこの曲で、人生が変わりました。</td>
</tr>
<tr>
<td>雨の嵐山</td>
<td>1977年</td>
<td>100点!</td>
<td>剛のデビュー曲!!ここからすべてははじまった!</td>
</tr>
<tr>
<td>ろくなもんじゃねえ</td>
<td>1987年</td>
<td>100点!</td>
<td>親子ジグザグ主題歌。本気の怒りがここにある!</td>
</td>
</tr>
<tr>
<td>静かなるアフガン</td>
<td>2002年</td>
<td>100点!</td>
<td>湾岸戦争への剛からのメッセージ</td>
</tr>
</tbody>
</table>

上記のように記述します。

テーブルタグは記述方法がたくさんありますので、参考となるサイトを掲載しておきます。

関連記事

以下の記事は、当記事と同じく基本的なhtmlをまとめています。

以下の記事でhtml文法のチェックできるツールを解説しています。

コメント