【html/CSS】table,tr,tdにmarginが効かない原因と代替案

tableは表を表示するhtmlタグです。エクセル的な表として使ったり、横並べのために使ったり、要素をそろえるために使ったりと便利なhtmlタグです。

しかし「間隔を調整したいのにmarginが効かない!?」ということもあるでしょう。

table,tr,tdにmarginが効かない原因と代替案について解説します。

tableの基本

まずtableの基本をおさえましょう。

• tableタグは表全体タグ
• trタグは行を囲むタグ
• td,thはマスのタグ

例

<table border="1">
    <tr>
        <td>左上</td><td>右上</td>
    </tr>
    <tr>
        <td>左下</td><td>右下</td>
    </tr>
</table>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

tableにmarginが効かないとき

table、つまり表全体の位置調整のためのmarginは効きます。

tableにmarginが効かない場合考えられるのは下記のとおりです。

親要素とtableの幅が同じ（tableの幅が100%）

marginは要素の外側の間隔を調整するCSSですが、そもそも外側にスペースがないと調整できません。

とくにtableは内容量によって自動で幅が変わるため、いつの間にか横幅がいっぱいになっていることがあるので注意です。

ちなみにtableはwidthを指定しなくてもmargin:autoで中央寄せできます。

その他ケアレスミスなど

上記に当てはまらないときケアレスミスなども考えられます。

下記を確認してみてください。

CSSが効かない原因と回避方法【よくあるケアレスミス】

CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。

この記事を読む

trとtdにはmarginが効かない

trとtdにはどうやってもmarginは効きません。そういう仕様です。

なお、trには基本的にCSSを指定しないことをオススメします。

代替案：border-spacingを使う

表のマスとマスの間隔を調整したいときはCSSのborder-spacingを指定しましょう。これはtableに対して指定します。

マス内、線と文字の間隔を調整したいときはtd,thにpaddingを指定しましょう。

table{
    border-spacing: 20px 10px;
}
td{
    padding: 10px 20px;
}

まとめ

tableにmarginが効かないとき

親要素とtableの幅が同じ、つまり幅100%になっていてmarginを指定する隙間がないから。

trとtdにはmarginが効かない

マスとマスの間隔調整はtableにborder-spacingを指定する。

マス内の文字とマス枠の間隔調整にはtd,thにpaddingを指定する。

以上、table,tr,tdにmarginが効かない原因と代替案でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む