CSS

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

Sponsored Link

Sponsored Link

表(table)の作り方

表を作るには。
テーブルタグを使います。

<TABLE>はテーブル(表)を作成するタグで

<TABLE>~</TABLE>内に<TR>~</TR>を加えることでで表の横一行をまずは定義します。

つまりTR数が行数ということになります。

TRはtable raw(テーブル行)の略で。
この行の中に<TH>~</TH>や <TD>~</TD>でセルを定義します。

THはtablen header(テーブル見出し)の略で。身出しセルを作るものです。

それに対してTDはTable Data(テーブル素子)の略で<TD>~</TD>はさまれた部分がそれぞれ
表のセルの内容になります。

これらを組み合わせることでテーブルが出来上がります。
簡単な例を記述してみたいと思います。

HTML

<table border="1">
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th>
 		</tr>

 		<tr>	
 			<td>セキセイインコ</td><td>かわいい</td>
 		</tr>

 		<tr>
 			<td>オカメインコ</td><td>人懐っこい</td>
 		</tr>
 	</table>

テーブル全体に関係する属性はtableタグに追加していきます。
今回は最低限ということで枠をつけて太さを1pxにしました。

border="1"

と記述することで1pxの指定になります。

またTRタグで囲んだところが3つありますので。
今回の表は3行であることがわかります。

TRタグで囲んだ一番上は見出しなのでTHタグで囲みその中に内容を入れていきます。
今回は2つですので横に<TH>~</TH>が2つ並びます。
その下にさらに<TR>~</TR>を起き同じ様に今度は内容なので<TD>~</TD>を2つ並べます。
更に同様な作業を行います。

それぞれのTRタグ内の<TH>~</TH>または<TD>~</TD>は2つありますので列が2つだとわかります。

ブラウザ表示は以下。

THタグ内の文字が太字になっています。

以上を最低限の基礎として様々変更を加えていきたいと思います。

セルの中の余白を増やしたり文字を中央に寄せる

padding

セル内のテキストなどを見やすくするために余白を入れてみたいと思います。

こういう場合paddingを使うんでした。よくわかr無い方は以下をご覧ください。

CSS marginとpadding 余白の指定方法 基礎

とりあえず外部CSSで見出し部分の余白を大きく取ってみます。

table th{
	padding: 4px 15px
}

余白は値を2つ書くと上下、左右の余白の大きさを表すんでした。
先程の表と並べてみます。

見出しが上下左右とも余裕が出てきたことがわかります。
余白のおポキ差の分だけ表全体も広がりますが。
指定していないTDタグで囲ったセルは上下は先程と変化はありません。
TD タグにも同じ様に余白を指定します。(わざと大きく取ってみました)
CSS

table th{
	padding: 4px 15px
}
table td{
	padding: 10px 20px
}

先程の見出しだけ余白を設けたものと比較をしてみます。

余白の分だけ更に全体が広がっているのがわかります。

text-align

また余白を入れると文字が中央によるのがわかります。

しかし文字を真ん中に寄せる方法は他にもあります。

それは

text-alignプロパティ

を使うやり方です。

text-alignはブロックコンテナ内の行の揃え位置・均等割付を指定するプロパティで。

値はleft,center,right,end,justyなどがありますが。

中央に揃えるにはcenterを使います。

text-align:center

で指定します。

余白をつけるとテーブル全体が大きくなってしまいますので。
それを避けたいが、セル内のテキストはきれいに揃えたい、などという場合には便利です。

先程の記述から、余白指定の部分を削除し、テーブル全体の文字を真ん中に揃えてきます。

table {
	text-align: center;
}

すると以下のようになります。指定をしていなかった元のテーブルは以下。

セル内のテキストが中央に揃っているのがわかります。

テーブル内のテキストや背景色を変える

テキストの色を変える

先程から使っている記述を使っていきます。

文字の中央揃えの指定はそのままにしてあります。

それで。

例えばテーブルの中にある文字の色を赤に変える場合は
CSSに以下のように記述をします。

table {
	text-align: center;
	color: red
}

color: red

を付け加えただけです。

すると以下のようにブラウザ表示されます。

もし見出しだけを変えたい場合には
CSSを以下のように書き換えます。

table {
	text-align: center;

}
table th{
	color: red;
}

すると以下のようにブラウザ表示されます。

背景色を変える

background :

を使います。

先程の記述を以下のように変えます。THタグを指定して背景を赤にします。

table {
	text-align: center;

}
table th{
	background:  red;
}

すると以下のようにブラウザ表示されます。

見出し行の色を変えるのはこの様に簡単にできるんですが。
列に色がついているものを見かけることも多いです。
列に色をつけるには同じ列のTDタグにそれぞれ同じ目印を付けてCSSで色を指定するのが一番簡単です。

ここで2行2列だと今後の変更に差し障りが出てきますので3行3列にします。
HTMLを以下のように変えました。

<table border="1">
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td>セキセイインコ</td><td>かわいい</td><td>オースチラリア</td>
 		</tr>

 		<tr>
 			<td>オカメインコ</td><td>人懐っこい</td><td>オーストラリア</td>
 		</tr>
 		<tr>
 			<td>シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>
 		</tr>
 	</table>

ブラウザ表示

一番左の列の色を変えてみます。

列の背景を変えるには対応セルを一つ一つ目印を付けていかなくてはなりません。

見出しの下一番左側の列のセルの背景色を変える場合。
<td class=”color”>セキセイインコ</td>

クラス名を付けて目印とします。

同じ様に

<td class=”color”>オカメインコ</td>
<td class=”color”>シロハラインコ</td

とします。

HTML

<table border="1">
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td>かわいい</td><td>オーストラリア</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td><td>人懐っこい</td><td>オーストラリア</td>
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>

つぎにCSS でその目印に背景色を付けていきます。

さきほどのCSSに

.color{ background: skyblue; }と記述を加えます。
colorで指定したTDタグのセルの背景を水色にします。

table {
	text-align: center;

}
table th{
	background:  red;
}
 .color{
	background: skyblue;

}

ブラウザ表示

表の枠への装飾

線の色や太さを変える

まずテーブルの外枠の色や太さを変える場合。
いままでのHTMLの記述では大枠やセルの枠の線の太さをその中で指定していました。
ただそれだと一々HTMLの記述を変えなくてはいけません。
それで。
CSSで枠の指定をしていこうと思います。
HTMLの<table border=”1″>からborder=”1″を削除する.

そのままだと枠は全て消えてしまいます。

これはこれで表現の仕方としてはありですが。

これにテーブル全体の枠を表示させてみます。

まず先程のCSSのtable

枠の値を指定します。

border:solid 3px green;

実戦で太さは3px、緑色と指定しました。

	table {
	border:solid 3px green;
	text-align: center;

すると以下のようになります。

値を変えればサカざまな表示が行なえます。

例えば二重線、太さは10px 色をピンクと指定すると

border:double  10px pink;

以下のように表示されます。

セルの枠の色や太さを変えてみます。

テーブルの中のTHタグとTDタグで囲まれたセルに枠をつけるということで
THタグとTDタグ両方に
例えば実線で太さは4px、濃い青色と指定した場合

border:solid 4px darkblue;

全体のCSSは以下のようになり。

table {
	border:double  10px pink;
	text-align: center;
	

}
table th{
	background:  red;
	border:solid 4px darkblue;
}
 .color{
	background: skyblue;

}
table td {
	border:solid 4px darkblue;
}

ブラウザ表示は以下。

だんだん様になってきました^^;

ただ大枠は二重線としてあるからいいとして。
セルとセルの間に隙間があります。

これを一重線にしたい場合などにはtableにborder-collapseという線と線の間の隙間について指定するプロパティを使います。

隣り合うするセルのボーダーを重ねて表示する場合は(collapse)、間隔をあけて表示するか(separate)を指定します。

CSSのテーブルをしているところにborder-collapse: collapseと指定して見ると

table {
	border:double  10px pink;
	text-align: center;
	border-collapse: collapse

}

以下のようにブラウザ表示されます。

複数のセルを結合したりテーブルのサイズを決める

テーブルのサイズを決める

余白を増やしたり枠の線の感覚を空けたり空けなかったりでテーブル全体の大きさが変わってしまいます。
大きさを指定するにはテーブルタグに
widthプロパティで幅を指定します。
例えば先程の表でwidthの値を変えてみます。

width:500px

width:200

CSSは以下。

table {
	border:double  10px pink;
	text-align: center;
	border-collapse: collapse;
	width:200px;

}
table th{
	background:  red;
	border:solid 4px darkblue;
}
 .color{
	background: skyblue;

}
table td {
	border:solid 4px darkblue;
}
なおレスポンシブデザインの場合、
width:100%
と指定しておくとどんなディスプレイであっても自動調整してくれて表を適切に表示してくれます

複数のセルの結合

縦に結合

縦方向に並ぶ複数のセルをつなげたいときは、HTMLの中のつなげたいthもしくはtdタグにrowspan=”つなげるセル数”と書き込みます

<th rowspan=”つなげるセルの数”> ~ </th>

<td rowspan=”つなげるセルの数”> ~ </td>

という感じですね。

例えば先程のTHMLに以下のように記述をしてみます。

2行目の一番最後のTDタグの部分に

<td rowspan=”2″>オーストラリア</td>

と記述をします。

同時に3行目にあった<td >オーストラリア</td>を削除します。

<table >
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td>かわいい</td><td rowspan="2">オーストラリア</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td><td>人懐っこい</td><!--tdを消す-->
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>
 		</tr>
 </table>

すると以下のようにブラウザ表示されます。

「インコの特徴」のところも同じ様にやってみます。
「かわいい」と「人懐っこい」になっていますが。

これも「かわいい」に統一してみます。

先ほどと同じ要領で2列目の2行目を<td rowspan=”2″>かわいい</td>とし。下にある「人懐っこい」セルを削除します。

	<table >
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td rowspan="2">かわいい</td><td rowspan="2">オーストラリア</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td><!--td消す-->
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>
 		</tr>
 	</table>

すると以下のようにブラウザ表示されます。

横に結合

横に結合させるためには

colspan=”つなげるセルの数”

を使います。

rowspanと使い方は同じです。

今度は見出しの「インコの特徴」と「原産地」を結合させて「インコのと原産地」と変更します。
更にその下の「かわいい」と「オーストラリア」を結語させて「オーストラリア原産でかわいい」に変更してみます。

また4行目は後ろ2つのセルを結合して「アマゾン周辺出身は陽気だね」

</head>
 <body>    
 	<table >
 		
 		<tr>
 			<th>インコの種類</th><th colspan="2">インコの特徴と原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td rowspan="2" colspan="2">オーストラリア出身はかわいいね</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td>
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td colspan="2">アマゾン周辺出身は陽気だね</td>
 		</tr>
 	</table>

ブラウザ表示は以下。

以上で表作成の基本は終わりです。

Sponsored Link

Sponsored Link

関連記事

  1. CSS marginとpadding 余白の指定方法 基礎
  2. HTML・CSSを実際に記事を作りながら覚えていこう
  3. CSS最低の書き方の基本 CSSはどこにあるの?
  4. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  5. 知っておくと便利なセレクタまとめ
  6. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  7. HTMLの勉強で押さえておくべきこと①Markup Langua…
  8. テキストエディタATOM インストールから基本編集・操作を詳説(…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  2. HTMLで動画や画像を埋め込みする方法を詳説
  3. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  4. Windows10 でフォルダの拡張子を表示するには?
  5. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  6. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  7. WordPress新エディタ「Gutenberg」の使い方
  8. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtlのすべてのエフェクトについての解説⑨ミラー・画像ループ
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
AviUtlのすべてのエフェクトについての解説①色系エフェクト
AviUtlのすべてのエフェクトについての解説⑧ラスター・波紋・極座標変換・ディスプレイスメントマップ
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlのすべてのエフェクトについての解説②発光・閃光・拡散光・グロー・ライト・シャドー(光と影)
HTMLとCSS 初歩的な文字装飾 基本まとめ
AviUtlでMP3コーデックとして使えるLameLameACMを呼び出せるのインストール方法

ソフト・アプリの使い方

PAGE TOP