ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


人の可能性が、
次の世界を
つくる

ファーストビュー ファーストビュー ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

【表(テーブル)】HTMLCSSで表の作成、枠の幅や線の調整書き方解説

表テーブルの作成HTMLCSS

tableは表(テーブル)を作るHTMLタグです。テーブルの基本的な書き方からCSSでの装飾のやり方までを、初心者の人でも理解しやすいようわかりやすく解説しています。Webサイトがグッと見やすくなるので、ぜひ活用してみてくださいね。

HTMLのtableタグとは

HTMLのtableは、表(テーブル)を作成できるタグです。

テーブルは会社概要や料金プランのようなものを作るときに活用できます。Webサイトを閲覧していて目にすることも多いのではないでしょうか。

tableタグの使い方

h3:基本的な書き方のコードと合わせてください

HTMLで表を作成するときは、主に4つのタグを使用します。

table:表全体をはさむタグ。<table>~</table>の間が表になる。
tr:表の行(横一列)部分をはさむ。いくつ使っても○
th:はさまれた部分が見出しになる。trの中で使う。
td:はさまれた部分が表の中身のデータになる。trの中で使う。いくつ使っても○

基本的な書き方

tableタグの構造がわかったので、つづいて書き方について説明します。上部のサンプル画像と同じ表を作ってみます。

<table>
     <tr>
         <th>名前</th><th>性別</th><th>年齢</th>
     </tr>
     <tr>
         <td>山田</td><td>女</td><td>20</td>
     </tr>
     <tr>
         <td>佐藤</td><td>男</td><td>25</td>
     </tr>
 </table>

まず表全体をtableタグで囲います。次にtableの中に必要な行の分だけtrを書きます。

見出しthとデータtdはそれぞれtrの中に入れます。trの中に入れるセルの数は統一してくださいね。

見出しがない場合の書き方

h3:基本的な書き方のコードと合わせてください

テーブルには必ず見出しが必要ではありません。

見出しがいらない場合は、thを書かずにtable・tr・tdの3つだけでOKです。

<table>
     <tr>
         <td>山田</td><td>女</td><td>20</td>
     </tr>
     <tr>
         <td>佐藤</td><td>男</td><td>25</td>
     </tr>
 </table>
上記のコードと合わせてください

これで見出しがなくなりました。

見出しを縦に並べる場合の書き方

下記のコードと合わせてください

テーブルは見出しを縦に並べることもできます。

<table>
     <tr>
         <th>名前</th><td>山田</td><td>佐藤</td>
     </tr>
     <tr>
         <th>性別</th><td>女</td><td>男</td>
     </tr>
     <tr>
         <th>年齢</th><td>20</td><td>25</td>
     </tr>
 </table>

見出しthとデータtdを同じtrに入れると、縦に見出しを並べたテーブルが作れます。

行や列を増やす

テーブルの行数と列数はいくらでも増やせます。

  • 行を追加する場合:trを増やす
  • 列を追加する場合:thtdを増やす

行や列を増やす場合は、必ずセルの数をそろえましょう。レイアウトが崩れてしまいます。

テーブルの概要を入力する

テーブルの上に「これはどんなテーブルなのか」と概要を書くことも可能です。一目でテーブルの内容を伝えられるメリットがあります。

<table>
     <caption>顧客リスト</caption>
     <tr>
         <th>名前</th><th>性別</th>
     </tr>
     <tr>
         <td>山田</td><td>女</td>
     </tr>
     <tr>
         <td>佐藤</td><td>男</td>
     </tr>
 </table>
上記のコードと合わせてください

テーブルの概要を入れるときは、tableタグのすぐ下にcaptionタグを書かなければいけません

テーブルのデザインを変える

次はテーブルの装飾を変えてみましょう。

tabletrタグに直接スタイル指定をすることもできますが、テーブルごとに設定するのは時間がかかってしまいます。CSSでテーブルのデザインを変える方法を説明します。

余白を変える

下記のコードにあわせてください

見出しの余白を変更するときはthに、中身のデータの余白を変更するときはtdpaddingを指定します。

<table>
     <tr>
         <th>名前</th><th>性別</th><th>年齢</th>
     </tr>
     <tr>
         <td>山田</td><td>女</td><td>20</td>
     </tr>
     <tr>
         <td>佐藤</td><td>男</td><td>25</td>
     </tr>
 </table>
table th { /*見出しに余白を設定*/
     padding: 15px; /*上下左右15px*/
 }

 table td { /*データに余白を設定*/
     padding: 10px; /*上下左右10px*/
 }
上記のコードと合わせてください

データのセル周りの余白が広くなったのがわかります。余白は詰まって見えてしまう場合などに使うと有効です。

文字色・背景色を変える

文字色と背景色を変えていきます。

table自体に色指定をかければ、テーブル全体の文字色を変えられます。見出しとデータを色分けする場合は、thtdに色を指定します。

table th {
     color: red;
 }
 table td {
     color: gray;
 }
上記のコードと合わせてください

背景色を指定するときにはbackgroundを使用します。

table th {
     color: red;
     background: gray;
 }
上記のコードと合わせてください

文字を中央寄せにする

テーブルのデフォルトでは、見出しth以外が左寄せです。テーブル全体の文字を中央寄せにする場合は、tabletext-alignを指定します。

table {
     text-align: center;
 }
 /*中央寄せ以外の指定は省略*/

表全体の幅やセルの幅を変える

下記のコードと合わせてください

table・th・tdは、デフォルトのままだとテキストの量に合わせて広がります。幅を変更することで、もう少し見やすくなります。

<table>
     <tr>
         <th>会社名</th><td>株式会社○○</td>
     </tr>
     <tr>
         <th>住所</th><td>東京都渋谷区桜丘町○○番△号 □□タワー4F</td>
     </tr>
 </table>
table {
     width: 100%;
 }
 table th {
     width: 30%;
 }
 table td {
     width: 70%;
 }

table全体を目一杯広げ、見出しのthtable全体の30%、データのtdを残りの幅にするために70%と指定します。

上記のコードと合わせてください

枠線の種類・太さ・色を変える

テーブルの枠線(罫線)は線の種類や太さ、色を変更することができます。borderを指定しましょう。

border:種類 太さ 色

罫線のプロパティはまとめて指定ができます。「種類・太さ・色」は書き順に決まりはありません。

table th,td {
     border: solid 1px #000
 }
table th,td {
     border: double 2px #blue
 }
table th,td {
     border: dashed 2px #red
 }
上記のコードと合わせてください

レスポンシブデザインにする(スマホ対応)

スマホでテーブルのあるWebサイトを閲覧していると、レイアウトが崩れてしまっていることがあります。

CSSでtable {width: 100%}を指定すると、コンテンツの幅に合わせてテーブルの大きさが調整されます。

まとめ

tableタグの使い方についてまとめてみました。

表(テーブル)を作成するとページが見やすくなるだけでなく、情報が一目でわかるメリットがあります。難しそうに思えるtableをマスターして、積極的に表を取り入れてみてくださいね。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。
佐藤先生


VSコードウェブデザイン初心者
ホームページ作成をする人は必見!VScodeのインストール方法と必須拡張機能9選!beautifyは神拡張機能なので使い方を覚えよう

  HTMLやCSSを編集するために初心者へおすすめしたい「VScode(Visual Studio Code)」。Microsoft社が提供しているコードエディタです。超軽量かつ豊富な拡張 ...



© 2022 エンジニアラボ【ワードプレスのテーマ構築を制作実績200件以上の現役ウェブデザイナーが初心者に分かりやすい制作テクニックを教えます】 Powered by AFFINGER5