2024.01.09
【HTML・CSS】表作成の基本から装飾方法までコード付き解説
HTMLでの表作成は、指定できることが多くてコードも複雑に見えるため、抵抗感のある方も多いのではないでしょうか。HTMLの中身を知れば知るほど、使い方に悩んでしまいます。
タグの使い方が多数あるHTMLは動作の基本をひとつずつ抑えれば、表作成もスムーズにこなせます。デザインが豊富なレイアウトも、CSSを使用すれば複雑になりません。
そこで今回は、HTMLでの基本的な表作成方法と、CSSを使用しての装飾方法を紹介します。コード付きで解説していますので参考にしてください。
この記事でわかること
- HTMLの基本タグ
- HTMLでの基本的な表作成方法と編集方法
- CSSでの装飾方法
HTMLにおける表とは
HTMLにおける表とは、行と列にデータを配置して表示したものです。実際にはスプレッドシートのような形で表示されます。表の行と列には、画像・リンク・テキストなどが配置可能です。表を使用すると情報が整理されて見やすくなるため、よく使用されています。
文章のみが並んだ単調なWebサイトよりも、表を利用して見やすく工夫されたサイトの方が、知らせたい情報をわかりやすく伝えられるところがメリットです。
HTMLの基礎的tableタグ
HTMLで表を作成するために必要なタグは、table・tr・th・tdの4種類です。それぞれのタグの書き方と、タグの役割について解説します。タグはすべて開始を「<>」、終了を「」でくくります。
tableタグ
tableタグは表の開始と終了を示すタグです。
開始を
<table>
|
終了を
</table>
|
と書きます。
tableタグの間に挟まれたテキストやリンクなどが表で表示されます。
trタグ
trは「Table Row」の略で、Rowは行を意味します。trタグは文字列を行に分けるタグです。
行の開始を
<tr>
|
終了を
</tr>
|
と書きます。
trタグで挟むことで、テキストを1行として認識します。
thタグ
thは「Table Header」の略で、Headerは見出しを意味します。thタグは見出しを設定するタグです。
開始を
<th>
|
終了を
</th>
|
と書きます。
thタグで挟むことで、表の見出しとなるセルを作成します。
tdタグ
tdは「Table Date」の略で、Dateはデータを意味します。tdタグは表の内容を設定するタグです。
開始を
<td>
|
終了を
</td>
|
と書きます。
tdタグで挟むことで、表のデータとなるセルを作成します。
HTMLでの表作成方法
HTMLのtableタグを使った表の作成方法を、5つのステップで紹介します。まずは、基本となる表を4つのタグを使用して作成します。用途に合わせて見出しを作成、行や列を追加、セルを統合することも可能です。
step1.基礎的タグ4種で表を作成
| 名前 | 年齢 |
| 山田 | 20 |
| 山本 | 30 |
上記の表をHTMLのtableタグを使用して作成すると、以下のとおりになります。
<table>
|
step2.見出しを作成
上記の表での見出しは「名前」と「年齢」の部分です。見出しは表の一番上に配置されるのが一般的ですが、下記のように左端の列が見出しになる場合もあります。
| 番号 | 名前 | 年齢 |
| 1 | 山田 | 20 |
| 2 | 山本 | 30 |
この見出しが追加された表のイメージを、HTMLのtableタグを使用して作成すると、以下のとおりになります。
<table>
|
step3.行を増やす
thタグとtdタグの組み合わせを増やすだけで、好きなだけ行を増やせます。
| 番号 | 名前 | 年齢 |
| 1 | 山田 | 20 |
| 2 | 山本 | 30 |
| 3 | 山根 | 40 |
上記のように、下に1行増やす場合のHTMLのtableタグは、以下のとおりになります。
<table>
|
step4.列を増やす
行と同じように、列もthタグとtdタグを配置したい場所に追加すれば、自由に増やせます。
| 番号 | 名前 | 年齢 | 性別 |
| 1 | 山田 | 20 | 男 |
| 2 | 山本 | 30 | 男 |
上記のように、右端に1列増やす場合のHTMLのtableタグは、以下のとおりになります。
<table>
|
step5.セルを統合する
以下の表のように「男」部分のセルを統合させたいとします。
| 番号 | 名前 | 年齢 | 性別 |
| 1 | 山田 | 20 | 男 |
| 2 | 山本 | 30 |
セルを統合する場合のHTMLのtableタグは、タテとヨコのどちらを統合させるのかで異なります。今回のようにタテを統合させる場合に使用するタグは「rowspan」です。
タテに並んでいる2つのセルを統合するには、「rowspan=2」を必要箇所に指定します。上記のイメージどおりに書き変えるなら、1の列にセル統合の指示を出しましょう。
<th>1</th><td>山田</td><td>20</td><td rowspan="2">男</td>
|
同じく、ヨコのセルを結合させる場合は、「colspan」を指定箇所で使用します。
CSSを使って表を装飾する
HTMLで作成した表を装飾するには、CSSを使用します。HTMLタグでも指定できますが複雑になるため、CSSを使用するのが一般的です。CSSを使用した装飾方法をそれぞれ紹介します。
表の余白を取る
表内を見やすくするために、セルに余白を作成することも可能です。余白を作成するには、それぞれのthやtdに対して「padding」を指定してテキスト周りに余白をとります。たとえば、5pxの余白をとりたい場合は、
padding: 5px;
|
と指定します。
表に枠線をつける
セルに枠線をつけるには「border:~~」を指定します。セルの罫線と重ならず、1本の線のようにきれいに見せるには、tableに
border-collapse:collapse;
|
と指定しましょう。
テキストの色・サイズを変更する
テキストの色を変更するには「color」を使用します。「color」の後に指定するカラーを入力しますが、色の表現方法は3つです。
| 色の表現方法 | 説明 | 例 |
| 英語 | 色を英語に変換する | color: red |
| RPG | 青・赤・緑の3色を組み合わせて表現 0から255まである | color: rgb(255,0,0); |
| 16進数 | AからFまでの文字と0から9までの数字を使用して表現 | #000000 |
テキストのサイズを変更するには「font-size」を使用します。サイズはいくつかの単位から指定できますが、主に使われているのは以下の3つです。
| 単位 | 説明 | 例 |
| px | 画素を表す | front-size 14px |
| rem | フォントサイズを基準にしたもの | front-size 1rem |
| em | 現在の要素のフォントサイズに基づいたサイズ | front-size 2em |
背景色をつける
背景色は「background-color」で指定可能です。色の指定方法は、テキスト色の変更と同じように、英語・RPG・16進数で表示できます。背景色は見出しのセルで使うと、テキストとの違いがわかりやすくなります。
1行ごとに背景色を変える
1行ごとに背景色を変えるには「nth-child」を使用します。2番目と4番目など、偶数行を変更する場合は、以下のとおりです。
| nth-child(2n){ background:（カラー）; } |
ただし、表に見出しがある場合、同じように偶数行を指定するときは「＋1」で指定します。
| nth-child(2n＋1){ background:（カラー）; } |
見出しを装飾する
見出しを強調させるには、テキストの色や背景色を変更するだけではありません。影付きやラインなど、さまざまな装飾方法もあります。豊富な装飾方法の中でも、定番の方法を紹介します。
| 影付き文字 | text-shadow |
| 点線のアンダーライン | border-bottom |
| 左に太めのライン | border-left |
| 斜線の背景色 | background: repeating-linear-gradient |
表の幅を変更する
表の幅はあらかじめ指定していないと、セル内のテキスト量に応じて変化します。幅を指定する場合は「width」を使用します。
親要素の幅の100％で指定するなら、以下のように指定します。
| width: 100%; |
テキストの折り返しを防ぐ
テキストの折り返しは長いテキストのセルが基準になるため、短いテキストの幅が狭まります。セルが狭まったことによるセル内の折り返しを防ぐには、CSSに
| white-space:nowrap |
を指定し、折り返しを防ぎたいHTMLのセルに
| class=”nowrap” |
を追加すれば、セル内のテキストは折り返されません。
横スクロール可能にする
セル内のテキスト量が多い場合や列数が多い表は、表を横にスクロールさせることが可能です。
まずはtableに
| class=”scroll” |
をつけます。次はscrollに
| overflow:auto; |
を指定します。
まとめ
HTMLにおける表とは、行と列にデータを配置して表示したものです。実際にはスプレッドシートのような形で表示されますが、4つのタグによって構成されています。基本的な4つのタグは、table・tr・th・tdです。
HTMLでの表作成は、4つのタグを使用すればスッキリとしたシンプルな表が完成します。加えてCSSを使用すると、枠線をつけたりテキストや背景に色をつけたりと、装飾することも可能です。
見やすさを保つためには、テキストの量に応じて表の幅を変更したり折り返しを防いだりするなど、指示を追加しましょう。
