記事の監修者
1000万PVを超える新規メディアの立ち上げを開発責任者として行う。株式会社ウィルゲートを退社後、民泊の運用代行業者のTwistを設立し上場企業に売却。2016年株式会社Market Drive（現テックアイエス）を設立し、取締役副社長に就任。200万ダウンロードを超えるアプリを開発。現在はプログラミングスクールのカリキュラム制作も担当。現場でのエンジニアリングと経営の両面を支えている。
「HTMLで自分で表を作りたい」、「列の数や幅を調整する方法がわからない」と思ったことはありませんか。
HTMLで画面を作っているとき、テキストで伝えるよりも表を使って表現をした方がわかりやすいことがあります。
HTMLで表を作成するにはtable、tr、th、tdという専用のタグを記述する必要があります。
しかし、記述する順番があったり、レイアウトを設定するルールがあったりとコツが必要です。
この記事では、HTMLで表を作る方法と表づくりが楽になるWeb便利ツールをご紹介します。
表を作るために使うのはタグと属性
表を作るために使うタグはtable、tr、th、td
HTMLで表を作るためには４種類のタグ（table、tr、th、td）を使います。
タグを書く方法は、他のタグと同じように開始を<>、終了を</>でくくります。
タグのそれぞれの意味は下記の通りです。
tableタグは表の開始と終了を示すタグ
tableタグは表の開始と終了を示すタグです。
<table>と</table>に挟まれた文字列を表として認識します。
表を構成する入れ子構造のタグの中で一番外側にくるタグです。
trタグは文字列を行に分けるタグ
trは「table row（表の行）」の略です。
<tr>と</tr>に挟まれた文字列を1行として認識します。
thタグは見出しを設定するタグ
thは「table header（表の見出し）」の略です。
文字列をとで区切ると行や列の見出しになります。
表の内容の文字に比べると太字に表示されます。
tdタグは表の内容を設定するタグ
tdは「table data（表のデータ、内容）」の略です。
文字列をとで区切ると表の内容となります。
属性（border、widthなど）をタグに加えて表のレイアウトを調整
それぞれのタグに属性を設定することで表のレイアウトを調整することができます。
書き方は下記のようにタグの開始側のカッコ内に記載します。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
これは「表の枠線を1ピクセルにする」ことを表しています。
border（枠線）属性以外にもたくさんの属性を設定することができます。
主な属性は下記のとおりです。
borderは表の枠線を設定する属性
先述した通り、borderは表の枠線を引く際に記述する属性です。
ピクセル単位で枠線の太さを設定します。
widthは表や列の幅を設定する属性
widthは表や列の幅を設定します。
幅の単位はピクセルかパーセントです。
パーセントで設定すると、画面や表に対する割合で表示されます。
heightは表や行の高さを設定する属性
heightは表や行の高さを設定します。
widthと同様に単位はピクセルかパーセントです。
rowspanは縦にセルを結合する属性
rowspanを設定すると、表のセルを縦に結合することができます。
例えば、「rowspan＝”2”」であれば、セルを縦に2つ分結合します。
colspanは横にセルを結合する属性
colspanは、表のセルを横に結合する際に使う属性です。
例えば、「colspan＝”3”」であれば、セルを横に3つ分結合します。
4つのタグと属性を使って表を作る方法を解説
table、tr、th、tdの順に記述 実際にHTMLで表を作る方法を紹介します。
今回は下記の表を作ります。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
まずはテキストで表の内容を記載しましょう。
項目の間にスペースを入れずに羅列することで、タグで区切りやすくなります。
まずはテキストで表の内容を記載しましょう。
項目の間にスペースを入れずに羅列することで、タグで区切りやすくなります。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
続いて、HTMLで表と認識させるためにtableタグで囲います。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
このままだと全てが１行に表示されるので、trタグで3行に分けます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
trタグを記載するときにわかりやすいように行の先頭に空白を入れておきましょう。
TABキーを押すと一発でずれますのでおすすめです。
trタグを追加した段階では、まだ全てが1行で表示されたままです。
続いて、見出しのthタグを1行目に追加します。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
最後にデータのtdタグを追加しましょう。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
これでtableタグの記載は完了です。
属性を追加して表の行、列のサイズや枠線のレイアウトを設定
今の状態だと枠線がなく、とても見づらい状態です。
そこで、tableタグにborder（枠線）属性を設定します。
書き方は下記の通りで、tableの後ろに半角スペースと「border=”1”」を入力します。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
これで表が完成しました。
テーブルタグ作成ツールを使えば、簡単に表を作れる
ここまで説明してきた通り、表を作るには4種類のタグと多くの属性を組み合わせる必要があります。
それらを全て手書きで書くのはとても大変だと思います。
さらに、タグの順番を間違えてしまったり、タグを閉じるのを忘れてしまったりとミスが生じることも多いです。
そんなときに役に立つのがテーブルタグ作成ツール（https://www.tagindex.com/tool/table.html）です。
これはHTMLのタグのリファレンスに便利なWebサイト「TAG idnex」内にあるWeb便利ツールです。
ツール内にある列数や行数などの必要項目を入力し、出力されたコードをコピーしてHTMLファイルへペーストするだけの簡単な使い方になっています。
tdタグ内は自分で記載する必要がありますが、タグのズレや不足を防ぐのにとても便利なツールです。
4つのタグを駆使して表を作ろう！便利ツールを使うもおすすめ
HTMLで表を作成する方法と便利ツールを紹介しました。
実際に4つのタグと多くの属性を使いこなして表を作成することは、最初はとても骨の折れる作業かもしれません。
しかし、タグや属性の使い方を覚えて何度か作成することで慣れていくと思います。
さらに、表を作成するのを手助けしてくれる強力な便利ツールもあります。
今回ご紹介した内容を参考に便利ツールを使いながら、自分好みの表を作成してください。
全国どこにいても学べる！超優良のプログラミングスクールまとめました【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール
自分の住んでるエリアでプログラミングスクールを探したい⭐️
エリア別で、おすすめのプログラミングスクールをまとめました。
ぜひ参考にしてみてくださいね。
北海道 / 東北
関東
群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川
中部
福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟
近畿
兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山
