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フィファレンスtable – テーブル(表)
- テーブルタグ作成ツール
- HTMLテーブルをスタイルシートで
- テーブルタグ 解説
tableタグの具体的な解説が表示されています。
テーブルタグを生成できるツールサイトです。
表の大きさや背景色、行数と列数、文字揃えなどを設定することができます。
細かく設定したtableタグが自動生成できます。
tableタグが解説されています。
関連記事
以下の記事は、当記事と同じく基本的なhtmlをまとめています。
以下の記事でhtml文法のチェックできるツールを解説しています。
コメント