【HTML table】表作成からレイアウトの方法まで完全網羅 | プログラミング入門ならWEBCAMP NAVI
【11月枠も残りわずか】転職保証コース

【HTML table】表作成からレイアウトの方法まで完全網羅

SHARE

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タグを使った基本のコードの書き方

早速、この表を作っていきたいと思います。

対応しているコードはこちらになります。
最初にHTMLについて説明してから、CSSの解説をしていきたいと思います。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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>
example.css 
table {
  border-collapse: collapse;
}
table th, table td {
  border: solid 1px black;
}

 

STEP.1
全体を<table>タグで囲う
HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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タグの横にborderがありますが、これは枠線の太さを指定するものです。
これを書かなければ、下のように枠線のない表になってしまいます。

 

しかし、枠線に関する指定はHTMLで行うよりもCSSで行った方が後から変える際に便利なので、この後説明していきたいと思います。

 

STEP.2
作りたい行の分だけ<tr></tr>を作る
HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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>

 

STEP.3
見出しを<thead></thead>と<th></th>、それ以外を<tbody></tbody>と<td></td>で囲う
 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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の指定がこちらです。

example.css 
table {
  border-collapse: collapse;
}
table th, table td {
  border: solid 1px black;
}

 

thとtdに対して枠線の指定をすることで、１つ１つのセルに枠線をつけているイメージです。
これだけだと隙間ができてしまうので、border-collapse: collapse;を使って指定をします。
これは、隣り合うセルの罫線を間を空けずに表示するものです。

このときに先ほど話したtableタグのborder属性は０に指定しておきます。
ここまでコードを書くと、最初の表が完成します。

 

 

作りたい表を作るデザインの方法

HTMLで作った表の見た目を変えていくためには、CSSを使います。

CSSの役割
CSSにはHTMLにデザインをつける役割があります。
HTMLと同じファイルにコードを書くことも可能ですが、別々のファイルに書く方法が一般的です。

HTMLと別のファイルに書いたCSSをHTMLに読み込むためには、HTML内で下記のコードを指定する必要があります。

HTML 
<link rel="stylesheet"  href="名前.css">

 

では、ここからは主にCSSを変えていくので、HTMLと混ざってしまわないように注意してください！
CSSで見出しについて変えたい時は<th>、それ以外を変えたい時は<td>に対して指定していきます。

 

見出しを変えたい時

・見出し無しにするー<thead></thead>・<th>タグを抜く
見出しをなくしたい時は<thead></thead>タグと<th>タグを抜くだけで、見出しのない表にすることができます。
ただ情報を並べたいだけの時は、<table><tbody><td><th>だけを使います。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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>に変えます。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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>の中に
基本の通りコードを書くと、見出しは横に並んでいきます。

HTML 
<tr>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
</tr>

このように<tr>タグの中に見出しだけが並んでいたものを、

HTML 
<tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
</tr>

このように＜tr>タグの中に横に並べたい見出しとデータを一緒に入れることによって、見出しを縦に並べることができます。
先程までのデータを書き換えたものがこちらです。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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タグに指定を行ってください。

 

example.css 
table th, table td{
  border:solid 1px black;
}

 

ここでは border : 線の種類　太さ　色の順番で指定がされています。
よく使われる線の種類としては、solid（実線）・dotted（点線）・dashed（破線）・double（二重線）none（なし）があります。用途に合わせて使い分けてください。

 

 

表のデザインを変えたい時

・背景の色を変えるーbackground-color属性
表の背景色を変えたい時は、色を変えたい行や列に対してbackground-color属性で指定します。

example.css 
table th, table td{
  background-color: #174a5c;
}

ここでは、先ほどまで白だった背景を変えてみました。

 

・余白を調節するーpadding属性
余白を取る時は、padding属性で指定していきます。

example.css 
table th, table td{
  padding : 20px 10px;
}


・幅を変えるーwidth属性
幅を変える時は、width属性で指定していきます。

example.css 
table {
  width : 300px ;
}

この時、いつもと同じように px と ％どちらで指定しても構いません。
ただし、スマホ対応のこと考えるとpxで指定する方が良いかもしれません。

 

・高さを変えるーheight属性
高さを変える時は、height属性で指定していきます。

example.css 
table{
  height : 100px ;
}

このときに使うことができるのはpxです。

 

・結合させる（横）ーcolspan属性
横向きに結合させたい時は、colspan属性で指定していきます。
注意して欲しいのは、結合させる時はcssではなく、htmlで指定していくということです。
わかりやすくするために、cssで文字を中央寄せにしておきます。
繋げたいセルのはじまりの<th>（または<td>）にcolspan = “繋げたい数”を書き足します。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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=”繋げたい数”を書き足します。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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の両方で指定します。

STEP.1
HTMLで、tableタグを囲むdiv タグを作る
 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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>

STEP.2
example.css 
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％に指定することによって、スマホの画面に収めていきます。

example.css 
table {
  border-collapse: collapse;
  text-align: center;
}
table th, table td {
  border: solid 1px black;
  padding : 20px 10px;
  width: 100%;
  display: block;
}

縦に並べることでスクロールで見ることができるようになります。

 

 

データ部分だけスクロールできるようにする

設定するにはテーブルヘッダ要素とテーブルボディ要素を定義し、各列にclassを振り分けて幅を設定する必要があります。テーブルヘッダをdisplayプロパティで固定し、テーブルボディは縦軸スクロールで高さを固定します

 

STEP.1
HTMLで、見出しの部分をテーブルヘッダ要素・データの部分をテーブルボディ要素として定義します。
 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>メニューと値段</title>
    <link rel="stylesheet" href="example.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>

STEP.2
次にCSSのコードを書いていきます。
 

example.css 
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のコードはこちらです。

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>表の見本</title>
    <link rel="stylesheet" href="example.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>

シンプルな表

シンプルで使いやすい表のコードを紹介します。

example.css 
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で使えるような、少し堅めの表のコードを紹介します。

example.css 
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 色」などで検索してみるとたくさん出てくるので使ってみてください。

 

ポップな表

罫線を引かないことで、親しみやすい表に感じられます。
ここでは行ごとに色を変える方法をお伝えします。

example.css 
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を調節していくだけなので、ぜひたくさん書いて基本を覚えていきましょう。

11月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きのプログラミングスクール

で未経験からエンジニアを目指そう！

 

✔︎未経験からの転職　✔︎会社の将来が不安　✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98％！

 

【無料】キャリア相談の日程を見る

前の記事

プログラミング学習アプリおすすめ5選【子ども・初心者向け】

次の記事

子供のうちからプログラミングを学習する方法と気をつけるポイント…