htmlとcssでtable（表）を作成しよう! table関連タグ意味と使い方。【html・css入門】【html・css 入門・ホームページつくりかた・WEBプログラミング・WEB初心者・WEB制作・チュートリアル・チュートリアル【html・css】・チュートリアル【table】】

posted on 2019.9.11

htmlの<table>タグはhtmlでエクセルのような表を作成するために用いられます。htmlではexcelのような表（テーブル）を作る為に<table>タグを始め関連するいくつかのタグが準備されています。簡単なウェブページが作成できるようになってきた頃に割りと躓きやすいのがhtmlでの表（テーブル）の作成だと思います。

今回はhtmlで表（テーブル）を組む為のタグの意味や実際の使い方をホームページ制作初心者でも理解し易いように解説しながら、簡単な表（テーブル）をhtmlとcssを使って作成してみたいと思います。

htmlとcssで基本的な表（テーブル）の作成

最初にhtmlとcssでホームページ制作初心者の方でも理解できるような簡単な表（テーブル）を作成してみます。基本的なマークアップは以下のようになります。

・html

<table>
    <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>
      <tr> 
            <td>ラブラドール・レトリーバー</td> 
            <td>ニューファンドランド島</td> 　　　　　　　
            <td>大型犬</td> 
      </tr>
    </tbody>
</table>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>フレンチ・ブルドック</td>

</tr>

　　　　<tr>

　　　　</tr>

<tr>

<td>ラブラドール・レトリーバー</td>

<td>ニューファンドランド島</td> 　　　　　　　

</tr>

</tbody>

</table>

・css

table{
    width: 100%;
    background: #efd9b8;
    font-size: 1em;
}

thead{
    border: none;
    background:  #e6b870;
}


tbody{
    border: none;
}

th{
    border: none;
    text-align: center;
    padding: 2em 0;
}

td{
    border: none;
    text-align: center;
    padding: 1em .5em;
    font-size: 80%;
}

table{

width: 100%;

background: #efd9b8;

font-size: 1em;

}

thead{

border: none;

background: #e6b870;

}

tbody{

border: none;

}

th{

border: none;

text-align: center;

padding: 2em 0;

}

td{

border: none;

text-align: center;

padding: 1em .5em;

font-size: 80%;

}

・上記htmlとcssで制作された表（テーブル）

犬種	原産地	サイズ
フレンチ・ブルドック	フランス	小型犬
チワワ	メキシコ	小型犬
ラブラドール・レトリーバー	ニューファンドランド島	大型犬

htmlの表組み関連タグと解説

・<table>タグ

HTMLテーブルを定義します。このタグがなければテーブル（表）として認識できません。

・<thead>タグ

HTMLテーブル内のヘッダーコンテンツをグループ化するために使用されます。

・<tbody>タグ

HTMLコンテンツの本文をグループ化するために使用されます。最低1つの<tr>タグを含ませる必要があります。

・<tr>タグ

HTMLテーブルの行を定義します。<tr></tr>で1行を表現します。

・<th>タグ

HTMLテーブル内の見出しやタイトルとなるセルを作成するタグです。

・<td>タグ

HTMLテーブル内の内容やデータを表します。

HTMLテーブルにborder(境界)を指定する。

最初に使用したhtmlの表（テーブル）はcssでborder: none;を指定して境界を消していましたが、ここではhtmlの表（テーブル）にborder(境界)を設定していきたいと思います。htmlの表（テーブル）作成で最初に引っかかるのが多分この部分で少しコツと我慢が必要です。イラストレーターのように簡単に境界線を設定することができないのが、htmlやcssの難しさでもあります。

最初に作成したhtmlの表（テーブル）に少し手を加えて、cssにborder: #fff;(ホワイト)を設定したのが以下のテーブルになります。なんとなくテーブルらしさがでたのではないでしょうか？。設定する色は特にホワイトでなくても構いません。ただ本来はテーブルの外周にも指定した色が反映されることになります。少しごまかしになりますがホワイトの背景にホワイトの線を設定することで、外周には設定がされていないかのようにしてあげているだけです。実際、htmlやcssでは自分が求めるデザインを簡単に実装するためにこうしたごまかしのテクニックも必要になってきます。

犬種	原産地	サイズ
フレンチ・ブルドック	フランス	小型犬
チワワ	メキシコ	小型犬
ラブラドール・レトリーバー	ニューファンドランド島	大型犬

上記のhtmlテーブルを表現するために、borderプロパティーの他に、border-collapseプロパティーとborder-spacingプロパティーを追加しています。簡単に解説した後にコードを示してこの章を終わりにしたいと思います。

・borderプロパティー

border-syle、border-color、border-width（境界線の種類、境界線の色、境界線の太さ）の各プロパティーを一括で指定できます。並びは順不同。

・border-collapseプロパティー

セルの境界線を共有するか分離するかを設定します。

-値-

collapse	隣接するセルで境界線を共有します
separate	隣接するセルが個別に境界線を持ちます

ここではcollapseを指定しています。separeteを指定すると設定がより複雑になるので、必要がなければcollapseを指定してください。

・border-spacingプロパティー

隣り合うセルの枠線同士の上下左右の間隔を定めます。このプロパティは border-collapse が separate のときのみ適用されますが、ここでは念のため０を指定しています。コピペしたコードなどでhtmlとcssのテーブルを作成中、うまくいかなかった時などはこのプロパティーを疑ってみてください。

新しく追加したプロパティーは以上になります。上記の表（テーブル）を作成するのに必要なcssを記述しておきます。htmlは最初のテーブルを再利用して使用してください。

table{
    width: 100%;
    background: #efd9b8;
    font-size: 1em;
    border-collapse: collapse;
    border-spacing: 0;
}

thead{
    border: none;
    background:  #e6b870;
}


tbody{
    border: none;
}

th{
   border: solid 2px #fff;
    text-align: center;
    padding: 2em 0;
}

td{
    border: solid 2px #fff;
    text-align: center;
    padding: 1em .5em;
    font-size: 80%;
}

table{

width: 100%;

background: #efd9b8;

font-size: 1em;

border-collapse: collapse;

border-spacing: 0;

}

thead{

border: none;

background: #e6b870;

}

tbody{

border: none;

}

th{

border: solid 2px #fff;

text-align: center;

padding: 2em 0;

}

td{

border: solid 2px #fff;

text-align: center;

padding: 1em .5em;

font-size: 80%;

}

colspan属性を使用してセルの水平（横）方向を結合する

<th>タグや<td>タグなどセルを構成する直接的な要素に対してcolspan属性を使用することでセルの水平（横）方向を結合することができます。

「colspan=”結合したいセルの数”」で<th>タグや<td>タグの属性として指定します。

前に作成したhtmlテーブルの<th>タグの右二つを「colspan=”2″」を指定して結合してみます。

犬種	原産地とサイズ
フレンチ・ブルドック	フランス	小型犬
チワワ	メキシコ	小型犬
ラブラドール・レトリーバー	ニューファンドランド島	大型犬

原産地とサイズの水平（横）方向のセルが「colspan=”2″」を指定することでひとつのセルに結合されました。htmlは以下になります。

<table>
    <thead>
        <tr>
            <th>犬種</th><th colspan="2">原産地とサイズ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>フレンチ・ブルドック</td>
            <td>フランス</td>
　　　　　　　<td>小型犬</td>
        </tr>
 　　　　<tr> 
　　　　　　　<td>チワワ</td> 
　　　　　　　<td>メキシコ</td>
　　　　　　　<td>小型犬</td> 
　　　　</tr>
      <tr> 
            <td>ラブラドール・レトリーバー</td> 
            <td>ニューファンドランド島</td> 　　　　　　　
            <td>大型犬</td> 
      </tr>
    </tbody>
</table>

<table>

<thead>

<tr>

<th>犬種</th><th colspan="2">原産地とサイズ</th>

</tr>

</thead>

<tbody>

<tr>

<td>フレンチ・ブルドック</td>

</tr>

　　　　<tr>

　　　　</tr>

<tr>

<td>ラブラドール・レトリーバー</td>

<td>ニューファンドランド島</td> 　　　　　　　

</tr>

</tbody>

</table>

rowspan属性を使用してセルの垂直（縦）方向を結合する

<th>タグや<td>タグなどセルを構成する直接的な要素に対してrowspan属性を使用することでセルの水平（横）方向を結合することができます。

「rowspan=”結合したいセルの数”」で<th>タグや<td>タグの属性として指定します。

前に作成したhtmlテーブルの<td>タグの右二つを「rowspan=”2″」を指定して結合してみます。

犬種	原産地とサイズ
フレンチ・ブルドック	フランス	小型犬
チワワ	メキシコ	小型犬
ラブラドール・レトリーバー	ニューファンドランド島	大型犬

小型犬の垂直方向のセルが「rowspan=”2″」を指定することでひとつのセルに結合されました。htmlは以下になります。

<table>
    <thead>
        <tr>
            <th>犬種</th><th colspan="2">原産地とサイズ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
              <td>フレンチ・ブルドック</td>
              <td>フランス</td>
　　　　　　　<td rowspan="2">小型犬</td>
        </tr>
 　　　　<tr> 
　　　　　　　<td>チワワ</td> 
　　　　　　　<td>メキシコ</td>
　　　　</tr>
      <tr> 
            <td>ラブラドール・レトリーバー</td> 
            <td>ニューファンドランド島</td> 　　　　　　　
            <td>大型犬</td> 
      </tr>
    </tbody>
</table>

<table>

<thead>

<tr>

<th>犬種</th><th colspan="2">原産地とサイズ</th>

</tr>

</thead>

<tbody>

<tr>

<td>フレンチ・ブルドック</td>

</tr>

　　　　<tr>

　　　　</tr>

<tr>

<td>ラブラドール・レトリーバー</td>

<td>ニューファンドランド島</td> 　　　　　　　

</tr>

</tbody>

</table>

htmlテーブルのセルの横幅を設定する

tableのそれぞれのセルの横幅（width）を設定するには<th>タグや<td>タグにwidth属性として直接書き込む方法やcssで指定する方法があります。それぞれの書き方について説明していきたいと思います。

・table内の<th>タグや<td>タグにwidth属性を設定する

前で作成したtableの犬種のセルの幅を少し縮めて見ます。比較してみてください。

犬種	原産地とサイズ
フレンチ・ブルドック	フランス	小型犬
チワワ	メキシコ	小型犬
ラブラドール・レトリーバー	ニューファンドランド島	大型犬

htmlは以下になります。犬種の<th>タグに[width=”150″]を新しく追加しました。[width=”30%”]などの相対で指定することもできます。

<table>
    <thead>
        <tr>
            <th width="150">犬種</th><th colspan="2">原産地とサイズ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
              <td>フレンチ・ブルドック</td>
              <td>フランス</td>
　　　　　　　<td rowspan="2">小型犬</td>
        </tr>
 　　　　<tr> 
　　　　　　　<td>チワワ</td> 
　　　　　　　<td>メキシコ</td>
　　　　</tr>
      <tr> 
            <td>ラブラドール・レトリーバー</td> 
            <td>ニューファンドランド島</td> 　　　　　　　
            <td>大型犬</td> 
      </tr>
    </tbody>
</table>

<table>

<thead>

<tr>

<th width="150">犬種</th><th colspan="2">原産地とサイズ</th>

</tr>

</thead>

<tbody>

<tr>

<td>フレンチ・ブルドック</td>

</tr>

　　　　<tr>

　　　　</tr>

<tr>

<td>ラブラドール・レトリーバー</td>

<td>ニューファンドランド島</td> 　　　　　　　

</tr>

</tbody>

</table>

・<th>タグや<td>タグにcssのwidthプロパティーを設定する

先ほどの[width=”150″]の属性をはずしてからcssに以下を追加してください。width属性と同じ表現のテーブルを作成することができます。

table th:nth-of-type(1){
    width: 150px;
}

table th:nth-of-type(1){

width: 150px;

}

cssで設定した場合もwidth属性同様[width: 30%;]などの相対指定も可能です。

・tableの横幅（width）を設定しても効かなかった時の対処法

ie（インターネットエクスプローラー）などブラウザによってはテーブルの横幅（width）の設定がうまくいかない場合もあります。そのような場合はcssでtable-layoutプロパティーにfixedを設定するとwidthの設定がほぼ正常に反映されます。

table-layout: fixed;

1	table-layout: fixed;

tableをhtmlとcssで作成する記事まとめ

今回はtable（表）をhtmlとcssで作成するために必要な基本的な事項を確認しながら簡単なテーブルを作成してみました。いかがだったでしょうか。はじめから複雑なtable（表）の作成に取り掛かってもhtmlとcssで構成するtableは結構難しいものです。この記事があなたの理想のテーブル作成の第一歩になれば幸いです。それではまた。