キレイな表組み(テーブル)を簡単に作る方法:htmlをいじる必要なし!

目安時間:約 4分

グラフと矢印

記事で何項目にも渡るデータを紹介するとき、「表組み」を使うと非常に見やすくなります。

この表組みはHTML用語では「テーブル」と呼び、このテーブルを構成するタグを「テーブルタグ」と呼びます。

ただ、実際この表組みを使おうとすると

<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>

こんな風に長ったらしくて面倒くさいテーブルタグを自分で記述しなければなりません。

※これは短い方でデータが多くなるほどHTMLタグは長くなります。

これがイヤで敬遠する人も多いですが、そんなテーブルを半自動的に作成してれるウェブ上のサービスがありますので、その使い方と共にご紹介します。

htmlをいじらなくても作れる!半自動「テーブル作成ツール」の使い方

それがこちらのTAG indexというサイトの「テーブル作成ツール」です。
 
web便利ツール/テーブル作成ツール-TAG index
 
■テーブル作成ツールでのテーブルの作り方
テーブル作成ツールの作成画面
1. 列数と行数を入力します。列数は「横」に何個分の列を作るか?、行数は「縦」に何個分の行を作るか?を指定するものです。

2. 見出しセルをどこに付けるか指定します。見出しセルとはその表組みに入れるデータが何を表しているかを説明する欄のことです。

・不要な場合- 「無指定」
・見出しセルを上に付ける場合- 「上1行目」
・見出しセルを左側に付ける場合- 「左1列目」

という風にどこに見出しを付けるかを指定します。そして、その見出しセルに付ける背景色を入力します(「色見本」をクリックすると具体的な色のコードが参照できます)

3. 表組みの基本指定が済んだら「更新する」をクリックします。ここまで指定した表組みの構成が表示されます。

4. 続いてテーブルのセル内にデータを入力していきます。
見出しとデータの入力欄
thは「見出し」を入力する欄
tdが「データ」を入力する欄

に対応しています。

コード選択画面

このようにすべて入力したら「コード選択」をクリックし、枠内のテーブルタグをコピーしたら、ブログの記事内に貼り付ければ完成です。

こちらがその完成した表組み(テーブル)です。

野菜 トマト キャベツ たまねぎ
果物 りんご みかん いちじく

 
とても見やすくて整ったテーブルが完成しました!

超個人的なおすすめデザイン設定

このテーブル作成ツールでは細かく設定すれば、他とはちょっと違うデザインの表組みも作れます。

私が個人的に良いなと思うデザイン設定がこちらです。

おすすめ設定表

出来上がりの表組みがこちら。

和食 中華 洋食
寿司 ラーメン ハンバーグ
すき焼き 餃子 スパゲティ
日本そば 青椒肉絲 ビーフシチュー

 

セル内の文字の位置や外枠の太さなどをいじっています。すっきりとしていていい感じではないでしょうか?

この記事が気に入ったら
いいね ! しよう

【今だけ】アドセンスブログ(実物)を公開中

今ならメルマガに登録していただくと
そのメルマガ内にて

私が作ったアドセンスブログの実物(URL付き)

を限定公開しています。

また、特別に私も愛用中の
非常にクリック率が高い

FC2ブログとSeesaaブログ用の
アドセンス用テンプレート

もプレゼントいたします。

メルマガでは
アドセンスで単価が高いジャンルの探し方など
このブログでは書きにくいことも
包み隠さず暴露していますので
ぜひぜひ読んでみてください。

メルマガの登録や購読は
もちろんすべて「無料」です!

登録は下の登録フォームに

姓(名字)
名(名前)
メールアドレス

をご入力ください。

※姓・名ともハンドルネームなど
本名以外での登録でもかまいません。

↓↓↓↓↓↓↓↓↓↓↓↓

 メルマガへのお申し込みはこちらから









広告

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
広告
このブログを書いている人

・2010年10月よりアドセンスを開始

・2015年6月に1ブログで30万円超えを達成

くわしいプロフィールはこちら

最近の投稿
【必読】アドセンス初心者が知っておくべき知識10選
記事の検索はこちら
カテゴリー
タグ
お問い合わせはこちらから

聞いてみたいことがあれば、お気軽にメールをください!

ブログに投票をお願いします