テーブルのセルに幅をキチンと指定する

テーブルのセル自体に幅を指定する

最近htmlをいじる事が多くなってきて、テーブルを作成する際にセルの幅をあらかじめ固定しておきたいのに要素を指定しても全然上手く行かずにつぶれたテーブルが出来てしまっていたので調べた。

やり方

少し混乱するが、tableタグに"table-layout: fixed;"を設定して最初の列にあるtdタグ全てに任意の幅を"width"で指定する。
このtdタグに指定した幅がそれぞれのtdの幅になる。
この二つのタグに指定するのを私は知らなかったが為に、出来なかった...

[html] <!-- html --> <table> <tr> <td>imo</td> <td>susi</td> <td>kimo</td> </tr> <tr> <td>uma</td> <td>koma</td> <td>kuma</td> </tr> </table> [/html] [css] / css / table { table-layout: fixed; }

td { width: 20px; height: 20px; } [/css]

こうすると、横幅と縦幅が20pxの正方形のセルのテーブルが出来る。
こうやって指定しないとtdの中に何か入っていない場合はテーブルがつぶれてぐちゃぐちゃな状態で表示されるので注意。

終わり

プログラマなのに、htmlも満足にいじれないなんてにわかも良いところだなっと非常に思ったので反省。