テーブルのstyleテーブルは、Webサイトでよく使われるアイテムですが、テーブル関連の要素には、他のHTML要素と違う特殊なルールやスタイルがあります。今回は、テーブル関連のCSSプロパティをまとめたいと思います。displayプロパティでも、テーブルのような表示を指定することができます。tableをご覧下さい。目次1.テーブル用のCSSプロパティ2.border-collapseプロパティ3.border-spacingプロパティ4.table-layoutプロパティ5.vertical-alignプロパティ1.テーブル用のCSSプロパティテーブル用のCSSプロパティには、セル同士のすき間やセルの幅、セルの表示と非表示などを指定する特殊なものがあります。値:top、bottom▲目次へ戻る2.border-collapseプロパティborder-collapseプロパティは、テーブルセル自体の線と外枠の線とを重ねて表示するか、すき間を空けて表示するかを指定します。border-collapseプロパティは、table要素に指定します。線そのもののスタイルは、CSSのborderプロパティで指定します(以前はtable要素にborder属性がありましたが、HTML5から非推奨となりました)。border-collapseプロパティの値は、次の通りです。separateデフォルト値セル自体の線と外枠の線との間にすき間を空けて二重線で表示するcollapseセル自体の線と外枠の線とを重ねて1本線で表示するborder-collapseプロパティの値は、継承されます。border-collapseプロパティは、テーブルに関する要素で使用できます。border-collapseプロパティの指定をしないと、次のようにセルとセルの間にすき間のあるテーブルが作成されます。ソースは次の通りです。</tr></table>border-collapse:collapseを指定すると、次のように1本線のテーブルとなります。ソースは次の通りです。</tr></table>▲目次へ戻る3.border-spacingプロパティborder-spacingプロパティは、セルの間隔を指定します。スペースの調整ですが、他のHTML要素と同様にmarginプロパティを指定しても、セルの間隔は変化しません。テーブルのセルの間隔を調整する場合は、marginプロパティではなく、テーブル特有のborder-spacingプロパティを指定する必要があります。border-spacingプロパティは、table要素に指定します。border-spacingプロパティは、単位付きの数値で指定します。・値が2つ:左右の値、上下の順border-spacingプロパティの値は、継承されます。border-spacingプロパティは、テーブルに関する要素で使用できます。border-spacingプロパティに2emを指定すると、次のようなテーブルが作成されます。ソースは次の通りです。)、次のようなテーブルになります。▲目次へ戻る4.table-layoutプロパティtable-layoutプロパティは、ブラウザがテーブルを読み込んで表示するまでの行程を、autoかfixedかで指定するプロパティです。autoは、テーブル全体を読み込んでから、各セルの内容によってセル幅を決めます。fixedは、1行目のセル数を読み込んで、セル幅を均等割にします。セルの内容に関係なくセル幅を設定したい場合は、table-layout:fixedを指定します。table-layoutプロパティは、table要素に指定します。table-layoutプロパティの値は、次の通りです。全体のデータを読み込んだ後にテーブル表示を開始fixed1行のセルの数でセルの幅を均等割に決定して表示を開始table要素にwidthプロパティの指定が必須autoより表示速度が速いtable-layoutプロパティの値は、継承されます。table-layoutプロパティは、テーブルに関する要素で使用できます。)とは、表示が次のように違います(見やすいように背景色を指定しています)。Q&Aソースは次の通りです。</tr></table>▲目次へ戻る5.vertical-alignプロパティテーブルセルには、vertical-alignプロパティを指定することができます。vertical-alignプロパティは、テーブルセル内で縦の揃え方が指定できるプロパティです。テーブルセル以外では、インライン要素同士の縦の並び方を指定する場合に使います。vertical-alignプロパティの値は、次の通りです。数値にpxやemなどの単位を付けて指定(ベースラインを0として、正の値なら上、負の値なら下に配置)inherit親の値を継承vertical-alignプロパティの値は、継承されません。vertical-alignプロパティは、テーブルセルに関する要素とインライン要素で使用できます。vertical-alignプロパティを上、中央、下、で指定すると、テーブルセルの中身が次のように表示されます(見やすいように背景色を指定しています)。bottomソースは次の通りです。</tr></table>▲目次へ戻るSHARE最新記事スキルアップ2020.02.25沖縄県のプログラミングスクール5選!今、IT業界で沖縄が熱い理由とは?2020年最新!この記事では、沖縄県でおすすめのプログラミングスクールを料金やおすすめポイント別に徹底比較します。[...]スキルアップ2020.02.19兵庫県のプログラミングスクール5選|人気おすすめは?料金&特徴を比較2020年最新!この記事では、兵庫県で人気&おすすめのプログラミングスクール5校を料金や講座内容別に徹底比較。ご自分のペースで効率よく学べる無料のオンラインスクールもありますよ。今回は、茨城県で人気&おすすめのプログラミングスクール6校を料金や特徴別に徹底比較。多彩なコースで効率よく学べる人気スクールなど厳選してまとめました。今回は、兵庫県でおすすめのIT専門学校とプログラミングスクールを受講料が安い順ランキングで9校まとめました。若狭湾を囲んで美しいビーチや景勝地が点在する福井県。今回は「プログラミングを学んで東京都内でエンジニアとして就職したい!」という方に向けて、福井でおすすめのIT専門学校&プログラミングスクールを厳選2校ピックアップ。