htmlで表を作るときに使うtableタグ、
その存在は知っているけれどなかなか使いこなすことができない……
そんな風に考えている方は多いはずです。
今回は、そんな曖昧になりがちなhtmlのtableタグについて徹底的に解説していきたいと思います。
htmlのtableタグを使った表の作り方に加えて、デザインを整えていくCSSについても解説していきます。
目次を見たい方はココをクリック♪
表（テーブル）を作ることができるtableタグ
tableタグ（table要素）を使えば、表（テーブル）を作成することができます。
実際にこのような表をみたことがあるのではないでしょうか？
これらは全てtableタグを使って作られています。
では、このtableタグの構造と、中に含まれる３つの要素について説明していきたいと思います。
表の構成
tableタグを使って作られる表（テーブル）は、<table><tr><td><th>の４つの要素で構成されています。
・<table></table>：全体をこのtableタグで囲みます。囲まれている部分が表になります。
・<tr>：table rowの略で、表に行を１行作ります。
・<th>：table headerの略で、表の見出しとなるセルを作ります。
・<td>：table dateの略で、表の中身となるセルを作ります。
少し名前が紛らわしいですが、１つ１つが何を表しているのかを覚えてしまえばあとは見た目を整えていくだけです。
では、基本のコードを見ていきましょう。
tableタグを使った基本のコードの書き方
早速、この表を作っていきたいと思います。
対応しているコードはこちらになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="1"> <thead> <tr> <th>メニュー</th> <th>値段</th> </tr> </thead> <tbody> <tr> <td>オムライス</td> <td>700円</td> </tr> <tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </tbody> </table> </body> </html> |
①まず、全体を<table>タグで囲います。
この時、tableタグの横にborderがありますが、これは枠線の太さを指定するものです。
これを書かなければ、下のように枠線のない表になってしまいます。
しかし、枠線に関する指定はhtmlで行うよりもcssで行った方が後から変える際に便利なので、この後説明していきたいと思います。
②作りたい行の文だけ<tr></tr>を作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="1"> <thead> <tr> <th>メニュー</th> <th>値段</th> </tr> </thead> <tbody> <tr> <td>オムライス</td> <td>700円</td> </tr> <tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </tbody> </table> </body> </html> |
③見出しの部分を<thead></thead>で囲ってから言葉を<th></th>、見出し以外の部分を<tbody></tbody>で囲ってからデータを<td></td>で囲って入れていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="1"> <thead> <tr> <th>メニュー</th> <th>値段</th> </tr> </thead> <tbody> <tr> <td>オムライス</td> <td>700円</td> </tr> <tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </tbody> </table> </body> </html> |
これが基本のコードになります。ここまでで完成する表がこちらです。
しかし、最初にお見せした表と線が異なっていると思います。
これを調整するためのcssの指定がこちらです。htmlとcssの関係については後ほど説明します。
|
1 2 3 4 5 6 |
table { border-collapse: collapse; } table th, table td { border: solid 1px black; } |
thとtdに対して枠線の指定をすることで、１つ１つのセルに枠線をつけているイメージです。
これだけだと隙間ができてしまうので、隣り合うセルの罫線を間を空けずに表示するtableに対するborder-collapse: collapse;を使って指定をしますが、このときに先ほど話したtableタグのborder属性は０に指定しておきます。
ここまでコードを書くと、最初の表が完成します。
作りたい表を作るデザインの方法
htmlで作った表の見た目を変えていくためには、cssを使います。
htmlと同じファイルにコードを書くことも可能ですが、別々のファイルに書く方法が一般的！
htmlと別のファイルに書いたcssをhtmlに読み込むためには、html内で下記のコードを指定する必要があります。
|
1 |
<link rel="stylesheet" href="名前.css"> |
では、ここからは主にCSSを変えていくので、htmlと混ざってしまわないように注意してください！
cssで見出しについて変えたい時は<th>、それ以外を変えたい時は<td>に対して指定していきます。
見出しを変えたい時
・見出し無しにするー<thead></thead>・<th>タグを抜く
見出しをなくしたい時は<thead></thead>タグと<th>タグを抜くだけで、見出しのない表にすることができます。
ただ情報を並べたいだけの時は、<table><tbody><td><th>だけを使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="0"> <thead> <tr> <th>メニュー</th> <th>値段</th> </tr> </thead> <tbody> <tr> <td>オムライス</td> <td>700円</td> </tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </tbody> </table> </body> </html> |
色が付いている部分の<thead>を抜いて、<th></th>を<td></td>に変えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="0"> <tr> <td>メニュー</td> <td>値段</td> </tr> <tbody> <tr> <td>オムライス</td> <td>700円</td> </tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </tbody> </table> </body> </html> |
そうすると下の画像のように、見出しをなくすことができます。
・見出しを縦に並べたいー<th><td>を１つの<tr>の中に
基本の通りコードを書くと、見出しは横に並んでいきます。
|
1 2 3 4 5 |
<tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> |
このように<tr>タグの中に見出しだけが並んでいたものを、
|
1 2 3 4 5 |
<tr> <th>見出し</th> <td>データ</td> <td>データ</td> </tr> |
このように＜tr>タグの中に横に並べたい見出しとデータを一緒に入れることによって、見出しを縦に並べることができます。
先程までのデータを書き換えたものがこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="0"> <tr> <th>メニュー</th> <td>オムライス</td> <td>ハンバーグ</td> <td>ナポリタン</td> </tr> <tr> <th>値段</th> <td>700円</td> <td>900円</td> <td>600円</td> </tr> </table> </body> </html> |
実際にこのように横並びの表にすることができました。
罫線を変えたい時
罫線のスタイルはborder属性を使ってまとめて線の種類・太さ・色を指定することができます。
線の種類・太さ・色の順番は、どのような順番になっても大丈夫です。
罫線は先ほども出てきましたが、それぞれのセルの周りに引かれているイメージなので、tableタグに対して指定するのではなく、thタグ・tdタグに指定を行ってください。
|
1 2 3 |
table th, table td{ border:solid 1px black; } |
ここでは border : 線の種類 太さ 色の順番で指定がされています。
よく使われる線の種類としては、solid（実線）・dotted（点線）・dashed（破線）・double（二重線）none（なし）があります。用途に合わせて使い分けてください。
表のデザインを変えたい時
・背景の色を変えるーbackground-color属性
表の背景色を変えたい時は、色を変えたい行や列に対してbackground-color属性で指定します。
|
1 2 3 |
table th, table td{ background-color: #174a5c; } |
ここでは、先ほどまで白だった背景を変えてみました。
・余白を調節するーpadding属性
余白を取る時は、padding属性で指定していきます。
|
1 2 3 |
table th, table td{ padding : 20px 10px; } |
・幅を変えるーwidth属性
幅を変える時は、width属性で指定していきます。
|
1 2 3 |
table { width : 300px ; } |
この時、いつもと同じように px と ％どちらで指定しても構いません。
ただし、スマホ対応のこと考えるとpxで指定する方が良いかもしれません。
・高さを変えるーheight属性
高さを変える時は、height属性で指定していきます。
|
1 2 3 |
table{ height : 100px ; } |
このときに使うことができるのはpxです。
・結合させる（横）ーcolspan属性
横向きに結合させたい時は、colspan属性で指定していきます。
注意して欲しいのは、結合させる時はcssではなく、htmlで指定していくということです。
わかりやすくするために、cssで文字を中央寄せにしておきます。
繋げたいセルのはじまりの<th>（または<td>）にcolspan = "繋げたい数"を書き足します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="0"> <tr> <th>メニュー</th> <td>オムライス</td> <td>ハンバーグ</td> <td>ナポリタン</td> </tr> <tr> <th>値段</th> <td>700円</td> <td colspan="2">900円</td> </tr> </table> </body> </html> |
・結合させる（縦）ーrowspan属性
縦向きに結合させたい時は、rowspan属性で指定していきます。
ここでも、cssではなくhtmlで指定していきます。
繋げたいせるの始まり（繋げたいセルの中で一番上にあるもの）の<th>（または<td>）にrowspan="繋げたい数"を書き足します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="0"> <tr> <th>メニュー</th> <th>値段</th> </tr> <tr> <td>オムライス</td> <td>700円</td> </tr> <td >ハンバーグ</td> <td rowspan="2">900円</td> </tr> <tr> <td>ナポリタン</td> </tr> </table> </body> </html> |
プラスαで知っておくと便利なこと
スマホの画面に対応させる
スマホに対応するやり方は大きく分けて大きく分けて２つあります。では１つずつ見ていくことにしましょう。
・横スクロールできるようにする
横スクロールができるようにするためには、htmlとcssの両方で指定します。
①htmlで、tableタグを囲むdivタグを作る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <div class="scroll"> <table border="0"> <tr> <th>メニュー</th> <th>値段</th> </tr> <tr> <td>オムライス</td> <td>700円</td> </tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </table> </div> </body> </html> |
②cssで①に対して５つの指定を行う
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
table{ width:100%; } .scroll{ overflow: auto; white-space: nowrap; } .scroll::-webkit-scrollbar{ height: 5px; } .scroll::-webkit-scrollbar-track{ background: #F1F1F1; } .scroll::-webkit-scrollbar-thumb { background: #BCBCBC; } |
指定した５つの意味は以下の通りです。
・overflow: auto; 表をスクロールさせる
・white-space: nowrap; セルの中の折り返しを禁止する
・::-webkit-scrollbar スクロールバーを追加する
・::-webkit-scrollbar-track スクロールバーを追加する
・::-webkit-scrollbar-thumb スクロールバーを追加する
・横幅を100％にする
th・td共に横幅を100％に指定することによって、スマホの画面に収めていきます。
|
1 2 3 4 5 6 7 8 9 10 |
table { border-collapse: collapse; text-align: center; } table th, table td { border: solid 1px black; padding : 20px 10px; width: 100%; display: block; } |
縦に並べることでスクロールで見ることができるようになります。
データ部分だけスクロールできるようにする
設定するにはテーブルヘッダ要素とテーブルボディ要素を定義し、各列にclassを振り分けて幅を設定する必要があります。テーブルヘッダをdisplayプロパティで固定し、テーブルボディは縦軸スクロールで高さを固定します
①htmlで、見出しの部分をテーブルヘッダ要素・データの部分をテーブルボディ要素として定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>メニューと値段</title> <link rel="stylesheet" href="table.css"> </head> <body> <table border="0"> <thead class="table_head"> <tr> <th>メニュー</th> <th>値段</th> </tr> </thead> <tbody class ="table_body"> <tr> <td>オムライス</td> <td>700円</td> </tr> <td>ハンバーグ</td> <td>900円</td> </tr> <tr> <td>ナポリタン</td> <td>600円</td> </tr> </tbody> </table> </body> </html> |
②次にcssのコードを書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
table { border-collapse: collapse; text-align: center; } table th, table td { border: solid 1px black; padding : 20px 10px; text-align: left; width: 120px; } thead.table_head,tbody.table_body{ display: block; } tbody.table_body { overflow-y: scroll; height: 150px; } |
増えたのは色がついている部分です。
・display: block; で高さや幅を決められるようにします。
・overflow-y: scroll; がスクロールを可能にする属性です。
・height: 150px; の数字を変えると表のスクロール部分の高さを変更することができます。
表のデザイン例まとめ
元となる表のhtmlのコードはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>表の見本</title> <link rel="stylesheet" href="mihon.css"> </head> <body> <table border="0"> <thead> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> </thead> <tbody> <tr> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <td>データ</td> <td>データ</td> <td>データ</td> </tr> </tbody> </table> </body> </html> |
シンプルな表
シンプルで使いやすい表のコードを紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
table { border-collapse: collapse; width: 400px; font-size: 12px; margin: 20px; text-align: left; } table th { color: black; padding: 10px; border-bottom: 3px solid #174a5c; } table td { padding: 10px; color: gray; border-bottom: 1px solid gray; } |
この表では、表自体の罫線は引かずにborder-bottom属性でアンダーラインを引きました。
border-bottom ：線の太さ 線の種類 線の色 で指定できるので自分好みの色や太さに変更してみてください。
ビジネス向けの表
企業のHPで使えるような、少し堅めの表のコードを紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
table { border-collapse: collapse; width: 400px; font-size: 12px; margin: 20px; text-align: center; } table th { color: black; background-color: lightgray; padding: 10px; } table td { color: black; background-color: #F5F5F5; padding: 10px; border-bottom: 1px dotted lightgray; } |
先ほど使ったborder-bottom属性をここでも使っています。前述の通り線の種類はsolid（実線）・dotted（点線）・dashed（破線）・double（二重線）none（なし）などがあるので使いたいものに合わせて使ってみてください。
色はもちろん覚える必要がなく、「css 色」などで検索してみるとたくさん出てくるので使ってみてください。
ポップな表
罫線を引かないことで、親しみやすい表に感じられます。
ここでは行ごとに色を変える方法をお伝えします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
table { text-align: center; width: 100%; } table th, table td { padding : 20px 10px; } table tr *:nth-child(1){ background: orange; } table tr *:nth-child(2){ background: gold; } table tr *:nth-child(3){ background: yellow; } |
table tr *:nth-child(）とすることによって（）の中にある数字の列について一気に指定することができます。
表を作るtableタグまとめ
いかがでしたでしょうか？
ここで押さえておいて欲しいことは、<tr> <th> <td>をそれぞれどんなときに使うのかが分かっているということです。基本がわかっていれば、あとは調べながらcssを調節していくだけなので、ぜひたくさん書いて基本を覚えていきましょう。
1ヶ月でHTML・CSSができる！「DMM WEBCAMP」とは？
ぜひ一度話を聞いてみませんか？
