【HTML】tableの基本の書き方、 CSSによる修飾も解説|HTML&CSS入門講座(19)

HTML&CSS
この記事は約18分で読めます。

はじめに

 HTML&CSS入門講座の第十九弾として、【HTML】tableの基本の書き方、 CSSによる修飾ついて紹介します。

 この記事を読むと次の疑問について知ることができます。

  • HTML tableタグの基本はどのようなもの?
  • HTML tableタグで表を作成してみよう!
  • cssで罫線を引いてみよう!
    • 表内のデータを中央寄せ
    • 表内の見出しや、データに文字色や背景色を設定するには?
    • 横方向又は縦方向のセルを結合するには?
    • 表のキャプション(表題)を付けたいときは?
    • 表のセル内に画像を入れてみましょう!
 HTML&CSS入門講座(18)では、【CSS】 overflow、white-spaceの基本の使い方について解説してきました。
 
 ここでは【HTML】tableの基本の書き方、 CSSによる修飾について深堀していきます。

HTML tableタグの基本

 tableタグは、表を作成するために使います。

 tableタグ以外に、th(Table Header)タグ、tr(Table Row)タグ、td(Table Data)タグの4つのタグを用います。

 使い方は次の通り。

tableタグ
 : <table></table> ⇐ 表全体をこのタグで挟む
tr(Table Row)タグ
 : <tr></tr> ⇐ 表の行ごとにこのタグで挟む
th(Table Header)タグ
 : <th>見出し</th> ⇐ 表の見出しセル一つ一つをこのタグで挟む
td(Table Data)タグ
 : <td>data</td> ⇐ 表内のデータセル一つ一つをこのタグで挟む

HTML tableタグで表を作成してみよう!

 それでは、ここで簡単に三行3列の表をさ作成して見たいと思います。

<!-- 三行3列の表で1行に見出し-->
<table>
<tr><th>国語</th><th>算数</th><th>英語</th> </tr>
<tr><td>90</td><td>75</td><td>100</td></tr>
<tr><td>68</td><td>80</td><td>70</td></tr>
</table>

 結果は次の通り。

上述の表の説明
  • 1行目は、どのような表を作成したかを書いています。(コメットアウト)
  • 二行目と六行目は、表の全体を囲むタグで挟んでいます。(<table>~</table>
  • 三行目は、行のタグ(<tr>~ </tr>)で3つの見出し<th>~</th>を挟んでいます。
  • 四、五行目は、行タグ(<tr>~ </tr>)でそれぞれの行を3つのデータタグ<td>~</td>を挟んでいます。
  • 罫線は入っていませんが、後ほどcssで書き入れるようにします。

 それでは、ここで、新たに1列追加して1列目に名前の見出しを入れてみましょう。

<!-- 四行3列の表で1行一列に見出し -->
<table>
<tr><th>名前\科目</th><th>国語</th><th>算数</th><th>英語</th> </tr>
<tr><th>○○○</th><td>90</td><td>75</td><td>100</td></tr>
<tr><th>△△△</th><td>68</td><td>80</td><td>70</td></tr>
</table>

 結果は次の通り。

cssで罫線を引いてみよう!

 tableタグにも罫線を引く機能(border属性)がありますが、ここでは、cssで罫線を引いてみたいと思います。

 css で罫線を引くプロパティは、borderプロパティーです。

 bordherの書き方は次の通り。

border: 線の太さ、線の色、線の種類

ここに、線の種類には、solid(実線)、dotted(点線)、dashed(破線)、oouble(二重線)などを指定できます。
<!-- 四行3列の表で1行一列に見出し、表にid=hyou01名を入れる。 -->
<table id="hyou01">
<tr>
<th>名前\科目</th><th>国語</th><th>算数</th><th>英語</th></tr>
<tr><th>○○○</th><td>90</td><td>75</td><td>100</td></tr>
<tr><th>△△△</th><td>68</td><td>80</td><td>70</td> </tr>
</table>
</body>
/* id名:hyou01の表に罫線を引く */
#hyou01 th, #hyou01 td {
border: 1px black solid;
}

 結果は次の通り。

 この表は、各見出し、各データに罫線が描かれているために、それぞれのデータの間に隙間が出てしまいます。

 これは、表に通常の枠線を描かせた場合に、表のプロパティーである「border-collapse」が初期値である「separate」になっているからです。

隙間をなくすようにするためには、次のように書き入れます。

border-collapse: collapse; ⇐ 表の罫線の隙間をなくして描く
border-collapse:separate; ⇐ 初期値、表の各セルごとに罫線が描かれるために隙間が生じる。
<!-- 四行3列の表で1行一列に見出し、表にid名=hyou02を入れる。 -->
<table id="hyou02">
<tr><th>名前\科目</th><th>国語</th><th>算数</th><th>英語</th></tr>
<tr><th>○○○</th><td>90</td><td>75</td><td>100</td></tr>
<tr><th>△△△</th><td>68</td><td>80</td><td>70</td></tr>
</table>
</body>
 /* id名:hyou02の表に罫線の隙間をなくす */
#hyou02 {
border-collapse: collapse;
}
#hyou02 th, #hyou02 td {
border: 1px black solid;
}

表内のデータを中央寄せ

 表を作成すると、見出しデータは太字で中央寄せになっていますが。他の表データは左寄せが初期値で文字幅一杯に作成されます。

 そこで、各セルの幅をもう少し広(セル幅:150px)くして、中央寄せにしてみたいと思います。

<!-- 四行3列の表で1行一列に見出し、表にid名=hyou03を入れる。各セルの幅を150pxにデータを中央寄せします。 -->
<table id="hyou03">
<tr>
<th>名前\科目</th>
<th>国語</th>
<th>算数</th>
<th>英語</th>
</tr>
<tr>
<th>○○○</th>
<td>90</td>
<td>75</td>
<td>100</td>
</tr>
<tr>
<th>△△△</th>
<td>68</td>
<td>80</td>
<td>70</td>
</tr>
</table>
 /* id名:hyou03の表に罫線の隙間をなくすと共に表のセル幅を広げ、文字を中央寄せ */
#hyou03 {
border-collapse: collapse;
}
#hyou03 th, #hyou03 td {
border: 1px black solid;
width:150px;
text-align: center;
}

 結果は次の通り。

表内の見出しや、データに文字色や背景色を設定するには?

 文字色は、colorプロパティーを、背景色はbackground-colorプロパティを使います。

 書き方は次の通り。

color: 文字色名(英語)又はカラーコード;
background-color: 文字色名(英語)又はカラーコード;
 最初は、見出しをお青、文字色をスカイブルー、その他のデータを灰色、文字色を赤にしてみましょう。
 
<!-- 四行3列の表で1行一列に見出し、表にid名=hyou04を入れる。各セルの幅を150pxにデータを中央寄せし見出し、データセルに修飾 -->
<table id="hyou04">
<tr>
<th>名前\科目</th>
<th>国語</th>
<th>算数</th>
<th>英語</th>
</tr>
<tr>
<th>○○○</th>
<td>90</td>
<td>75</td>
<td>100</td>
</tr>
<tr>
<th>△△△</th>
<td>68</td>
<td>80</td>
<td>70</td>
</tr>
</table>
 /* id名:hyou04の表に罫線の隙間をなくすと共に表のセル幅を広げ、文字を中央寄せ さらに文字修飾*/
#hyou04 {
border-collapse: collapse;
}
#hyou04 th {
border: 1px black solid;
width:150px;
color:skyblue;
background-color: blue;
text-align: center;
}
#hyou04 td {
border: 1px black solid;
width:150px;
background-color: gray;
color: red;
text-align: center;
}
 結果は次の通り。
 
 次に、縦1列目の背景を緑とし、文字色を白、算数の80点の部分のみを背景オレンジ色、文字色黒にしてみましょう。
 
これをやるのは、各セル部分にid名やclass名を付け、それをcssで指定して修飾すればOKです。
 
<!-- 四行3列の表で1行一列に見出し、表にid名=hyou05を入れる。各セルの幅を150pxにデータを中央寄せし見出し上下の隙間50px、1列目の名前部分の背景を緑、文字色を黒に修飾 -->
<table id="hyou05">
<tr>
<th class="rei03">名前\科目</th>
<th class="rei03">国語</th>
<th class="rei03">算数</th>
<th class="rei03">英語</th>
</tr>
<tr>
<th class="rei01">○○○</th>
<td class="rei04">90</td>
<td class="rei04">75</td>
<td class="rei04">100</td>
</tr>
<tr>
<th class="rei01">△△△</th>
<td class="rei04">68</td>
<td class="rei02">80</td>
<td class="rei04">70</td>
</tr>
</table>
#hyou05 {
border-collapse: collapse;
}
.rei01 {
color:white;
background-color: green;
width:150px;
height: 50px;
text-align: center;
}
.rei02 {
color:black;
background-color:orange;
width:150px;
height: 50px;
text-align: center;
}
.rei03 {
border: 1px black solid;
width:150px;
height: 50px;
color:skyblue;
background-color: blue;
text-align: center;
}
.rei04 {
border: 1px black solid;
width:150px;
height: 50px;
background-color: gray;
color: red;
text-align: center;
}
 結果は次の通り。
 

 横方向又は縦方向のセルを結合するには?

横方向のセルを結合するにはcolspan、縦方向のセルを結合するにはrowspanプロパティを使います。

使い方は、次の通り。

colspan:”結合するセルの数”; ⇐横方向のセルを結合
rowspan:”結合するセルの数”; ⇐縦方向のセルを結合
 ここでは、国語と算数の2行目を結合、英語の2行目と3行目のセルの結合をしてみたいと思います。
 
<table id="hyou06">
<tr>
<th class="rei03">名前\科目</th>
<th class="rei03">国語</th>
<th class="rei03">算数</th>
<th class="rei03">英語</th>
</tr>
<tr>
<th class="rei01">○○○</th>
<td class="rei04" colspan="2">90</td>
<td class="rei04" rowspan="2">100</td>
</tr>
<tr>
<th class="rei01">△△△</th>
<td class="rei04">68</td>
<td class="rei04" >80</td>
</tr>
</table>
#hyou06 {
border-collapse: collapse;
}

 結果は次の通り。

 

表のキャプション(表題)を付けたいときは?

 captionタグを利用すれば、簡単に表題を入れることができます。

 使い方は次の通り

<capution>表のタイトル</caption>
 それでは、実際に表題を入れてみましょう。
 
<!-- 四行3列の表で1行一列に見出し、表にid名=hyou07を入れる。各セルの幅を150pxにデータを中央寄せし見出し上下の隙間50px、1列目の名前部分の背景を緑、文字色を黒に修飾、さらに、セルの結合を横方向1つ縦方向1つ表題(通常の2倍の文字でボールド)を入れる-->
<table id="hyou07">
<caption>Aクラスの成績表</caption>
<tr>
<th class="rei03">名前\科目</th>
<th class="rei03">国語</th>
<th class="rei03">算数</th>
<th class="rei03">英語</th>
</tr>
<tr>
<th class="rei01">○○○</th>
<td class="rei04" colspan="2">90</td>
<td class="rei04" rowspan="2">100</td>
</tr>
<tr>
<th class="rei01">△△△</th>
<td class="rei04">68</td>
<td class="rei04">80</td>
</tr>
</table>
#hyou07 {
border-collapse: collapse;
}
caption {
font-size: 2em;
font-weight: bold;
}

 結果は次の通り。

表のセル内に画像を入れてみましょう!

 ここでは、今までの表に最後に1列追加して、タイトル花の画像、その下に実際の画像を挿入し、画像を中央寄せにして見たいと思います。

<!-- 四行3列の表で1行一列に見出し、表にid名=hyou08を入れる。各セルの幅を150pxにデータを中央寄せし見出し上下の隙間50px、1列目の名前部分の背景を緑、文字色を黒に修飾、さらに、セルの結合を横方向1つ縦方向1つ表題(通常の2倍の文字でボールド)さらに、列を追加して画像を挿入を入れる-->
<table id="hyou08">
<caption>Aクラスの成績表</caption>
<tr>
<th class="rei03">名前\科目</th>
<th class="rei03">国語</th>
<th class="rei03">算数</th>
<th class="rei03">英語</th>
<th class="rei03">花の画像</th>
</tr>
<tr>
<th class="rei01">○○○</th>
<td class="rei04" colspan="2">90</td>
<!-- <td class="rei04">75</td> -->
<td class="rei04" rowspan="2">100</td>
<td class="rei05" rowspan="2"><img src="https://yanai-ke.com/wp-content/uploads/2020/07/ponponmamu.jpg" alt="" width="100px"></td>
</tr>
<tr>
<th class="rei01">△△△</th>
<td class="rei04">68</td>
<td class="rei04">80</td>
<!-- <td class="rei04">70</td> -->
</tr>
</table>
#hyou08 {
border-collapse: collapse;
}
caption {
font-size: 2em;
font-weight: bold;
}
.rei05 {
text-align: center;
border: 1px black solid;
}

 結果は次の通り。

おわりに

 如何だったでしょうか?

 HTML tableタグの基本はどのようなもの?、HTML tableタグで表を作成してみよう!、cssで罫線を引いてみよう!、表内のデータを中央寄せ、表内の見出しや、データに文字色や背景色を変更するには?、横方向又は縦方向のセルを結合するには?、表のキャプション(表題)を付けたいときは?表のセル内に画像を入れてみましょう!などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

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