セルを連結してテーブルにキャプションをつけよう

ホームページにテーブルを作成していると複数のセルを連結したり、タイトルや キャプションをつけることが出てきます。たとえばセルの連結なら複数の列に わたる列の見出しを作らないといけない場合などになります。使わないようで案外 セルの連結は必要項目になってきます。

人それぞれですが、テーブル自体を全く使わない人もいますので、そのような人に は覚える必要のないタグとも言えますが、テーブルタグを使って表などをよくホーム ページに挿入する人には必須になります。

Our partners
税理士 東京 →税理士の事ならことサイトです。
電話占い →電話占いならこのサイトが一番です。
会計事務所 →会計事務所は信頼と実績のこの会社です。

セルを指定するtdタグか列の行の見出しを指定するthタグにはセルを隣の列や下の 行に広げることのできるタグが存在します。たとえば縦方向に広げたい場合はrowspan タグを使い、横に広げたい場合にはcolspan属性と呼ばれるものを使います。書き方 はtd rowspan=""とtdと一緒に記述するだけです。

英語を理解していないとわからないと感じるかもしれませんが、タグのほとんどは英語 とは直結していません。ただのアルファベットの羅列のようにしか英語上級者にも見えません ので英語ができる、できないで優劣がでることはないので心配いりません。

テーブルはセル同士をつないだり、色をつけたりと様々な機能を応用することができます。 イメージとしてはエクセルと似たような感覚になります。ただマスに対して自分で指定しない といけない、といった感じです。

このタグを覚えるようになるとテーブルもかなりみやすくなってきます。色をtdやtrごとに わけ、項目をわかりやすいく見えるようにできるからです。セルの連結を駆使してサイズ などを変えるとさらに見やすくなってきます。

大元のtr、tdタグの働きなどをよく理解しておくとテーブルというのは応用が簡単です。 ただ参考書などをそのまま使っていると基本的な構成がわからないので、応用 が全く効きません。しっかりと基礎を覚えましょう。

Our partners
パワーストーン →パワーストーンのことについてもっと知ろう。
電話占い →電話占いに特化した面白いサイトです。
名刺印刷 →名刺印刷はここに依頼しましょう。

""の中に数字でいくつ分のセルに広げるかを指定してあげます。td rowspan="9"と 記述すると9行広がることになります。次にタイトルの付け方ですが、captionタグ で指定します。キャプションをテーブルにつけるときはtableタグの下にcaption で囲んだ文字を記述します。こうすると実際のホームページ上ではテーブルの上の 部分にタイトルの説明文が表示されます。

実際にホームページにテーブルを作ってセルを指定しながら見ていくとわかりやすいです。 文字だけ読むと難解に感じやすいですが、実際作ってみるとそんなに難しくなく 色々変えながら自分で応用できるようになりますよ。

難しいな、と思ったら画像にしてもよいです。画像ソフトか何かで作成すると配置や 色など簡単にできます。それをjpg画像にしてアップロードしてあげればよいです。 ただ文字ではないので、seo的効果は期待できません。

ただある程度一括して指定できそうな部分はスタイルシートで指定しましょう。そう しないとソース部分が多くなり、文字部分が検索エンジンに伝わりにくくなる可能性 があります。個別に指定しないといけない場合は仕方ありません。

キャプションの文字はなにも指定しなければテーブル本文の文字と同じ大きさに 自動的に設定されます。この大きさを指定して大きくしたり小さくしたりしたい 時には指定できるようになっています。ただこのcaptionタグを使わなくても テーブルタグの上の部分に直接文字を書き込んでも大丈夫です。

Our partners
プレス加工 →プレス加工なら安心のこの会社まで。
チラシ印刷 →チラシ印刷なら安心のこの会社がベストです。
パワーストーン →パワーストーンの秘密がわかります。

メニュー

お気に入りサイト達

内容の正確性に関しては責任を負いかねます。個人の責任にて当サイトをご利用ください。