画像とテーブルを使ってみよう

このレッスンでは、画像とテーブルの基本的な使い方を学び、視覚的な情報や表形式のデータを表示できるようになることを目標にします。「HTML img alt」「HTML table 作り方」で調べている方向けです。

<img src="URL" alt="説明">で画像を表示します。altは画像が読み込めないときの代わりの説明文で、SEOやアクセシビリティのためにも大切な属性です。表は<table>の中に<tr>(行)と<td>(セル)を並べて作ります。

サンプルコードでは、<img>タグで画像を、<table>タグで名前と点数の一覧表を作っています。<th>は見出しセルを表すタグで、<td>(通常のセル)と使い分けることで、表の構造がより意味的に正しくなります。

初心者がよくつまずくのが、alt属性の書き忘れです。altがないと、画像が表示されないときに何も情報が得られず、視覚障害のある方が読み上げソフトで内容を理解する妨げにもなります。装飾目的だけの画像ならalt=""と空にする、という使い分けも覚えておくと役立ちます。

成績表や時刻表のように、行と列で整理されたデータを表示したいときにテーブルは向いています。ただし、レイアウト目的でテーブルを使うのは現代のWeb制作では避けられ、あくまで表形式のデータ表示に使うのが基本です。