HTML の表・テーブルの列の幅を設定する方法についての考察

「あんまり自信はないけれども、有用だよな」と思っている内容については記事のタイトルの末尾に「考察」とつけてごまかしておりますが、今回の内容もそんな感じのものです。

新規投稿を追加_‹_comemo_—_WordPress

ブログ等に表・テーブルを貼り付ける方法として、いろんな方法がありますが、最もベーシック・基本的な方法はやはり、HTML を使うこと。

しかし、昔から不思議に思っていることのひとつ。「どうして、HTML で作った表・テーブルの列の幅は歪むんだ?」ということ。

この件については、以下の記事のとおり、table タグの CSS に「table-layout: fixed;」を追加すれば解決します。

なんで初期設定が「table-layout: fixed;」ではなく、「table-layout: auto;」になっているのか? 私の中では大いなる疑問点のひとつとなっています。

で、ここからが本題ですが、というか、上記の前提さえ知っていれば、論理必然的に自ずと推測可能なことですが、table タグの CSS に「table-layout: fixed;」を設定してさえいれば、列の幅の定義も可能であり、例えば、以下のような感じで td タグの方に % で幅を指定すると、

<table border="1" cellspacing="0" cellpadding="2" style="table-layout: fixed;">
<tbody>
<tr>
<td valign="top" style="width: 30%;">幅を30%に指定しています。</td>
<td valign="top" style="width: 70%;background-color: #c2995f;color: white;">幅を70%に指定しています。</td>
</tr>
<tr>
<td valign="top"></td>
<td valign="top"></td>
</tr>
<tr>
<td valign="top"></td>
<td valign="top"></td>
</tr>
<tr>
<td valign="top"></td>
<td valign="top"></td>
</tr>
</tbody>
</table>

ブログ上では以下のような感じで、列の幅をコントロールできているようです。

幅を30%に指定しています。 幅を70%に指定しています。

 

初期設定は「table-layout: fixed;」にしておいたほうがいいと思いませんか? おそらく、こういうことは HTML を使う人たちの間では既知のことで、しかし、なんらかの根拠でもって「「table-layout: auto;」を初期設定にしているだろうなと想像するのですが、その根拠がずっとわからずじまいです。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

w

%s と連携中

%d人のブロガーが「いいね」をつけました。