【HTML入門】どこよりも分かりやすく表を作る方法を解説!

みなさんこんにちは!HTMLを使って表を作りたいと思ったことはありませんか?

tableタグを使ってみても思うよういかなかった経験がある人も多いのではないでしょうか。そこで今日は、「tableタグで表を自由自在に作成する」ということを目標として、

  • tableタグの使い方
  • tr, th, tdタグとは
  • セルの連結方法
  • 表の罫線デザインを変える

といった基本的な内容からといった応用的な内容までどこよりもわかり易く解説していきます。表を自由自在に使えるようにしたいという方は参考にしていただければ幸いです!

表を作成するには?

それでは、既知の方もいるかもしれませんがHTMLで表を作成するにはtableタグというものを使います。しかし、tableタグとは表の大枠でしかなくいわばここから表を始めるよ!という合図になるタグです。

tableの中身には他にもtrタグや、thタグ、tdタグなどセット使うものをうまく使いこなして初めて思うような表が完成します。なので、それぞれのセットで使うタグについて詳しく見ていきましょう。

trタグとは

まずは、trタグです。trとはTable Rowの略でrowから分かるように、tableの行部分を指定するタグになります。

<table>
    <tr>
        行の中身を書く
    </tr>
</table>

つまりこういうことですね。

thタグとは

次にthタグを見ていきましょう。thとはTable Headerの略でHeaderの通りセルの内容の見出しを書くタグになります。通常見出しは右に並ぶ(行としてならぶので)trタグの中に書きます。

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

こういうことですね。

実際のコードをみてみると

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
<table border="1">
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
</table>
</body>
</html>

こんなかんじですね。

table border=“1"

についてはまた後で説明します。

tdタグとは

さて最後がこのtdタグですね。tdはTable Dataの略で実際のデータを入れていきます。tableのデータも行で定義していきますので、trタグの中に入れることになりますね。

<table>
    <tr>
        <td>データ</td>
    </tr>
</table>

こんな感じですね。

実際に使ってみると、

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
    <table border="1">
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </table>
</body>

</html>

こんな感じです。

表を作成しよう!

さて、これまでの知識を合わせて実際に機能する表を作ってみます。とはいっても、先程したことを合わせるだけで、

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
    <table border="1">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </table>
</body>

</html>

このように実際に表になっていますね。

また、trタグで囲わずにtdタグで見出しっぽいデザインにすれば見出しっぽく見せることもできますが、それはHTMLとしては間違っています。

視覚的には良くてもHTMLとして間違っていると詳しくは述べませんが様々なよろしくないことがあるので、意味的に正しいHTMLを使うとうことを常に心がけましょう。

    <table border="1">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </table>

もちろんこのようにして、見出ししかない列も作れます。

これが表を作成する基本ですので必ずこれらの使い分けはマスターするようにしましょう!

表のセルを連結しよう!

さて、ここまでで表を作成する基本を得てきましたが実際にはここはセル2子分の幅がほしいとかいうことはよくあることです。これらもマスターしてしまいましょう!

具体的には、セルを連結するのですが、縦に連結するパターンと横に連結するパターンがあるのでひとつずつみてきます。

縦にセルを連結しよう!

まずは縦に連結するパターンから見ていきましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
    <table border="1">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
        <tr>
            <td>データ3</td>
            <td>データ4</td>
        </tr>
    </table>
</body>

</html>

例えばこのような表があったとき、”データ1”は縦に2つ分のセルにしたいと思った場合は、tdにrowspan属性をつけてあげます。

コードをみていきましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
    <table border="1">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
        <tr>
            <td rowspan="2">データ1</td>
            <td>データ2</td>
        </tr>

        <tr>
            <td>データ4</td>
        </tr>

    </table>
</body>

</html>

その場合2つ分にしたいセルにrowspan=“2”を指定してやると、

このように連結できます。

横にセルを連結してみよう!

さて、縦への分割はrowspanでしたね。と、いうことは、、、そうですね、横への分割はcolspanを使います。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
    <table border="1">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
        <tr>
            <td colspan="2">データ1</td>
        </tr>

        <tr>
            <td>データ3</td>
            <td>データ4</td>
        </tr>

    </table>
</body>

</html>

こうしてやると、

しっかり横に連結されていますね。

表のデザインも変更してみよう!

さて、セルの分割も自由にできるようになったところで、表のデザインを少しだけいじってみましょう!先ほど、

table border=“1"

というのがでてきましたね。これは実はborderの線の幅を表していたんですね。これを変えることにより、ボーダーの線の幅が変わるのでためしてみてください。

tableは様々なオプションがあるので全ては紹介できませんが、表として見やすくするために、色々変えて見ましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="background: #00ff00">
    <table border="1" cellspacing="10" cellpadding="10" bgcolor="#fff">
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>

        <tr>
            <td>データ3</td>
            <td>データ4</td>
        </tr>

    </table>
</body>

</html>

どうでしょう。tableに色々属性を加えることで見やすくなりましたね。

ここでは、こんなふうに色々弄れることを知ってもらえれば大丈夫なので詳しく説明はしませんが、詳しく知りたい方は以下の記事で全て詳しく書かれているので参考にしてみてください!

重なった解説も多いので目次から自分の知りたいところをチョイスするのがおすすめです!

【HTML table】表を作成する基本からレイアウトの方法までを解説
更新日 : 2020年6月19日

まとめ

いかがでしたか。表の作り方はもちろん、各種タグを理解して自由自在に扱えるようになってもらえたのではないでしょうか?

tableタグは上手く使えばとても見やすい表ができあがるので是非表マスターになっていただければ幸いです!それでは!!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー