2020年1月16日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はテーブル(表)の作り方について解説していきます。テーブル作成は使用する要素が多く難しく感じるかもしれません。できるだけわかりやすく解説しましたので、一緒に頑張って理解していきましょう!この記事の要点まとめテーブルって何?HTMLにおいてテーブルとは、表を意味する。テーブル作成に使用する要素この記事で紹介するテーブル作成に使用する要素は8種類。table要素テーブルをつくる際に使用する要素。caption要素テーブルのタイトルを表示する要素。tr要素テーブルの行を表す要素。th要素テーブルの見出しセルを表す要素。td要素テーブルのセルを表す要素。要素の行グループを表す要素。セルを結合する属性セルを結合するにはcolspan属性、もしくはrowspan属性を使用する。理解してテーブルを作ってみようテーブルは一度自分で実際に作ってみて、しっかりと理解することが大切。テーブルって何?ハリボーテーブル?食卓かな?間違いではないんだけど、IT用語でテーブルは「表」を意味する言葉として使われるよ。ヒナHTMLを使いwebサイトやブログを作成したり、記事中でわかりやすくまとめたりするために、テーブルはよく使われます。テーブルのイメージがつかない人ももしかしたらいるかもしれませんので、先に例を載せておきます。65,000今年の合計出費375,000これが「テーブル」です。今回はこれを例にテーブルの作り方についてご紹介します。この記事はHTMLに関する記事なので、CSSについての解説は割愛します。テーブル作成においてCSSは枠線を付けたり、枠のサイズの設定、背景色の設定などをすることができます。CSSについては別記事を用意しますので、少々お待ちください。この記事では「要素」や「属性」といった用語を頻繁に使用しています。これらの用語についてよくわからないという方は「タグ中の要素、属性とは?HTMLの基本的な書式」の記事を先に読んだ方が、この記事をより理解できると思います。テーブル作成に使用する要素テーブルを作るのに使う要素は多いから、頑張ろうね!ヒナ今回解説していく「テーブルを作るのに使用する要素」は、8種類です。多いように思えますが、この中で絶対に使わないといけないものは4種類です。この4種類さえ理解できれば、一般的なテーブルは作成することができます。<td>の4種類です。この4種類の要素は、テーブルを作るに当たって必要不可欠です。caption要素は必要であれば使用しますが、僕はあまり使いません。<thead><tbody><tfoot>の3つについては、ほとんど使ったことがありません。使用しなくてもテーブルをつくることはできますが、一応紹介しておきます。この他にもcol要素やcolgroup要素がありますが、今回は省きます。クリックで拡大table要素table要素はテーブル(表、枠組み)を作る際に使用する要素です。読み方はそのまま「テーブル」で、IT用語では表を意味します。HTMLにおいてテーブルを作るとき、全てを囲む親要素となります。HTML4(前のバージョン)では、枠線を表すborder属性、表示する位置を表すalign属性などが使用されていました。HTML5(現在のバージョン)では、これらは非推奨となりました。使用できなくなったというわけではありませんが、これらを実現するにはHTMLではなくCSSを使用するようにしましょう。table要素は、中に子要素を入れずにテーブルだけを記述しても何も表示されません。CodePen.caption要素caption要素は、テーブルのタイトルを表示します。読み方は「キャプション」で、説明文という意味を持っています。caption要素はtableの中で最初の子要素として記述します。開始タグと終了タグで囲んだ文字がテーブルのタイトルとなり、表示されます。ロウ)の略称で、テーブルの行を表します。開始タグ(<tr>)から終了タグ(</tr>)までが横1行となり、その中にセルを表すth要素やtd要素を記述します。tr要素もtable要素同様、子要素に何も持たないと何も表示されません。CodePenによる例は省略します。th要素ここからテーブルらしくなります。hrader(テーブルヘッダー)」の略称で、テーブルの見出しセルを表します。th要素は、一般的なブラウザでは文字がセンタリングされ、太字で表示されます。th要素は必ずtr要素の中に入れるようにしましょう。開始タグと終了タグの間に入れた文字がテキストとして表示されます。下のテーブルではtr要素の子要素、table要素の孫要素になります。date(テーブルデータ)」の略称で、テーブルのセルを表します。thと似ていますが、テーブル内で見出しを表す場合はth、内容やデータを表す場合はtdを使用しましょう。今回例にしたテーブルはCSSによって文字がセンタリングされていますが、基本的にtd要素を使用したセルは文字が左寄せで表示されます。td要素もth要素同様、tr要素の中に入れましょう。下のテーブルではtr要素の子要素、table要素の孫要素になります。今回例にしているテーブルでは緑色部分がth要素、灰色っぽい色部分がtd要素になっています。footer」の略称で、ヘッダ、ボディ、フッタ要素の行グループを表します。この3つを使うことで、テーブルの構造を明確にすることができます。この3つは使わなくてもテーブルを作成することはできるので、省略しても構いません。今回の例でいくと1行目の月が書いてある部分がこのテーブルのヘッダ、2.3.4行目の使った出費が書かれた部分がボディ、5行目の合計出費が書かれた部分がフッタとなります。それぞれが始まる部分にコメントを書いていますので、参考にしてみてください。どのコード部分がどの行かわからないかもしれないので、何行目を表しているコードかというのもコメントアウトしています。こちらも参考にしてみてください。5行目の作り方は次項で解説します。前項のCodePenの5行目の「今年の合計出費」部分は6つのセルが結合されています。Excelでいうところの「セルを結合して中央揃え」になっています。このようにセルを結合して中央揃えにするには、「colspan属性」もしくは「rowspan属性」を使用します。colspanは横方向にセルを結合し、rowspanは縦方向にセルを結合します。結合するセル数は、属性値に記述します。colcpan="6′′>となっています。実際に作ってみた方がしっかりと理解できるよ!ヒナテーブルを作成するのに使う要素は多く、難しかったと思います。始めに言った通り、table要素、tr要素、td要素、th要素、この4つさえ理解できればテーブルを作成することができます。この記事を見て例として出したコードをそのまま真似してでもいいので、実際に作ってみることをおすすめします。HTMLで作るだけだと、枠線のないわかりにくいものになってしまいます。今回CodePenで例にしているテーブルのCSSはこのブログで使っているテーブルのデザインに近付けています。CSSがよくわからないという方はCSSのコードをそのまま使っても大丈夫です。テーブルは一度自分で実際に作ってみて、しっかりと理解することが大切です。...初心者向けリンクの貼り付け方法【HTML】こんにちは、Kosei()です。...タグ中の要素、属性とは?HTMLの基本的な書式こんにちは、Kosei()です。...初心者向けリストの作成方法【HTML】HTMLでリストを作成する方法を、初心者向けにわかりやすく解説していきます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。