【HTML table】表を作成する基本からレイアウトの方法までを解説

HTMLで表を作成してみたい
tableタグの基本的な使い方を理解したい
思い通りのレイアウトで表を作成したい

HTMLを使用していると、表を作成する機会はよくあると思います。しかし指定できることが多すぎて、使い方についていまいちよくわかっていない方も多いのではないでしょうか?

こんにちは。HTML、CSSが得意な侍エンジニア塾ブログ編集部のシホです!HTMLで表を作成するときにタグの使い方や、表のレイアウトの方法に悩むことはありませんか?

今回は表を作成する際に使うタグの基本的な使い方から、テーブルの装飾、セルのレイアウト、文字のレイアウトについて説明します。

読み終わるころには思い通りの表が作れるようになっているでしょう。ぜひHTMLで表の使い方をマスターしましょう!

HTMLのtableタグの基本

まずは表作成の基本から説明します。次の表を作成するとしましょう。

作成したい表のイメージ
このような表は、tr、th、tdの要素を組み合わせることで作ることができます。それぞれの要素の役割は次の図のようになります。

tr,th,tdの説明

要素を<>で囲んだものがタグと呼ばれます。要素名は3つとも似ていてとても紛らわしいので、何の略かを理解すると覚えやすいです。

tr要素

trは「Table Row(行)」の略です。表の行を1つ作成します。

th要素

thは「Table Header(見出し)」の略です。表の見出しとなるセルを1つ作成します。

td要素

tdは「Table Data(データ)」に略です。表のデータとなるセルを1つ作成します。

先ほどの作りたいイメージの表をコードで書くとこうなります。

※7行目の

については後ほど説明します。

ブラウザ表示
表示結果

基本中の基本のタグしか使っていないのでとてもシンプルな表が出来上がります。

テーブルの装飾

枠と罫線をつけるborder属性

表に枠と罫線をつける場合は、border属性を指定します。

先ほどの7行目に

というコードがありましたね。

borderとは、表の枠や罫線をつけるための属性で、border属性といわれます。「=”1″」の部分には枠の幅を指定します。

ここに指定できる数字は1以上の整数となっているので気をつけましょう。ちなみに、要素と属性の違いは、以下のようになります。

  • 要素→見出しや段落などの部品
  • 属性→要素に情報を付加するもの

つまりtableという要素にborder属性を使って枠の幅という情報を付加しているということになります。ということは、borderを指定しない場合、枠はどうなると思いますか?

borderを指定しない場合のサンプルコード

ブラウザ表示
borderを指定しなかった場合
このように、枠なしの表ができてしまいます。表を作るときは、border属性を指定し忘れないように気をつけましょう!

では次に、枠の幅を太くしてみましょう。border属性に”5″を指定してみます。

ブラウザ表示
枠を太くする表示結果

枠線に色をつけるbordercolor属性

枠に色をつける場合は、bordercolor属性を指定します。

「色」の部分には、「色名」か「16進数」で値を記述しましょう。

例)表の枠を赤にする場合

 

表の枠を赤にする場合のサンプルコード

ブラウザ表示

表の枠を赤くする

表の背景に色をつけるbgcolor属性

テーブルの背景に色をつける場合は、bgcolor属性を指定します。bgは「Back Ground(背景)」の略です。

表全体に色をつける

表全体に色をつけるので、table要素にbgcolor属性で色を指定しましょう。

 

表全体の背景を黄色にする場合のサンプルコード

ブラウザ表示

スクリーンショット 2018-04-24 13.03.31

行のみに色をつける

特定の行のみに色をつけるので、tr要素にbgcolor属性で色を指定しましょう。

 

1行だけ背景をピンクにする場合のサンプルコード

ブラウザ表示
1行だけ背景をピンクにする

セルのみに色をつける

特定のセルのみに色をつけるので、th要素またはtd要素にbgcolor属性で色を指定しましょう。

 

特定のセルに色をつける場合のサンプルコード

ブラウザ表示
セルに色をつける

セルのレイアウト

セルの幅や余白を調節する場合は、それぞれの属性にピクセルやパーセントを指定する必要があります。

ピクセルとパーセントの違い

ピクセルとは

絶対的な指定方法で、スクリーンの1ピクセルの長さを1とした単位です。表示されるサイズは使っているモニタの解像度に依存するので、どのモニタで表示しても同じように表示されません。

パーセントとは

相対的な指定法で、スクリーンの幅と高さを100%と考えたときの比率です。セルをパーセントで指定する時は基準となる長さが必要なため、最初にテーブル全体の長さを必ず指定する必要があります。

表の幅を変えるwidth属性

表全体やセルの幅を変える場合は、width属性を指定します。width属性に指定できる値はピクセルかパーセントです。

表全体の幅を変える

表全体の幅を変えるので、table要素にwidth属性で幅の大きさを指定しましょう。

ピクセルで指定する場合のサンプルコード

ブラウザ表示
表全体の幅を大きくする(ピクセル)

パーセントで指定する場合のサンプルコード

ブラウザ表示

表の横幅がブラウザの全体100%に対して50%の幅で表示されます。

スクリーンショット 2018-04-24 13.20.22

セルのみの幅を変える

セルのみの幅を変える場合は、表全体の長さ指定して、それに対してパーセントで幅を調整します。

セルの幅をパーセントで指定する場合のサンプルコード

ブラウザ表示

表全体の長さに対してセルの長さが30%と70%になっています。

セルの幅をパーセントで指定

表の高さを変えるheight属性

表の高さを変える場合は、hight属性を使ってwidth属性と同じようにピクセルかパーセントで指定していきます。

表全体の高さを変える

表全体の幅を変えるので、table要素にheight属性で幅の大きさを指定しましょう。

ピクセルで指定する場合のサンプルコード

ブラウザ表示
表の高さをピクセルで変える

パーセントで指定する場合のサンプルコード

ブラウザ表示

表の高さが親要素に対して、70%の幅で表示されます。
スクリーンショット 2018-04-24 13.31.37

セルのみの幅を変える

セルのみの幅を変える場合は、表全体の長さ指定して、それに対してパーセントで幅を調整します。

セルの幅をパーセントで指定する場合のサンプルコード

ブラウザ表示

表の高さに対して、各セルの高さが20%、30%、50%の割合になっています。

スクリーンショット 2018-04-24 13.47.52

 

セルの余白を調節するcellpadding属性

セルの余白を調節する場合は、cellpadding属性を指定します。cellpadding属性もピクセルかパーセントで指定します。

cellpadding属性に”10″を指定してみます。

ブラウザ表示

セルに余白ができました。
スクリーンショット 2018-04-24 12.25.57

セルを横方向に結合するcolspan属性

セルを横に結合する場合は、colspan属性を指定します。指定する数値は結合したいセルの数です。

セルを横方向に2つ結合する場合のサンプルコード

ブラウザ表示

スクリーンショット 2018-04-24 13.52.25

セルを縦方向に結合するrowspan属性

セルを横に結合する場合は、rowspan属性を指定します。colspan属性と同じように、結合したいセルの数を指定します。

セルを縦に2つ結合する場合のサンプルコード

ブラウザ表示スクリーンショット 2018-04-24 12.19.22

文字のレイアウトalign属性

文字のレイアウトにはalign属性に中央・左寄せ・右寄せを指定します。

文字を左に寄せるleft

表の中の文字を左に寄せたい場合は、align属性にleftを指定します。td要素の文字の初期値は左寄せになっています。

文字を左中央に寄せるcenter

表の中の文字を中央に寄せたい場合は、align属性にcenterを指定します。th要素の文字の初期値は中央寄せになっています。

文字を右に寄せるright

表の中の文字を中央に寄せたい場合は、align属性にrightを指定します。

文字の位置を変える場合のサンプルコード

ブラウザ表示スクリーンショット 2018-04-24 12.34.42

短時間でウェブサイト制作スキルをつけるには

HTMLやCSSはウェブサイト制作の基本であり、JavaScriptやPHPも合わせて覚えることでクオリティの高いサイトを作れるようになります。

もしあなたが今後、プログラミングスキルを身につけてエンジニアへ転職したい・個人でウェブサイト制作を請け負えるようになって働きたいなど、ウェブサイト制作を仕事にしていきたいならプログラミングスクールでの学習がおすすめです。

独学でも努力次第でサイト制作スキルが身につく人もいますが、弊社「侍エンジニア塾」の事例としてクラウドソーシングからお仕事を受注して授業中で納品まで行い、受講期間でエンジニアデビューした方もいます。

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年9月19日

こういった経験は独学ではできないので、プログラミングを仕事にしたい方はプログラミングスクールでの学習を検討しましょう。

スキル習得から仕事獲得まで

侍エンジニア塾ではコードを書けるようになるではなく、「プログラミングで人生を変える」ことを目的としたレッスンを行なっています。

  • あなたの理想に近い講師によるマンツーマン授業
  • あなたの目標から逆算したオーダーメイドカリキュラム
  • あなたのアイディアを形にするオリジナルアプリ制作

上記3つの特徴と共に仕事獲得までもご協力いたしますので、ウェブサイト制作を仕事にしたいなら是非無料体験レッスンへお越しください。

未経験でもサイト制作を仕事にするためのコツや、サイト制作の勉強を効率よく進めるための学習手順などもお教えいたします。

下記のボタンよりお申し込みください。オンラインでも受講可能のため、全国どこからでも受講可能です。

侍エンジニア塾
無料体験レッスンを受ける

まとめ

いかかがでしたか。これからHTMLを学ぶ場合、要素と属性がそれぞれ何をあらわしているのかを理解しておくと覚えやすくなります。

表作成のときにあれ?と思ったらぜひまたこの記事を参考にしてみてください!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説