HTMLのテーブルを使いメニュー表などを作成し見やすくする

HTMLにはテーブルというものがあります。

テーブルを使うとメニュー表などの表で作成するものが簡単に綺麗に整理して表示することが出来ます。

これを使うことにより、サイトが見やすくなりSEOや成約で有利になります。

テーブルとは

テーブルとは、上の画像のような表形式で表示する方法を言います。

 

縦方向の青の部分を、列もしくはcolumn(カラム)と言います。

横方向の赤の部分を、行またはrow(ロー)と言います。ローはレコードとも言ったりします。

そして1つ1つの四角く区切られた部分をセルと言います。

テーブルを作成するHTMLの書き方(基礎)

テーブルはこのように書きます。

タグの解説は次に説明します。

テーブルに使うタグの解説

tableタグ

表を定義するためのタグです。

このタグの中で1つの表が完結します。

trタグ

表の行がどこまでかを定義するためのタグです。

tableタグの次に書き、行の数だけ定義します。

tdタグ

表のセルを定義するタグです。

trタグの中に書き、セルの数だけ定義します。

thタグ

thタグは、tdタグと同じように使いますが、ヘッダーにのみ使います。

これを使うことでヘッダーかどうかを判別することができます。

テーブルにCSSをあてる

HTMLだけでは線も色も初期状態のままです。

これに装飾することでもっと少し見やすくなります。

表の線を描く

まずは表のように見せるために縦横の線を足します。

このとき、td と th だけでなく table にも線をつけていますが、無くても表のような線はできます。

でも table も含めて線の設定をするほうが便利な場面が多いのでおすすめします。

tr には線は不要です。

 

border プロパティはテーブルやブロック要素に線を引くためのプロパティです。

値の 1px solid #AAAAAA は、solid は実線のことで、#AAAAAA は薄いグレーの色を表します。

つまり、1pxの太さの実線で色はグレーってことになります。

この順番はバラバラでも自動的に読み取ってくれます。

線の隙間を埋める

border-collapse はテーブル内の線の隙間を空けるかどうかの設定が出来るプロパティです。

初期状態では値に separate が設定されており、これは隙間を空けて表示する値になります。

これを collapse にすると隙間がなくなります。

ちなみに初期状態では下の画像のようになります。

ヘッダーカラムに色をつける

ヘッダーカラムの背景の色を変えたほうが見やすいので変えてみました。

ただ、せっかくなので rgba を使った色の指定の仕方を紹介します。

rgba は、RGBAカラーモデルというもので色を指定します。

rgba() の () 内は , で4つの値を指定できます。

最初の3つは0-255までの数値を指定し色を確定し、最後の数値は0~1を小数で指定することで色の透過を指定できます。

色を透過させて背景を見えるようにしたい場合にこの方法を使います。(今回は特に使う必要はありませんでした)

 

ちなみに#FFFFFF などの色の指定の仕方も、16進数で2桁ずつにわけると 16×16=256 となりますので基本は同じです。

テーブルの結合

セルを結合するのはHTMLだけで出来ます。

上のHTMLを表示すると下の画像のようになります。

セルの結合は、横に結合する場合と縦に結合する場合があります。

 

rowspan=”2″ のように書くと、縦方向に下のセルと結合します。

colspan=”2″ のように書くと、横方向に右のセルと結合します。

結合するセルの数は=”2″で指定した数値の分で、=”2″だと自分自身を含めて2個のセルが結合します。

指定した数だけ結合しますが、数値よりもセルが少ない場合はあるだけ結合します。

 

rowspan, colspan の span は跨るという意味です。

その前の row と col はローとカラムのことなので、言葉を理解すればどちらに結合するか理解できそうですね。

まとめ

テーブルの作成はHTMLタグの table, tr, td, th タグを使って作成する。

CSSでセルごとに色を変えたり、表の線を設定したり出来る。

結合は rowspan が縦方向で、colspan が横方向。

テーブルを使うと情報をきれいに整理出来る場面が多々ありますので、しっかり使いこなせるようにしておきましょう。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA