ホームページ作成ソフトメニュー

サイト作成ソフトシリウスでテーブル枠を自由に作成する

テーブル作成ツール

サイト作成ソフトシリウステーブル作成ツール

 

シリウスではテーブル作成ツールで自由に「列」「行」などの数を変更させて表示させることができます。またサイト作成画面に落とし込んだ後でも、その状態でツールに戻る事ができます。

 

しかしテーブルの仕組みを理解して、サイト作成画面上で自由に列や行の変更ができるようにしておく必要があります。このテクニックを理解しておくと、万が一表示崩れの際にも作成画面上で対応することができますし、下記表示のようにセルを結合する事も可能になります。

 

「列方向、行方向」にセルを結合させたテーブル枠

[テーブル枠]

セル

セル

セル

セル

3セル分

縦に結合した

セル

セル

3セル分 横に結合したセル

2セル分

縦に結合した

セル

セル

セル

セル

セル

2セル分 横に結合したセル

※ 上記テーブルのHTMLソースこちら [ページ一番下に飛びます]

 

9-テーブル作成ツールの使い方について [この動画は16分で見れます]

 

 

 
チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

チャンネル登録 Please click

ユーチューブチャンネル登録

 

テーブル枠で作成する表はSEO対策に有効

グーグルのホームページの価値を判断するクローラーは整然としたまとまりのある、解りやすい文章や表現を評価します。これはホームページの閲覧者さんがデザイン的にも読みやすい記事であればグーグルもその価値を認めるということです。

 

テーブル枠やリストでの表現は、単純にダラダラとした長い文章を端的にまとめることがでるので、ホームページ作成者が絶対に必要とする表現です。会社概要や沿革、商品の料金表などあらゆる場面で必要になります。特にテーブル枠の原理は理解しておきましょう。

 

次の同じ文章を比べてみる

 

表現-1

私が好きな果物は青森県産のりんご、愛媛県産のみかん、エクアドル産のバナナ、沖縄県産のパイナップル、山梨県産のぶどうです。

 

表現-2

私が好きな果物

りんご みかん バナナ パイナップル ぶどう

青森県産

愛媛県産

エクアドル産

沖縄県産

山梨県産

 

上記では明らかにテーブル枠を使って記述された表現の方が閲覧者にとって解りやすいです。リスト表示でも同じことがいえます。これはクローラーがソースを読みやすいということもあり、SEO対策としても有効になります。

 

普段記事を執筆する場合、常にテーブル枠やリストを使った方が解りやすいかどうか判断していくようにしましょう。私見ですが通常の文章の場合でも閲覧者さんが読みやすくまとまりのある文章はグーグルに評価されていると思います。

 

テキスト自体が読みやすい文章である事ことはもちろん、段落句読点など、ユーザビリティを考えながら文章を作成するのはおそらくSEO上有効ではないかと考えています。

 

セルを簡単に結合できるオンラインソフト

下記のソースのようにテーブル枠のセルを縦方向、横方向に複雑に結合させることは非常に手間のかかる作業となります。オンラインで動作する無料ツールタグクリエイターでは縦横の結合を完成形のテーブル枠の表示により、視覚的に確認しながら作業できるので大変便利になっています。

 

テーブル枠のセルを簡単に結合できるオンラインソフト
 

 

※ このページ一番上のテーブルHTMLソース

<table>
<tbody>
<tr>
<th><p style="text-align:center;">[テーブル枠]</p></th>
<td><p style="text-align:center;"><b>セル</b></p></td>
<th><p style="text-align:center;"><b>セル</b></p></th>
<th><p style="text-align:center;"><b>セル</b></p></th>
<th><p style="text-align:center;"><b>セル</b></p></th>
</tr>
<tr>
<th rowspan="3">
<p style="text-align:center;"><b>3セル分</b></p>
<p style="text-align:center;"><b>縦に結合した</b></p>
<p style="text-align:center;"><b>セル</b></p>
</td>
<td><p style="text-align:center;"><b>セル</b></p></td>
<td colspan="3"><p style="text-align:center;"><b>3セル分 横に結合したセル</b></p></td>
</tr>
<tr>
<th rowspan="2">
<p style="text-align:center;"><b>2セル分</b></p>
<p style="text-align:center;"><b>縦に結合した</b></p>
<p style="text-align:center;"><b>セル</b></p>
</th>
<td><p style="text-align:center;"><b>セル</b></p></td>
<td><p style="text-align:center;"><b>セル</b></p></td>
<td><p style="text-align:center;"><b>セル</b></p></td>
</tr>
<tr>
<td><p style="text-align:center;"><b>セル</b></p></td>
<th colspan="2"><p style="text-align:center;"><b>2セル分 横に結合したセル</b></p></th>
</tr>
</tbody>
</table>

  • 水平方向に結合 colspan属性
  • 垂直方向に結合 rowspan属性

セル

  • colspan="2"
    結合するセル2 [水平方向に2っを結合]

  • rowspan="2"
    結合するセル2 [垂直方向に2っを結合]