PC & スマホアプリの使い方なら

できるネットインプレスグループ創設25周年

  • Twitter をフォロー
  • Facebook ページをいいね
  • Google+ ページをフォロー
  • RSS フィードで購読
  • このサイトについて
サイト内検索

急上昇ワードiOS 10 メルカリ 神保町ペロリ旅

  • PC & スマホアプリの使い方なら | できるネット
  • サイト制作・運営
  • CSS
  • table-layoutプロパティの意味と使い方
  • CSS
  • サイト制作・運営

table-layoutプロパティの意味と使い方

22:00 2015年11月12日 公開

  • CSS3
table-layoutプロパティの意味と使い方

table-layoutプロパティは、表組みのレイアウト方法を指定します。CSS3におけるtable-layoutプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。

  • tweet
  • このエントリーをはてなブックマークに追加
  • pocket

表組みのレイアウト方法を指定する

table-layout

{ table-layout 【 テーブル・レイアウト 】 : レイアウト方法; }

table-layoutプロパティは、表組みのレイアウト方法を指定します。このプロパティを指定することで、表組みの列幅を決定する方法が変化します。

初期値 auto
継承 なし
適用される要素 テーブルまたはインラインテーブル要素
モジュール CSS3 Tables Module

値の指定方法

レイアウト方法

auto 列幅は表組みの幅とセルの内容に合わせて自動的に調整されます。
fixed 列幅はwidthプロパティで指定した値で固定されて表示されます。指定がない列の列幅は、表組みの残りの幅に合わせて均等に分割されます。

サンプルコード

CSS
table.sample{
  table-layout: fixed;
  width: 100%;
}
.wide{width: 20%; }
HTML
<table class="sample"> HTML
 <tr>
  <th class="wide">月曜日</th><th>水曜日</th><th>金曜日</th>
 </tr>

次の記事border-collapseプロパティの意味と使い方

前の記事clipプロパティの意味と使い方

  • CSS3
  • サイト制作・運営
  • CSS
  • Twitterでシェア
  • Facebookでシェア
  • Lineで送る

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

できるネットから最新の記事をお届けします。

著者プロフィール

小川裕子(おがわ ゆうこ)

Webサイト制作を行うデジパ株式会社所属のマークアップエンジニア。HTML、CSSによるコーディング業務から、CMSの導入・カスタマイズまで、制作業務全般に携わる。「ディレクターからの指示がなくても、かゆいところに手が届くように」がモットー。

加藤善規(かとう よしき)

フリーランスによるWebサイト制作業務などを経て、2004年よりWebサイト制作を行うデジパ株式会社に所属。同社取締役 クリエイティブ事業部マネージャー。2014年に、Webサイトの構築・運営を支援するバーンワークス株式会社を設立、同社代表取締役に就任。個人活動としてセミナーでの講演、執筆も行う。

書籍で読みたい方はこちら

HTML5とCSS3/2.1のタグとプロパティの使い方はこの1冊でOK!

できるポケット HTML5&CSS3/2.1全事典

小川裕子・加藤善規&できるシリーズ編集部

定価:本体1,680円+税

インプレスの商品ページを見る

Amazonで購入

楽天ブックスで購入

オススメの記事一覧
同じカテゴリーの記事一覧
  • 複数ページのタイトルとURLを一発取得! Chromeの必須アドオン「GetTabInfo」
  • ime-modeプロパティの意味と使い方
  • image-orientationプロパティの意味と使い方
  • object-positionプロパティの意味と使い方
  • object-fitプロパティの意味と使い方
カテゴリーで使い方を探す
カテゴリーで使い方を探す
  • トップページ
  • Apple/Mac/iOS
    • iPhone最近アップデートされたカテゴリー
    • Apple Music
    • Apple Watch
    • iPad
    • iPod touch
    • Apple TV
    • iMovie
    • iPhoto
    • Mac
    • iTunes
    • その他(Apple)
  • Windows/Office
    • Windows 10最近アップデートされたカテゴリー
    • Word
    • Excel最近アップデートされたカテゴリー
    • Excel関数最近アップデートされたカテゴリー
    • PowerPoint
    • Access最近アップデートされたカテゴリー
    • OneNote
    • OneDrive
    • Office
    • Windows 8.1/8
    • Windows 7
    • XPサポート終了
    • その他(Windows/Office)
  • サービス/ソフト
    • Minecraft(マインクラフト)最近新しい記事が追加されたカテゴリー
    • プログラミング
    • YouTube
    • Facebook
    • Instagram(インスタグラム)
    • Pokémon GO(ポケモンGO)
    • Amazon
    • LINE
    • giftel(ギフテル)
    • Spotify(スポティファイ)
    • Webサイト/Webサービス
    • 動画配信サービス
    • Dropbox
    • Evernote
    • ショートカットキー
    • note(note.mu)
    • PDF
    • GANREF
    • クラウド
    • Firefox
    • iKnow!
    • Rosetta Stone
    • RSSリーダー
    • Twitter
    • Ustream
    • 検索
    • サイボウズLive
    • セカンドライフ
    • 年賀状
    • はてなブックマーク
    • ブログパーツ
    • 今週の小ワザ
    • その他(サービス/ソフト)
  • Google
    • Android最近アップデートされたカテゴリー
    • Google Playミュージック
    • Googleフォト
    • Googleカレンダー
    • Chrome
    • Inbox by Gmail
    • Ingress(イングレス)
    • Gmail
    • Googleマップ
    • Googleドライブ
    • Google検索
    • その他(Google)
  • サイト制作・運営
    • Webマーケティング最近新しい記事が追加されたカテゴリー
    • ヒートマップツール
    • HTML
    • CSS
    • WordPress(ワードプレス)
    • Googleアナリティクス
    • Googleタグマネージャ
    • Google AdSense
  • デバイス
    • HOME ALSOK
    • ホームセキュリティ最近新しい記事が追加されたカテゴリー
    • スマートスピーカー
    • Amazon Echo
    • 子供GPS
    • まもるっく
    • 格安スマホ、格安SIM
    • GoPro
    • dynabook
    • Chromecast
    • USBメモリー
    • Touch Diamond
    • Pocket WiFi
    • BlackBerry
    • VAIO最近アップデートされたカテゴリー
    • ミニノートPC
    • その他(デバイス)
  • Android
    • GALAXY
    • LG(G2、Optimus)
    • MEDIAS
    • LifeTouch NOTE
    • Sony Tablet S
    • Androidアプリ・活用術
    • その他(Android)
  • 通信事業者
    • NTTドコモ
    • au
    • ソフトバンク
  • 読み物
    • マネー
    • マインドフルネス
    • 神保町ペロリ旅
    • 編集部からのお知らせ
    • できるもんの部屋
    • インタビュー
    • トピック
    • まとめ
    • その他(読み物)
人気記事
  1. Excel関数一覧 機能別
  2. 【知ってた?】スマホで「この画像と似た画像」を検索する方法(Google画像検索)
  3. Googleの軽くてかわいいアプリ「Files Go」でスマホのストレージとファイルを管理しよう【Androidアプリ】
  4. 【エクセル時短】今さら聞けない「VLOOKUP」。複雑な「4つの引数」を理解する
  5. 【Google裏ワザ】「斜め」「一回転」など、スマホで楽しめる検索隠し機能「5選」
Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
新着記事
  • PowerPointでガイドの線を追加する方法
  • 【LINE】必ず一度はチェックしたい!「タイムライン」が誰に見えているのかを確認する方法
  • PowerPointでスライドにガイドを表示する方法
  • PowerPointでスライドの中心に図形を配置する方法
  • 米Amazonの商品が日本で買える新機能「インターナショナルショッピング」の使い方:Amazon.comのアカウントを作る

Twitterで @dekirunet をフォローする フォローする @dekirunet

ページ上部へ

Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
フォロー
  • RSSフィードで購読
  • Twitterでフォロー
  • Facebookでフォロー
できるシリーズ
  • できるシリーズについて
  • 読者限定PDFのダウンロード
  • サンプルファイルのダウンロード
できるネット
  • このサイトについて
  • 本サイトのご利用について
  • 全記事一覧
  • プライバシーについて
  • 会社概要
  • インプレスグループ
インプレスの本、雑誌と関連Webサービス
  • DOS/V POWER REPORT
  • GANREF
  • できるネット
  • 年賀状Web
  • Web徹底攻略
  • Reader's Forum
  • インプレス

Copyright © Impress Corporation. All rights reserved.