HTML : table要素を用いて、サイト上に表を作成する方法 & サンプル有り

本記事上では、HTML上で使用する要素の一つである「table」に関連する要素を活用した表の作成方法について、サンプルのコードも交えながらご紹介させて頂いております。

table以外にもtrやtd, tbodyなど様々な要素が出てきますが、それらを活用していくための基礎を身に付けていく上で、参考になれば幸いです。

✅   table要素の基本構造を知る
✅   準備されている属性を理解する
✅   キャプションの指定方法
✅   セルに罫線を引く方法
✅   セルの幅をカスタマイズする方法
✅   thead, tbody, tfootなどの要素を設定
✅   表に立てスクロールを実装する方法

表の作成(table)の考え方

HTMLによる表(テーブル)の作成については、表(テーブル)自体を作成するために必要なtableタグ, 行を作成するtrタグ, 見出しを設定するthタグ, 値を設定するtdタグを基本的に使用していきますので、順番に基本構造から確認していきながら扱えるようになっていきましょう。

以下、実際に公開されているリファレンスになりますので、ちょっと難しいかもしれませんが、こちらも合わせてチェックしておいてください。

: 表要素 - HTML: HyperText Markup Language | MDN

HTML の要素は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。

基本構造

書き方及びそれぞれのタグの役割をしっかりと覚えましょう。

実際に簡単な表を作ってみる

<body>  
    <table border="1">
       <tr>
           <th>見出し1</th>
           <th>見出し２</th>
       </tr>
       <tr>
           <td>値01</td>
           <td>値02</td>
       </tr>
       <tr>
           <td>値03</td>
           <td>値04</td>
       </tr>
    </table>
</body>

[ 表示結果 ]

属性を使いこなす

table関連のタグにも様々な属性が準備されています。

例えば、先程、簡単な表を作成した際のコード内でtableタグ内にborder=”枠線の幅(数値)”が記述してありましたが、こちらも属性の一つになります。

他にどのような属性があり、どのように活用するのかを続いてみていきたいと思います。

枠線の幅を指定する (border)

<table border="3"> ~  </table>

<!--書き方 :  border="枠線の幅(数値)" -->
<!--  枠線を決めるので、tableタグ内に指定する  -->
<table border="3">
    <tr>
        <th>見出し1</th>
        <th>見出し２</th>
    </tr>
    <tr>
        <td>値01</td>
        <td>値02</td>
    </tr>
    <tr>
        <td>値03</td>
        <td>値04</td>
    </tr>
</table>

[ 表示結果 ]

縦方向のセルを結合する (rowspan)

 <td rowspan="数値">値</td>

<!--  枠線の幅を1に設定  -->
<table border="1">  
    <tr>
         <th></th>
         <th>見出し1</th>
         <th>見出し２</th>
    </tr>
    <tr>
         <!--  書き方 : rowspan="結合させたい数"  -->
         <!-- rowspanを用いる縦方向のセルを結合させることが可能できる  -->
         <td rowspan="2">row</td>
         <td>値01</td>
         <td>値02</td>
    </tr>
    <tr>
         <td>値03</td>
         <td>値04</td>
    </tr>
</table>

[ 表示結果 ]

横方向のセルを結合する (colspan)

 <td colspan="数値">値</td>


<!--  枠線の幅を1に設定  -->
<table border="1">  
    <tr>
         <th>見出し1</th>
         <th>見出し２</th>
    </tr>
    <tr>
         <td>値01</td>
         <td>値02</td>
    </tr>
    <tr>
         <!--  書き方 : colspan="結合させたい数"  -->
         <!-- colspanを用いる横方向のセルを結合させることが可能できる  -->
         <td colspan="2" style="text-align: center;">値03</td>
    </tr>
</table>

[ 表示結果 ]

セルの色を指定する (bgcolor)

 <tr bgcolor="色の指定"> ~ </tr>

<table border="1">
    <!--  書き方 : bgcolor="色を指定" -->
    <!-- bgcolorを用いるとセルの背景色を設定することができる  -->
    <tr bgcolor="lightgreen">
        <th>見出し1</th>
        <th>見出し２</th>
    </tr>
    <tr>
        <td bgcolor="lightpink">値01</td>
        <td>値02</td>
    </tr>
    <tr>
        <td>値03</td>
        <td bgcolor="lightpink">値04</td>
    </tr>
</table>

[ 表示結果 ]

その他設定方法

続いては、セルごとの幅の指定方法やテーブルのキャプションの指定などの方法について確認していきましょう！

セルの幅を指定

タグ名(table関連) {   
    　width: ○○px(%, em, rem);
}

<table border="1">
    <tr>
        <th>見出し1</th>
        <th>見出し２</th>
    </tr>
    <tr>
        <td>値01</td>
        <td>値02</td>
    </tr>
    <tr>
        <td>値03</td>
        <td>値04</td>
    </tr>
</table>

/*   見出しのセルの幅を100pxで設定   */
th {   
    width: 100px;
}

[ 表示結果 ]

セルに罫線を引く

table {　　
    border-collapse: collapse;
}

<!--  borderの指定を解除する -->
<table>
    <tr>
        <th>見出し1</th>
        <th>見出し２</th>
    </tr>
    <tr>
        <td>値01</td>
        <td>値02</td>
    </tr>
    <tr>
        <td>値03</td>
        <td>値04</td>
    </tr>
</table>

table {　　
    /*   線をシンプルな一重線にする  */
    border-collapse: collapse;
}

th, td {
    /*  枠線の色を黒で指定   */
    border: solid 1px #000;
    width: 100px;
}

[ 表示結果 ]

キャプションをつける

    <caption>キャプションの指定</caption>

<table>
    <!-- captionタグを使用する事で、表のタイトルを設定することができる -->
    <caption>キャプションの指定</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し２</th>
    </tr>
    <tr>
        <td>値01</td>
        <td>値02</td>
    </tr>
    <tr>
        <td>値03</td>
        <td>値04</td>
    </tr>
</table>

table {　　
    /*   線をシンプルな一重線にする  */
    border-collapse: collapse;
}

th, td {
    /*  枠線の色を黒で指定   */
    border: solid 1px #000;
    width: 150px;
    /*  テキストを中央寄せにする  */
    text-align:center;
}

[ 表示結果 ]

応用編

thead, tbody, tfootなどの要素を設定 (具体的な区切りをつける)

最後に応用編として、より具体的な区切りをつけつつ、縦スクロールを実装したテーブルを作成してみましょう！

<html>　
    <head>
　　    <title>テーブル[スクロール化]</title>
    </head>
    <body>
        <caption>都道府県を学ぼう</caption>
        <table border="1">
　　　　　　　<!-- テーブルのヘッダー情報を記述する : thead -->
            <thead>
                <tr>
                    <th>都道府県</th>
                    <th>市町村</th>
                </tr>
            </thead>
            <!-- テーブルのメインコンテンツを記述する : tbody -->
            <tbody>
                <tr>
                    <td>北海道</td>
                    <td>釧路市</td>
                </tr>
                <tr>
                    <td>東京都</td>
                    <td>八王子市</td>
                </tr>
                <tr>
                    <td>沖縄県</td>
                    <td>那覇市</td>
                </tr>
                <tr>
                    <td>静岡県</td>
                    <td>熱海市</td>
                </tr>
                <tr>
                    <td>神奈川県</td>
                    <td>横浜市</td>
                </tr>
                <tr>
                    <td>福井県</td>
                    <td>福井市</td>
                </tr>
                <tr>
                    <td>富山県</td>
                    <td>富山市</td>
                </tr>
                <tr>
                    <td>石川県</td>
                    <td>金沢市</td>
                </tr>
            </tbody>
            <!-- テーブルのフッターを記述する : tfoot -->
            <tfoot>
            </tfoot>
        </table>
    </body>
</html>

table {
    border-collapse: collapse;  
    /*   表を画面の中央に寄せる   */
    margin: 0px auto;
    width: 28%;
}

thead {
    display: block;
}

tbody {
    display: block;
    /*  縦方向のスクロールを実装  ※ 横方向の場合は、overflow-x: scroll;  */
    overflow-y: scroll;
    height: 160px;
}

th {
    width: 200px;
    border: 1px solid;
}

td {
    width: 200px;
    text-align: center;
}

[ 表示結果 ]

DEMO