コピペで使える!スマホで見ても崩れない!【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集客サポートと商品ページ制作代行ならエクセレント

    筒井 章年

    Web制作歴25年。1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でWeb集客の立案やコンサルティングを担当しています。集客問題を解決できるノウハウをわかりやすくご紹介いたします!

    関連記事

    無料相談行っています!!お気軽にご利用ください。
    最近の記事 おすすめ記事
    1. Instagram(インスタグラム)の位置情報に自分のお店を載せる方法

    2. Instagramでバズる方法とは? ハッシュタグは重要ではありません。アルゴリズムを解析した真実。【運用者必見です】

    3. Instagram(インスタグラム)のアルゴリズムについての記事をまとめました

    4. バズる投稿をするにはInstagram(インスタグラム)のアルゴリズムを攻略する必要があります。【運用者必見】

    5. Instagram(インスタグラム)の魅力的なプロフィールの書き方を解説します

    6. Instagram(インスタグラム)まとめ記事 ハッシュタグについてまとめました

    7. Instagram(インスタグラム)まとめ記事 プロフィールについて

    8. Instagram(インスタグラム)とは?いまさら聞けないInstagramの基礎知識

    9. Instagram(インスタグラム)まとめ記事 フォロワーを増やす方法について

    10. Instagramで攻略すべきは「発見タブ」。その発見タブについて解説します。

    1. Instagram(インスタグラム)のリール動画の音源を保存して活用する方法

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

    3. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

    4. 初心者が知っておくべき基本的なSEO対策とは?上位表示に必要なやり方・方法について解説します。

    5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

    6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

    7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

    8. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

    9. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

    10. これを見れば完璧!Google Maps API 取得方法をご紹介します。

    資料を無料ダウンロード

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

    TOP