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

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【HTML入門】テーブルにキャプションをつける方法

Pocket

印刷物では、表の上や下に表の番号やタイトル、表の説明がついています。この部分をキャプションといいます。HTMLでは、キャプションはテーブルと一緒に指定します。

キャプションをつける方法

テーブルにキャプションをつけるには、tableタグの後にキャプションを指定します。
captionタグでキャプションを指定できます。

タグの間に記述した内容が、キャプションとなります。
キャプションには、表の番号、タイトル、説明文などを入れることができます。
captionタグは、tableタグの直後、trタグの前に記述します。
※captionタグは、1つのtableタグに1つだけ指定できます。2つ以上指定することはできません。

キャプションの位置の指定

何も指定しないままでは、captionタグの内容は表の上に中央揃えで表示されます。
captionタグにalign属性を指定することで、上下および左右の位置を指定することができます。

と指定すると、キャプションはテーブルの上部に左端から表示されます。align属性では上下左右を英単語で指定します。

  • top:テーブルの上に中央揃えで表示される
  • bottom:テーブルの下に中央揃えで表示される
  • left:テーブルの上に左寄せで表示される
  • right:テーブルの上に右寄せで表示される

指定しないままだと、初期状態のままテーブルの上に中央揃えで表示されます。

注意点

タイトルタグ

は、ページタイトルを記述するために使用します。テーブルのタイトルには使えません。
HTML5の場合
HTML5以降は、captionタグではなくfigcaptionタグを使用します。これはHTML5で追加された新しいタグです。またHTML5では位置を指定するalign属性は廃止されています。 キャプションの位置を指定するには、スタイルシートを使用します。

HTML上の表示

【おすすめ記事】

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

投稿者:プロスタ編集部

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

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

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

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

あわせて読みたい

関連記事

ページ上部へ戻る