css

cssでテーブルの行間を広げる方法

投稿日:2020年2月29日 更新日:

Pocket

 

あなたはcssでテーブルに行間をとりたい、

(セルとセルの間のスペースを広げたい)と思ってませんか?

 

この記事では、cssでテーブルの行間を

広げる方法を書いてるので、読めば、

あなたはテーブルの行間を広げれるようになります。

 

ということで、テーブルの行間を

広げたければこのまま読んでください。

 

スポンサードサーチ

cssでテーブルの行間を広げる方法

 

で結論ですが、

cssでテーブルの行間を広げる

には、border-spacingを使いましょう。

 

 

border-spacingとは

 

border-spacingは行間をコントロール

することができるものでして、

border-spacingと書くと、

 

以下の画像のように、

css テーブル 行間

テーブルのセルの間のスペース(行間を)

広げることが可能です。

 

 

なので、cssでテーブルの行間を

広げたい場合は、

border-spacingと書きましょう。

 

 

border-spacingと書く場所は?

 

で、border-spacingを書く場所ですが、

tableタグに対して書きましょう。

 

例としては、以下のようにです。

table {
border:1px solid black;
border-spacing: 26px 34px;
}

 

tableタグに対してborder-spacingと

書くことで、機能してセルの間の行間が広がります。

 

 

border-spacingの数値の意味は?

で、border-spacingですが、数値が二つ取れまして、

最初の数字が左右の幅、2番目の数字が縦の幅を広げる

ことが可能です。

 

例えば、border-spacing:20px 30px;

と書いてたとすれば、20pxぶん、左右に

スペースを広げてくれて、

 

30pxぶん縦に行間を取ってくれるという

感じです。

 

 

ということで上記を知ってれば、

実際にcssでテーブルの行間をとれるので、

参考にしてみてください。

 

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

テーブルに行間を取りたければ、

border-spacingを使いましょう。

 

またテーブルを使う際、

web制作ではテーブルもレスポンシブ対応

させる必要性が多々出てくるので、

 

cssでテーブルをレスポンシブにする方法が、

知りたい場合は、以下の記事を読んでください。

 

cssでテーブルをレスポンシブの縦並びにする方法

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。