SAMURAI TERAKOYA

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

HTML
2021.05.28

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

 

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

 

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

表の作成(table)の考え方

 

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

 

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

 

: 表要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。
developer.mozilla.org

 

基本構造

 

 

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

 

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

<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

 

 

ここまでtable要素の使い方についてみていきましたが、使い方次第では、レスポンシブにも対応できるスクロールを実装した表を作ることが可能であることがわかったのではないかと思います。

 

覚えるべきHTML要素が多いため、慣れるには時間がかかるとは思いますが、少しずつ使いこなしていけるようになりましょう！

 

まとめ

✅   table要素の基本構造を知る
⇨ 基本となるtable要素, tr要素, td要素, th要素の役割を理解していきましょう。
✅   準備されている属性を理解する
⇨ table要素には、colspan / rowspanなどの属性が準備されています。
✅   キャプションの指定方法
⇨ caption要素を使用し、表のタイトルを設定しましょう。
✅   セルに罫線を引く方法
⇨ border-collapseプロパティに、値としてcollapseを指定しましょう。
✅   セルの幅をカスタマイズする方法
⇨ widthプロパティにて、セルごとの幅を指定するが可能です。
✅   thead, tbody, tfootなどの要素を設定
⇨ 表レイアウトに具体的な区切りをつけるには、thead, tbody, tfootで分けましょう
✅   表に立てスクロールを実装する方法
⇨ tbody要素へoverflow-yプロパティを設定し、値としてscrollを指定しましょう。

コメント

タイトルとURLをコピーしました