ブログライターが使える!HTMLで 「表」をつくる5つの方法


ブログを作成する際に、「値段表」や「スケジュール」などのデータを記載する際、表形式にしたいな~ と思うことはありませんか?

でも、

どうやったら表が作れるか わからない!

という方の為に、本日はブログで使える表の作り方を4つご紹介いたします。

これを見れば↓こんな↓のが作れるようになれちゃいます!

本題にはいる前に・・・

ざっくり説明!どうやってブログ記事は表示されてるの?

インターネットで表示されるサイト・記事・画像など全ての情報には、HTML(Hyper Text Markup Language)が使用されています。

試しに、お好きなウェブページを閲覧中、右クリックをし、「ページのソースを表示」としてみてください。

↓こんな感じの<~>みたいなものがいっぱい書かれた長い文章がでてきたかと思います。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLで表をつくる サンプルタグ table</title>
<style type="text/css">
#htmlsample table{margin:30px 0;}
</style>
</head>

<body>


<div id="htmlsample">
<p><a href="http://elmt.jp/?p=6779">ブログライターが使える!HTMLで 「表」をつくる3つの方法</a>の表示テストHTMLです。</p>


<!--テーブルタグサンプル 01 シンプル-->
<table width="100%" cellpadding="5" cellspacing="0" border="1">
<tr>
<td width="50%">1行目 列1</td>
<td width="50%">1行目 列2</td>
</tr>

<tr>
<td width="50%">2行目 列1</td>
<td width="50%">2行目 列2</td>
</tr>
</table>


<!--テーブルタグサンプル 02 背景色-->
<table width="100%" cellpadding="5" cellspacing="0" border="1">
<tr>
<td width="50%" bgcolor="#123456"><font color="#FFFFFF">1行目 列1</font></td>
<td width="50%">1行目 列2</td>
</tr>

<tr>
<td width="50%">2行目 列1</td>
<td width="50%">2行目 列2</td>
</tr>
</table>


<!--テーブルタグサンプル 03 列の結合-->
<table width="100%" cellpadding="5" cellspacing="0" border="1">
<tr>
<td colspan="2">1行目 列1と2が合体</td>
</tr>

<tr>
<td width="50%">2行目 列1</td>
<td width="50%">2行目 列2</td>
</tr>
</table>


<!--テーブルタグサンプル 04 行の結合-->
<table width="100%" cellpadding="5" cellspacing="0" border="1">
<tr>
<td width="50%" rowspan="2">1行目 列1と2行目 列1が合体</td>
<td width="50%">1行目 列2</td>
</tr>

<tr>
<td width="50%">2行目 列2</td>
</tr>
</table>


</div>
</body>
</html>

表示されているページは実は、こんな風にHTMLで記述されているんです。

また、ブログもHTMLで表示されていますが、投稿部分はこの文章の一部に表示されるようにつくられています。

なので、本題の「表」もHTMLを使って作成します!

HTMLで表を作る方法01 <table>タグを使用する難易度★★☆

使うのは<table>~</table>、<tr>~</tr>、<td>~</td>の3つだけ!

まずは身近なもので、エクセルを想像していただくとわかりやすいかと思います。

html table イメージ エクセル

横一列が<tr>~</tr>。
その中の一つ一つのセルが<td>~</td>。
これら全体を覆うのが<table>~</table>といった感じです。

一緒に<table>を作ってみよう

コツは表示させる文章以外は半角英字で書くことです!
全角になっていると表示されないので注意です。

  1. パソコンのメモ帳ソフトをたちあげます。なんでもいいです
  2. <table>と書きます。これがここから表がはじまるよ!という合図になります
  3. <tr>と書きます。ここから1行目がはじまるよ ということ
  4. <td>と書きます。ここから1行の中の1個目の枠がはじまります
  5. 表の中に入れたい言葉を書きます。特に今思いつかない人は「重さ」とでも入力しましょう
  6. 1個目の枠の文字入力が終わったら</td>と書きます。ここで1個目の枠が終わるよという合図です
  7. この調子で、必要な数だけ<td></td>を量産します
  8. 一行目に書くことが終わったら</tr>と書きます。ここで一行目が終わります
  9. 必要な行分3~8を繰り返します。この際、<td>~</td>の数は各行全部同じ数にしてください。
  10. 最後に</table>と書くと表が完成です!

このメモ帳を保存したあと、「.txt」と表示されている部分を「.html」に変更して開くと、ウェブでどう表示されるかが確認できます。

↓こんな感じに表示されればOKです!

重さ 値段

表示されましたでしょうか?

でもこれだと線も何もなく「表」感がありません。

もうちょっとグレードアップさせます。

<table>の見た目をグレードアップさせる記述集

<table>に使用する記述
width 数字または%で横幅を指定します。
height 数字または%で高さを指定します。
align テーブルの表示位置を指定します。

  • center…中心
  • right…右よせ
  • left…左寄せ

があります。

border テーブルの枠線を指定します。「0」にすると線は表示されません。
bgcolor 背景色を指定します。#FFFFFFなど#の後に6桁の英数字で記述します。
指定する際にはWEBの色辞典などを参考にしてください。
cellpadding 枠と内容の隙間を指定します。
cellspacing 枠と枠の間の隙間を指定します。
<td>に使用する記述
width 数字または%で横幅を指定します。
一番上の行で指定した幅が下の行の同じセルにも適用されます。
%の場合は一行のtdを合わせて100%になる様にしてください。
数字の場合は、画面からはみ出さない程度にしてください。
height 数字または%で高さを指定します。
align セル内の文字・画像の横の表示位置を指定します。

  • center…中心
  • right…右よせ
  • left…左寄せ

があります。

valign セル内の文字・画像の縦の表示位置を指定します。

  • top…上揃え
  • middle…中央揃え
  • bottom…下揃え

があります。

bgcolor セル内の背景色を指定します。#FFFFFFなど#の後に6桁の英数字で記述します。
指定する際にはWEBの色辞典などを参考にしてください。
colspan 指定した数のセルを横に結合します
rowspan 指定した数のセルを縦に結合します

サンプル

上をいろいろ使ってテーブルを装飾してみます。

<table width="300" cellpadding="5" cellspacing="0" border="1">
<tr><td width="40%">サイズ</td><td width="60%">値段</td></tr>
<tr><td>300</td><td>1,500円</td></tr>
<tr><td>400</td><td>2,000円</td></tr>
<tr><td colspan="2" bgcolor="#666666">欠品中</td></tr>
<tr><td>600</td><td>3,000円</td></tr>
<tr><td>700</td><td rowspan="2">4,000円</td></tr>
<tr><td>800</td></tr>
</table>

実際はこんな感じで表示されます。

サイズ 値段
300 1,500円
400 2,000円
欠品中
600 3,000円
700 4,000円
800

是非、いろいろ試してみてください!

もっと詳しく知りたい!という方は
↓こちらのサイト↓でいろいろな<table>が紹介されています。

HTMLで表を作る方法02 スタイルシートで作成する難易度★★★

<table>よりもっと自由につくりたいの! という方はこちらになります。

まずは例にならってエクセルでいうと・・・

css スタイル 表 エクセル

こんなイメージ。

<div>~<div>でつくった縦に並んだ箱を、cssというものを使って横並びにすることで表を作ります。

今回は先に分かりやすいかと思われる参考サイトを貼っちゃいます。

最初にスタイルというものを指定しちゃいます。
スタイルについての説明は申し訳ないですが今回はぶきます。

パソコンのメモ帳に、とりあえず下記をコピー&貼り付けてみてください。

その代り、変更したらいい箇所に「/*~*/」でコメントをいれてありますのでご参照ください。

<style type="text/css"><!--
/*最初に箱の設定*/
div{
	width:150px;	/* 箱の横幅 auto(内容に応じて自動)・% 設定でもOK*/
	height:auto;	/* 箱の高さ px単位・% 設定でもOK */
	float:left;		/* 箱を左から順番にならべてね!の指定 */
	margin:0 0 0;	/* 箱と箱の間のスペース設定 左から 上 左右 下 の幅を設定しています */
	padding:5px 10px; 	/* 箱の中の文字と箱の幅のスペース設定 左から 上下 左右 */
}

/* 1行目の設定 */
div.box01{ 
	border:solid 1px #000000;	/*枠線 左から 線のスタイル 幅 色になっています */
	border-collapse:collapse;	/*箱が重なる部分の線を重ねて1本にみせる指定 */
	font-weight:bold;	/* 太文字にしてみます */
	font-size:15px;	/*文字の大きさ設定 */
	background-color:#8BC6E3;	/* 一行目なので見出しらしく背景色をつけてみます */
	text-align:center;	/* 表示位置(横)の設定 一行目なので...  */
}

/* 2行目以降の設定 */
div.box02{ 
	font-size:12px;	/* 文字の大きさ設定 見出しより小さくしました */
}
--></style>

これで準備はととのいました。

次に実際に表示される部分を設定してみます。

ひとまず見出し1行とその他3行で計4行ある表を作ってみます。

<!--1行目-->
<div class="box01">色名</div>
<div class="box01">コード</div>
<div class="box01">色サンプル</div>

<!--2行目-->
<br clear="left"><!--横並び 一旦解除 -->
<div class="box02">桜色</div>
<div class="box02">#fef4f4</div>
<div class="box02"><font color="#fef4f4">■■■■</font></div>

<!--3行目-->
<br clear="left"><!--横並び 一旦解除 -->
<div class="box02">若緑</div>
<div class="box02">#98d98e</div>
<div class="box02"><font color="#98d98e">■■■■</font></div>

<!--4行目-->
<br clear="left"><!--横並び 一旦解除 -->
<div class="box02">空色</div>
<div class="box02">#a0d8ef</div>
<div class="box02"><font color="#a0d8ef">■■■■</font></div>

こんな感じで作っていきます。

<table>と違い 1つの箱ごとに枠線を設定したり、色を変えたりがしやすくなっています。

今回は簡単に作成しましたがスタイルを使用すると、よりたくさんの表現が可能になります。

HTMLで表を作る方法03 画像にしちゃおう難易度★☆☆

HTMLをつかって無理に記述しなくとも、HTMLでは当然 画像も表示できちゃいますので、
画像にするのも一つの手です。

ペイントやphotoshopなど画像編集ソフトを使って表を作成し、画像として保存して使用しましょう。

この方法は便利ですが、頑張って<table>などで作成したほうが良い場合もあります。

  • 表内の各項目毎にリンクを設置したい場合できなくもないですがかえって手間になります
  • ユーザーに表内の文章をコピーして使ってもらいたい場合文章データではないのでコピーできません

などが考えられます。

その場合は、あきらめてHTMLでつくりましょう。

HTMLで表を作る方法04 ビジュアルエディタを利用する(Wordpressの場合)難易度★☆☆

WordPressの場合、ビジュアルエディタの機能を拡張するプラグイン「TinyMCE Advanced」をインストールすることで、HTMLタグを使用せずに、表を作成することができます。

プラグインを追加することで、ブログの設定や環境によってはサイト全体が表示されなくなるなど影響がある場合がございます。追加される際は、事前にバックアップを保存後 プラグインを追加ください。サイト制作者・管理者がいる場合は、事前にご相談いただくことをオススメいたします。

設定方法

  1. WordPressにログイン
  2. サイドメニュー「プラグイン」から「新規追加」を選択
  3. プラグインの検索に「TinyMCE Advanced」と入力
  4. 検索結果に表示された「TinyMCE Advanced」の「いますぐインストール」をクリック
  5. インストール完了画面下にあります「プラグインを有効化」をクリック

これで投稿画面に移動すると表を挿入できる機能が追加されています。

投稿画面

Wordpress ビジュアルエディタ 拡張 プラグイン TinyMCE Advanced

表を挿入後、表の四隅の□や、挿入時と同じボタンをクリックすることで、枠線などを追加できます。

この機能を使うと、Microsoft Wordのような感覚でブログ記事に表を作成できます。
これは、Wordpress内で自動的に上記までで紹介したようなHTMLに書き換えてくれているものになります。

HTMLで表を作る方法05 人に頼んじゃう難易度☆☆☆

弊社では、WEBサイト制作の他、運営のサポートなど管理も行っております。その中で、ブログの記事がうまく書けない!表現できない!というお悩みもサポートしております。

また、ブログライター向けのセミナー・スクールも実施しております。 » 2016年3月まで実施されているセミナー情報はコチラ

お困りの際は、まずはお気軽にお問い合わせください。

お問い合わせ

お問い合わせ種別 (必須)
新規ホームページのご相談既存ホームページリニューアルのご相談ショップ売上アップのご相談SEO対策のご相談セミナー・各種講演のご依頼その他ご相談
お名前 (必須)
メールアドレス (必須)
お問い合わせ内容


コメントは受け付けていません。