コピペで使える!スマホで見ても崩れない!【HTML&CSS】で作る(表・table・テーブル)デザイン

表なのか?tableなのか?テーブルなのか?

まぁーーーーいろいろな呼び方がありますよね。
どれが正解なのかで言うと・・・・どれも正解。
Googleの検索結果的には

  • table html 446万件
  • 表 html 370万件
  • テーブル html 20万件
  • という結果ですので、tableという表記が大正解のようですね。
    しかし、現場でのコミュニケーションでは テーブル というカタカナでの利用が多いですかね。これはうちだけなのかもしれませんが・・・・。

    まぁ・・・・そんなお酒のつまみにもならない話はおいといて、、、、。

    今回は、知っとけば便利!!
    でも覚える事はなかなか難しいかな・・・・。

    という table のソースをいつでも手軽に使えるようにまとめてみました。

    コピペで使用可能です!
    ブラウザや環境によっては見え方が変わる可能性があるので調整してください。

    ちなみに、、、、
    そのような場合のうちでのサポートはサポート対象外ですので、その点をご理解して頂いた上でご利用をお願いします。

    そのような場合はホームぺージレスキューサービスをご利用ください!
    ホームぺージレスキューサービス

    HTMLだけで組めるバージョン

    1行目を見出しにする

    見出し
    123

    コード例

    ポイント

    thead表の行(水平方向)をグループ化するタグ(見出し用)
    tbody表の行(水平方向)をグループ化するタグ(コンテンツ用)
    colspan水平方向のセルの結合
    ここでは3つのセルを統合しているので、3をいれる

     

    セルの横幅を調整

    コード例

    width属性で指定する場合

    style属性で指定する場合

    ポイント

    style属性・width属性の異なる属性で横幅を設定しても見た目は同じです。
    横幅を指定するだけならwidth属性。
    他のstyle属性を入れ込むならstyle属性で指定する事でコードがすっきりします。

    width横幅の調整

     

    セル内の文字寄せを指定

    左寄せ

    123
    456

    右寄せ

    123
    456

    中央寄せ

    123
    456

    コード例

    左寄せ

    右寄せ

    中央寄せ

    ポイント

    text-align文字や画像を水平方向にそろえる。
    一部のセルだけ指定したい場合は、tdタグに指定します
    例)<td style=”text-align:center;”></td>
    text-align:left左寄せ
    text-align:right右寄せ
    text-align:center中央寄せ

    セルを横に統合

    123
    45
    678

    コード例

    ポイント

    colspan水平方向のセルの結合
    ここでは2つのセルを統合しているので、2をいれる

    横スクロール

    AプランBプランCプラン
    価格33,800円55,000円88,000円
    特徴マーケティング相談&サイト改善提案SEO対策課題抽出&SEO対策外部対策対応SEO対策内部対策対応

    コード例

    ポイント

    overflow: auto子要素がはみ出した場合にスクロールさせる
    white-space: nowrapテキストを自動的に改行させない

    縦に積むテーブルレスポンシブ

    見出し123
    見出し456
    見出し789

    コード例

    HTML

    CSS

    ポイント

    ソース上は上から順番に要素が並んでいるので、それらをblock要素に指定して横幅100%等にすれば、縦積みのレイアウトにすることができます。

    display: block要素の表示形式をblockにする
    block⇒要素が横いっぱに広がり、縦に並ぶ

    横並びを縦並びにするテーブルレスポンシブ

    見出し1見出し2見出し3見出し4
    1234
    5678

    コード例

    HTML

    CSS

    ポイント

    thead(見出し)とtbody(コンテンツ)をそれぞれ設定し、block要素にします。
    block要素にしたものをfloatで横並びにすることで、縦並びの表になります。
    高さ指定が必要なので、テキストの量に応じて設定しましょう。

    float: left横並びにする

    まとめ

    途中で気が付いたと思われますが、ここでは紹介し切れないぐらいテーブルの組み合わせや種類があります。ここでは、あくまで基本的なソースの組み方のご紹介となりますので、ここの内容を参考に編集を挑戦してください。

    挑戦して、、、あれ??自分では無理かな??

    と思われた場合は下記のサービスのご利用をご検討頂ければと思います。
    エクセレントではホームページの更新代行サービスも承っております。

    ホームぺージ更新代行サービス

    メールでのお問い合わせ

    お問い合わせはこちら
    メールフォームの内容をご確認頂きまして送信してください。

    LINEでのお問い合わせ

    お友達登録はこちら
    お友達登録をして頂いて
    お問合せ内容をトーク画面から送信してください。

    Web集客サポートと商品ページ制作代行ならエクセレント

    筒井 章年

    1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でホームぺージ戦略の立案やマーケティングを担当しています。多くの方に共有させて頂いて、多くの方に成功を実感して頂きたいと考えております。

    関連記事

    最近の記事 おすすめ記事
    1. LINEアカウント開設から配信まで【初心者用】わかりやすく駆け足で説明します。

    2. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

    3. 検索結果に表示されると自然にクリックしてしまうぺージタイトルに使われている魔法のキーワード24選

    4. マーケティング会社が実践している!?売れるホームぺージの【秘伝】のセルフチェックリスト公開しました

    5. WordPressで外部リンクの前や後ろにアイコンをつけるプラグイン WP External Linksの設定方法

    6. hostsファイルとは?ホスツファイルの編集の仕方とは?(Windows版)

    7. WordPressで改行が上手くできない!反映されない!訳が分からない!そんな時の解決策を教えます。

    8. YouTubeチャンネルの開設方法から動画アップロード方法を解説します。

    9. WordPressのテーマの更新方法教えます。TCDさんのテーマを更新する際の注意点について編

    10. WordPressのテーマ更新方法と注意点を簡単に説明してみます。

    1. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

    2. 検索結果に表示されると自然にクリックしてしまうぺージタイトルに使われている魔法のキーワード24選

    3. マーケティング会社が実践している!?売れるホームぺージの【秘伝】のセルフチェックリスト公開しました

    4. 売れる商品ページはヘッドラインが8割  売れるヘッドラインの4つのテンプレートパターンと例文を書き出しました。

    5. WordPressの管理画面のユーザー名・パスワードを忘れた時の対処方法

    6. 楽天市場の商品ページを制作する時に使える3つの鉄板テンプレート

    7. ホームページの更新は代行業者に依頼すべき。ホームページ更新代行業者を利用するメリットとは?

    8. ホームぺージを更新するという事はSEO対策となりWeb集客の礎となる理由を教えます

    9. 楽天市場とYahoo!ショッピングで初心者が使うべきモール内広告

    10. ECサイト制作にかかる期間や手順と注意点について簡単にまとめてみました。

    資料を無料ダウンロード

    弊社の会社概要と、ご提供サービスのご紹介資料です。
    ご覧いただき、お気軽にお問い合わせください。

    TOP