1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【HTML入門】テーブルやセルの大きさを指定するには

Pocket

テーブルやセルの大きさは、セル内の文字数やウィンドウサイズで自動的に決まります。つまり見る人の端末やウィンドウサイズが変わると、表示されるテーブルの大きさも変化します。
決まった形で表を見て欲しいときには、テーブルやセルの大きさを指定します。テーブルの大きさを指定すると、違う端末で見てもレイアウトが変化しないようにできるからです。

テーブル全体のサイズの指定

テーブル全体のサイズを指定するには、tableタグで幅と高さの属性を指定します。
<table width=”数値” height=”数値”>でテーブルの横幅と高さを指定できます。

テーブルのサイズを指定する

“数値”は、ピクセル数かパーセントで指定します。
数字だけで指定するとピクセル数での指定になります。<table width=”200″ height=”100″>なら、幅が200ピクセルで高さが100ピクセルのテーブルになります。

パーセントで指定した場合、ブラウザのウィンドウ全体を100%として、その何パーセントになるかを指定します。<table width=”50%” height=”30%”>だと、ウィンドウ全体の半分の幅で、ウィンドウの30%の高さのテーブルになります。

幅と高さの片方だけを指定する

幅と高さ、どちらか片方の属性だけを指定することもできます。
サイズを指定しない方は、セル内の文字数に合わせて大きさが自動的に調整されます。

セルのサイズの指定

テーブル全体ではなく、1つのセルの大きさを指定することもできます。指定するときは、thタグやtdタグに幅と高さの属性を指定します。
<th width=”数値” height=”数値”>、または<td width=”数値” height=”数値”>でセルの幅と高さを指定できます。

セルのサイズを指定する

“数値”は、ピクセル数かパーセントで指定します。
数字だけで指定するとピクセル数での指定になります。<table width=”70” height=”30″>なら、幅が40ピクセルで高さが30ピクセルのセルになります。

パーセントで指定した場合、テーブル全体を100%として、その何パーセントになるかを指定します。

だと、テーブルの半分の幅で、テーブルの30%の高さのセルになります。

列や行全体に影響する

あるセルの幅を指定すると、その列全体のセルが同じ幅になります。また、その行全体のセルが同じ高さになります。1つのセルのサイズを指定すると、同じ行、または列のセルすべてに影響がおよびます。

幅と高さの片方だけを指定する

幅と高さ、どちらか片方の属性だけを指定することもできます。
セルの幅を指定してもそのセルに入る文字数が多ければ、指定した幅の端で折り返して自動的に改行されます。

サイズを指定しない方はセル内の文字数に合わせて自動的に調整されます。また、それに合わせてテーブルの大きさも変化します。

テーブルのサイズも指定している場合

テーブル全体の大きさも指定している場合は、セルの全体を表示できなくなることもあります。セルの幅が200ピクセルでテーブル全体の幅が180ピクセルの場合、テーブルの大きさが180ピクセルなので、200ピクセルのセルは途中で切れてしまいます。

パーセント指定の問題点

パーセントでの指定は相対的な指定方法なので、見る人や端末によって表示が異なります。使用している端末やブラウザのウィンドウサイズに対する大きさを指定することになるからです。常に同じサイズのテーブルを表示したい場合は、パーセントではなくピクセルでサイズ指定をした方がいいでしょう。

すべての列の幅をパーセントで指定する場合は、合計が100%でなくてはなりません。幅を指定しない列がある場合は、全体が100%になるように自動的に計算されます。

テーブルやセルの高さ指定の問題点

テーブルやセルに対するheight属性(高さの指定)は、HTML 4.01では定義されていません。古いWebサイトを表示するために使うことはできますが、非推奨とされています。テーブルやセルの高さ指定はスタイルシートで行うのが一般的です。

HTML上の表示

実行結果

テーブル全体と、セルの一部のサイズを指定したテーブルの例です。
右側の列の幅は自動的に120ピクセルに、上の列の高さは自動的に60%に計算されます。

おすすめ
無料で使える!HTMLの学習サイトBEST7
HTMLの本・参考書の評判

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る