はじめに
HTML&CSS入門講座の第十九弾として、【HTML】tableの基本の書き方、 CSSによる修飾ついて紹介します。
この記事を読むと次の疑問について知ることができます。
- HTML tableタグの基本はどのようなもの?
- HTML tableタグで表を作成してみよう!
- cssで罫線を引いてみよう!
- 表内のデータを中央寄せ
- 表内の見出しや、データに文字色や背景色を設定するには?
- 横方向又は縦方向のセルを結合するには?
- 表のキャプション(表題)を付けたいときは?
- 表のセル内に画像を入れてみましょう!
HTML tableタグの基本
tableタグは、表を作成するために使います。
tableタグ以外に、th(Table Header)タグ、tr(Table Row)タグ、td(Table Data)タグの4つのタグを用います。
使い方は次の通り。
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の書き方は次の通り。
<!-- 四行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」になっているからです。
隙間をなくすようにするためには、次のように書き入れます。
<!-- 四行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プロパティを使います。
書き方は次の通り。
<!-- 四行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;
}
<!-- 四行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プロパティを使います。
使い方は、次の通り。
<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タグを利用すれば、簡単に表題を入れることができます。
使い方は次の通り
<!-- 四行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で罫線を引いてみよう!、表内のデータを中央寄せ、表内の見出しや、データに文字色や背景色を変更するには?、横方向又は縦方向のセルを結合するには?、表のキャプション(表題)を付けたいときは?表のセル内に画像を入れてみましょう!などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント