
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
ITコラム
2016.12.06
table内でグループ化をすると、セルの背景色などをCSSで一括指定できるので、<th>や<td>で1つずつ指定する手間が省けてとても便利です。
今回は、そんな表のグループ化について紹介します。
1.colgroupとcolで縦列をグループ化してみよう
1.1 colgroup要素
1.2 CSSの設定
1.3 col要素
2.thead、tbody、tfootで横列をグループ化してみよう
2.1 thead要素、tbody要素、tfoot要素
2.2 CSSの設定
まず、tableの縦列をグループ化してみましょう。colgroup要素とcol要素を使います。
表の縦列をグループ化すると、次のような表を作ることができます。
この表は、colgroup要素を使って、5列ある縦列を2列と3列に分けています。
このようにcolgroupは「合計5列のうち、2列をグループ化する」というような使い方をします。
colgroupの書き方は下の通りです。
<colgroup>は、tableの最初の方にまとめて書きます。
span属性を使って、最初は「2列」をグループ化し、次は「3列」をグループ化する、と指定しています。
1.2 CSSの設定でCSSの設定をしたいので、それぞれにid名( itemとcost )を付けています。
<table class="sample1"> <caption>出金管理</caption> <colgroup span="2" id="item"></colgroup> <colgroup span="3" id="cost"></colgroup> <tr> <th colspan="2">科目</th> <th>当月料金</th> <th>先月料金</th> <th>昨年同月料金</th> </tr> ・ ・
<colgroup>を書く場所は必ず<caption>の下(<tr>の前)です。
<caption>が無い場合は、<table>の直後に書きます。
1.3 col要素でcol要素を使いますが、<colgroup>にspan属性を使ったら、その中に<col>は入れられません。
<col>は<colgroup>の中に入れて、<colgroup>をさらに縦割りするのに使いますが、<col>を入れる場合は、<colgroup>にspan属性を使用せず、代わりに<col>の中でspan属性を使ってグループ分けします。
さきほどの表では、グループ化した縦列を色分けしています(背景色が、水色と薄ピンクの部分です)。
このような指定は、CSSで行います。
CSSの書き方は次の通りです。
table.sample1 colgroup#item { background: #B0E0E6; } table.sample1 colgroup#cost { background: #FFE4E1; }
最初の2列のグループ(#item)は背景色に#B0E0E6(水色)を、次の3列のグループ(#cost)には#FFE4E1(薄ピンク)を指定していいます。
colgroupの指定の仕方がわかったところで、次にcol要素の使い方を紹介します。
<col>は、<colgroup>内の縦列をグループ化します。
<colgroup> ~ </colgroup>内に<col>を入れて、さらに縦列を分けてみましょう。
このように、さきほどの表の縦列を、さらに小分けにグループ化して色分けします。
colの書き方は次の通りです。
<table class="sample1"> <caption>出金管理</caption> <colgroup><col id="subject"><col id="detail"></colgroup> <colgroup><col id="current"><col span="2" id="compare"></colgroup> <tr> <th colspan="2">科目</th> <th>当月料金</th> <th>先月料金</th> <th>昨年同月料金</th> </tr> ・ ・
最初のcolgroup内に2つのcolが入ってます。そして、それぞれ「subject」「detail」というid名を付けています。
2番目のcolgroup内には、1つのcolと、span属性で1つにしたcolが入ってます。そして、それぞれに「current」「compare」というid名を付けています。
このように<colgroup>内に<col>を入れたら、<colgroup>にspan属性は使えません。
<col>を使う時は、「合計5列のうち、2列をグループ化する」という指示を、<col>が担当して、<colgroup>は、<col>のまとめ役をするというイメージです。
次に、CSSで背景色を色分けしましょう。
table.sample1 colgroup col#subject { background: #FFECEC; } table.sample1 colgroup col#detail { background: #EACFFA; } table.sample1 colgroup col#current { background: #FFC; } table.sample1 colgroup col#compare { background: #EEFFCD; }
このように、id名をつけた<col>に、それぞれ背景色を指定しました。
ちなみに、下のように、span属性無しで<col>を入れた<colgroup>と、span属性ありで<col>なしの<colgroup>を、混合して書くこともできます。
<colgroup><col><col></colgroup> <colgroup span="3"></colgroup>
今度は、tableの横列をグループ化してみましょう。
tableの横列(tr要素)をグループ化する場合は、thead要素、tbody要素、tfoot要素の3つの要素を使います。
「ヘッダ」「本体」「フッタ」に分けられているので、CSSの指定もわかりやすいです。
表の横列をグループ化すると、次のような表を作ることができます。
thead、tbody、tfootの書き方は下の通りです。
<table class="sample1"> <caption>出金管理</caption> <thead> <tr> <td colspan="2">科目</td> <td>当月料金</td> <td>先月料金</td> <td>昨年同月料金</td> </tr> </thead> <tbody> <tr> <td rowspan="3">光熱費</td> <td>電気</td> <td>¥8,500</td> <td>¥8,000</td> <td>¥9,500</td> </tr> <tr> <td>ガス</td> <td>¥5,500</td> <td>¥5,000</td> <td>¥5,700</td> </tr> <tr> <td>水道</td> <td>¥4,000</td> <td>¥3,500</td> <td>¥4,300</td> </tr> <tr> <td rowspan="2">通信費</td> <td>携帯電話</td> <td>¥15,000</td> <td>¥13,000</td> <td>¥9,000</td> </tr> <tr> <td>インターネット</td> <td>¥3,000</td> <td>¥3,000</td> <td>¥3,000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">合計</td> <td>¥36,000</td> <td>¥32,500</td> <td>¥31,500</td> </tr> </tfoot> </table>
<thead> ~ </thead>、<tbody> ~ </tbody>、<tfoot> ~ </tfoot>いずれも、<tr> ~ </tr>を囲むように書きます。
●<thead>
1つのtableの中に1つしか入れられません。
そして、他の<tbody><tfoot>よりも前に入ってなければなりません。
この中に<tr>要素はいくつでも入れられます。
●<tbody>
1つのtableの中に複数入れられます。
この中に<tr>要素はいくつでも入れられます。
●<tfoot>
1つのtableの中に1つしか入れられません。
この中に<tr>要素はいくつでも入れられます。
さきほどの表では、グループ化した横列をCSSで色分け指定しています。
CSSの書き方は次の通りです。
table.sample1 thead tr { background: #B0E0E6; } table.sample1 tfoot tr { background: #EEFFCD; } table.sample1 tbody tr { background: #FFE4E1; }
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.