「HTMLで自分で表を作りたい」、「列の数や幅を調整する方法がわからない」と思ったことはありませんか。HTMLで画面を作っているとき、テキストで伝えるよりも表を使って表現をした方がわかりやすいことがあります。HTMLで表を作成するにはtable、tr、th、tdという専用のタグを記述する必要があります。記述する順番があったり、レイアウトを設定するルールがあったりとコツが必要です。この記事では、HTMLで表を作る方法と表づくりが楽になるWeb便利ツールをご紹介します。表を作るために使うタグはtable、tr、th、tdHTMLで表を作るためには4種類のタグ(table、tr、th、td)を使います。タグを書く方法は、他のタグと同じように開始を<>、終了を</>でくくります。タグのそれぞれの意味は下記の通りです。tableタグは表の開始と終了を示すタグtableタグは表の開始と終了を示すタグです。<table>と</table>に挟まれた文字列を表として認識します。表を構成する入れ子構造のタグの中で一番外側にくるタグです。row(表の行)」の略です。<tr>と</tr>に挟まれた文字列を1行として認識します。header(表の見出し)」の略です。文字列をとで区切ると行や列の見出しになります。表の内容の文字に比べると太字に表示されます。data(表のデータ、内容)」の略です。文字列をとで区切ると表の内容となります。属性(border、widthなど)をタグに加えて表のレイアウトを調整それぞれのタグに属性を設定することで表のレイアウトを調整することができます。書き方は下記のようにタグの開始側のカッコ内に記載します。CodePen.これは「表の枠線を1ピクセルにする」ことを表しています。border(枠線)属性以外にもたくさんの属性を設定することができます。主な属性は下記のとおりです。先述した通り、borderは表の枠線を引く際に記述する属性です。ピクセル単位で枠線の太さを設定します。widthは表や列の幅を設定する属性widthは表や列の幅を設定します。幅の単位はピクセルかパーセントです。パーセントで設定すると、画面や表に対する割合で表示されます。heightは表や行の高さを設定する属性heightは表や行の高さを設定します。widthと同様に単位はピクセルかパーセントです。rowspanは縦にセルを結合する属性rowspanを設定すると、表のセルを縦に結合することができます。「rowspan=”2”」であれば、セルを縦に2つ分結合します。colspanは横にセルを結合する属性colspanは、表のセルを横に結合する際に使う属性です。「colspan=”3”」であれば、セルを横に3つ分結合します。実際にHTMLで表を作る方法を紹介します。今回は下記の表を作ります。CodePen.まずはテキストで表の内容を記載しましょう。項目の間にスペースを入れずに羅列することで、タグで区切りやすくなります。テキストで表の内容を記載しましょう。項目の間にスペースを入れずに羅列することで、タグで区切りやすくなります。CodePen.続いて、HTMLで表と認識させるためにtableタグで囲います。CodePen.このままだと全てが1行に表示されるので、trタグで3行に分けます。CodePen.trタグを記載するときにわかりやすいように行の先頭に空白を入れておきましょう。TABキーを押すと一発でずれますのでおすすめです。trタグを追加した段階では、まだ全てが1行で表示されたままです。続いて、見出しのthタグを1行目に追加します。CodePen.最後にデータのtdタグを追加しましょう。CodePen.これでtableタグの記載は完了です。今の状態だと枠線がなく、とても見づらい状態です。そこで、tableタグにborder(枠線)属性を設定します。書き方は下記の通りで、tableの後ろに半角スペースと「border=”1”」を入力します。CodePen.これで表が完成しました。テーブルタグ作成ツールを使えば、簡単に表を作れるここまで説明してきた通り、表を作るには4種類のタグと多くの属性を組み合わせる必要があります。それらを全て手書きで書くのはとても大変だと思います。タグの順番を間違えてしまったり、タグを閉じるのを忘れてしまったりとミスが生じることも多いです。そんなときに役に立つのがテーブルタグ作成ツール(https://www.tagindex.com/tool/table.html)です。idnex」内にあるWeb便利ツールです。ツール内にある列数や行数などの必要項目を入力し、出力されたコードをコピーしてHTMLファイルへペーストするだけの簡単な使い方になっています。tdタグ内は自分で記載する必要がありますが、タグのズレや不足を防ぐのにとても便利なツールです。4つのタグを駆使して表を作ろう!便利ツールを使うもおすすめHTMLで表を作成する方法と便利ツールを紹介しました。実際に4つのタグと多くの属性を使いこなして表を作成することは、最初はとても骨の折れる作業かもしれません。タグや属性の使い方を覚えて何度か作成することで慣れていくと思います。表を作成するのを手助けしてくれる強力な便利ツールもあります。今回ご紹介した内容を参考に便利ツールを使いながら、自分好みの表を作成してください。