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

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文法のチェックできるツールを解説しています。


当サイトは人気ブログランキングに参加しています。
かなりな位置にいますので、是非現在の順位を以下のボタンより確認してみて下さい。
↓ ↓


記事の内容はいかがだったでしょうか?

もしも当記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると嬉しいです!
  

コメントを残す


月収100万円を稼ぐ為のメルマガ講座に無料登録しませんか?


お名前 必須
メール 必須



サブコンテンツ

このページの先頭へ