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

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

【HTML入門】テーブル(表)の位置の指定の仕方

Pocket

通常テーブルはウィンドウの左端に表示され、テーブルに続く文字はテーブルの下に表示されます。しかしウィンドウが狭い場合など、テーブルを右側に寄せたり、文字を回り込ませてテーブルの横に表示したいときがあります。その場合は、テーブルの位置を指定します。

表の位置の指定

テーブルの表示位置を指定するには、tableタグで位置の属性を指定します。
<table align=”位置“> で、テーブルの位置を指定できます。

位置は左右を英単語で指定します。 <table align=”left”> で、表の位置をウィンドウの左端に指定します。テーブルの位置は、次の3種類が指定できます。

  • left:テーブルを左端に指定する
  • center:テーブルを中央に指定する
  • right:テーブルを右側に指定する

align属性を指定しない場合は、テーブルは左端に表示されます。

表の周りの文字の回り込み

上の方法でテーブルの位置を指定すると、それに続く文字の位置も自動的に指定されます。これを「文字の回り込み」と言います。
ページを長くしたくない場合や、表に関連する内容のテキストを表の横に表示したいときに利用します。

  • left:テーブルは左に、文字はテーブルの右側に回り込む
  • center:テーブルは中央に表示され、文字の回り込みは起こらない
  • right:テーブルは右に、文字はテーブルの左側に回り込む

“center”を指定したときは、文字の回り込みは起こりません。文字はすべてテーブルの下に表示されます。
align属性を指定しない場合は、テーブルは左端に表示され、文字の回り込みは起こりません。文字はテーブルの下に表示されます。
文字が長くてテーブルの高さを超えてしまう場合は、あふれた文字が表の下側に表示されます。

文字の回り込みを解除するには

テーブルの位置は左右どちらかに指定したいけれど文字は回り込ませたくない場合もあります。しかし、テーブルの位置を指定すると自動的に文字の回り込みが起こってしまいます。
そこで、回り込みの解除を指定することができます。

回りこみの解除は、テーブルの下に表示させたい文字の直前にbrタグで位置属性のクリアを指定します。
<br clear=”値”>で属性の解除、すなわち回り込みの解除を行います。

<br clear=”left”> で、テーブルの右側への文字の回り込みを解除します。値には次の4種類が指定できます。

  • left:テーブルの位置は左端のまま、文字を右側に回り込ませる指定を解除する
  • right:テーブルの位置は右端のまま、文字を左側に回り込ませる指定を解除する
  • all:テーブルの位置は指定のまま、文字の回り込みをすべて解除する
  • none:文字の回り込みを解除しない

回り込みの解除で指定する値は、位置の指定と同じ値を使用します。
何も指定しないと、”none”を指定したと同じように、テーブルの位置は指定のまま、文字の回り込みも解除しません。

HTML上の表示

【おすすめ記事】

【HTML入門】テーブルやセルの大きさを指定するには
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】余白の取り方(paddingとmargin)について

投稿者:プロスタ編集部

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

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

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

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

あわせて読みたい

関連記事

ページ上部へ戻る