この表をテーマにした HTML チュートリアルでは、基本的な表の作成方法、境界線の追加と削除、レイアウトの作成、セルを希望の形状とサイズに設定する方法、セルの内容を配置する方法、色を追加する方法について説明します。
初心者向けに設計されており、分かりやすくなっています。HTML 5のコードがどのようになっているかを確認できるよう、画像も掲載しています。
こちらの無料のHTMLコードエディタもおすすめです。左側のセクションにコードを入力すると、右側にプレビューが表示されます。将来HTMLの世界に挑戦したいと考えている方には、ぜひ使ってみてください。
基本的なテーブルを作成する
表レイアウトで凝ったレイアウトを作る前に、表を作成する必要があります。<table>タグと</table>タグは、表の他のすべての要素を囲みます。表の各行は<tr> （表の行）タグで設定され、その後に各行のセルに対応する<td>（表のデータ）タグが続きます。以下のコードは、シンプルな2行2列の表を作成します。
<table>
<tr>
<td>セルの内容 </td>
<td>セルの内容</td>
</tr>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
</table>
<table> 、<tr>、<td>タグには、表自体の外観や内容の配置を制御できる様々な属性があります。（これらの属性について詳しくは、表に関するその他のヒントをご覧ください。）これらの属性がない場合、表はデフォルトでセルの内容に合わせて配置されます。単語間にスペースを入れたいので、3行目に を追加したことに気付くでしょう。そのため、ほとんどのブラウザでは、上記のコードは次のようなボーダーレスな表を生成します。
参照: 初心者のための 5 つの必須 HTML ルール (TechRepublic)
境界線の追加と削除
もちろん、表にはテキストだけを入れる必要はありません。Webでよく見かける複雑なレイアウトの多くは、画像とテキストを複数のセルに組み合わせて配置されています。セル間の線、つまり境界線は見えませんが、実際にはそうではありません。<table>タグのborder属性を使うと、境界線の太さ（ピクセル単位）を指定できます。
2ピクセルの境界線を持つ表を作成するには、<table>タグにborder=”2″を追加するだけです。境界線を非表示にするには、border属性を0に設定します。（ほとんどのブラウザでは表の境界線のデフォルトは0ですが、明示的に0を指定することで、すべてのブラウザで境界線を非表示にすることができます。）
以下に、その様子を示す2つの例を示します。左側は、2ピクセルの境界線を持つ表と、非表示の境界線を持つ表のコードです。右側は完成品です。
例1：
<table border=”2″>
<tr>
<td>当社の製品を見る</td>
</tr>
<tr>
<td>当社について知る</td>
</tr>
</table>
例2 :
<table border=”0″>
<tr>
<td>当社の製品を見る</td>
</tr>
<tr>
<td>当社について知る</td>
</tr>
</table>
便利なトリックがあります。表に境界線を表示してデザインすると、要素がどのように分割されているかが一目瞭然になります。すべての要素を配置したら、border属性を0に変更してください。
参照：AI生成コードが企業に障害やセキュリティ問題を引き起こす（TechRepublic）
テーブルレイアウトを作成する
表のコンテンツをレイアウトするための2つの属性は、cellpaddingとcellspacingでした。しかし、HTML 5ではこれらの属性はサポートされなくなりました。これは問題ではありません。スタイルシート言語であるカスケーディング・スタイル・シートを使用すれば解決できます。CSSは、ドキュメントの見た目やスタイルを指定できるため、知っておくと便利です。
この例のCSSセクションは<style>で始まり、 </style>で終わります。ボーダーは2ピクセルの黒一色に設定され、パディングは10ピクセルに設定されているため、文言は一目瞭然です。パディングは、セルの内容とセルの端との間の距離（ピクセル単位）を制御します。
<style>
テーブル {
border: 2px solid black;
border-collapse: collapse;
}
td {
padding: 10px;
}
</style>
<table>
<tr>
<td>当社の製品を見る</td>
</tr>
<tr>
<td>当社について知る</td>
</tr>
</table>
セルを好きな形にする
HTMLでは、表のレイアウトに単純なグリッドを使用する必要はありません。<td>タグのrowspan属性とcolspan属性を使えば、特定のセルを複数のセルの高さまたは幅にまたがって配置できます。これらの属性を使用するには、またがるセルの数に応じて値を割り当てるだけです。
たとえば、次の表には 3 つの列がそれぞれ 2 行あります。
<table border=”2″>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
</table>
最初のセルを 3 つの列すべてにまたがるようにするには、その<td>タグにcolspan=”3″を追加し、その行の他の 2 つの<td>タグを削除します。
<table border=”2″>
<tr>
<td colspan=”3″>セルの内容</td>
</tr>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
</table>
最初のセルを 2 行にまたがるようにしたい場合は、<td>タグにrowspan=”2″を追加し、 2 行目の最初の<td>タグを削除します。
<table border=”2″>
<tr>
<td rowspan=”2″>セルの内容</td>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
</table>
もちろん、これらの例よりもはるかに複雑な表を作成することもできます。その場合は、表を作成する前に必ず概要をまとめておくことをお勧めします。
セルを希望のサイズにする
表のセルは、デフォルトでコンテンツに合わせてサイズが決まります。しかし、セルのサイズを変えたい場合はどうすればよいでしょうか？<td>タグのwidth属性とheight属性を入力します。サイズをピクセル単位で指定するだけで設定完了です。例えば、セルの幅を100ピクセル、高さを80ピクセルにするには、次のようにします。
<table border=”2″>
<tr>
<td width=”100″ height=”80″>セルの内容</td>
</tr>
</table>
幅と高さはあくまでも推奨属性であることに注意してください。つまり、セルに設定された幅または高さが同じ列または行内の他のセルと競合しない場合にのみ有効になります。
参照: クイック用語集: Web ブラウザ (TechRepublic Premium)
セルの内容を正確に配置する
表のセルの形状とサイズを変更すると、セルはコンテンツに合わせて自動的に形状を変形しなくなります。そのため、このような表のセル内で要素を任意の場所に配置するには、<td>タグの 2 つの属性が必要です。1つはalign 属性で、セル内のオブジェクトをleft、right、またはcenter に配置します。もう 1 つはvalign属性で、 top、middle、bottom の指示を使用してオブジェクトを上下に移動します。(デフォルトでは、要素は水平方向には左揃え、垂直方向には中央揃えになります。) 例えば、100 x 80 ピクセルのセル内でテキストを右上揃えにするには、次のコードを使用します。
<table border=”2″>
<tr>
<td width=”100″ height=”80″ align=”right” valign=”top”>セルの内容</td>
</tr>
</table>
注意：表のセルにオブジェクトを配置し、正しく配置したい場合は、セルの開始<td>タグの後と終了</td>タグの前にスペースを空けないでください。特に画像を扱う場合は、セルの内容が<td>タグに接するように配置することで、適切な配置が保たれます。
テーブルをカラフルに彩る
テーブルがページに溶け込んでしまうのが嫌ですか？それなら背景色を変えてみましょう！以前は、<table>タグにbgcolor属性を追加し、標準的な16進数のカラーコードか単語で色を指定するだけで済みました。しかし、この属性はHTML 5ではサポートされなくなりました。つまり、再びCSSを使う必要があるのです。
たとえば、次のコードは淡い青色の背景を持つシンプルなテーブルを作成します。
<style>
テーブル {
背景色: #CCFFFF;
}
td {
パディング: 10px;
}
</style>
<table>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
<tr>
<td>セルの内容</td>
<td>セルの内容</td>
</tr>
</table>
ページにテーブルを配置する
表内の要素の書式設定に加えて、ページ上での表の表示位置も制御できます。2つの<table>属性が役立ちます。
- align属性は、テーブルをページ上で左、右、または中央に配置します(デフォルトは左)。
- width属性を使用すると、テーブルの幅のピクセル数を固定値で指定できます ( <table width=”65″>のように数値を使用)。また、テーブルがブラウザー ウィンドウの幅の一定割合を占めるように指定できます ( <table width=”90″>のようにパーセンテージを指定)。
したがって、次のコードは、幅 150 ピクセルでページの中央に配置されたテーブルを設定します。
<テーブル幅=”150″ 位置=”中央”>
以下のコードは、ブラウザ ウィンドウの幅の 4 分の 3 のテーブルをページの右側に配置します。
<表の幅=”75%” 位置=”右”>
TechRepublic AcademyではHTML、CSSに関する詳しい情報を提供しています
ご覧のとおり、HTMLの基本的な知識があれば、表は簡単に作成できます。実際、HTMLに慣れてくると、HTMLの一部をCSSで置き換えることができることに気づくでしょう。
HTMLとCSSについてもっと学びたい方は、TechRepublic Academyをご覧ください。豊富なトレーニングコースをご用意しています。ぜひご活用ください！
ドナルド・セント・ジョンの寄稿、コーマック・フォスター、マーク・カウフマン、チャリティ・カーン、マット・ロッターによる追加資料とアドバイス。
