テーブルのレイアウト崩れを防ぐ

[通常の状態]

[333] サンプルです。長い題名の場合、この欄内で改行され、レイアウト崩れします。	だぃ
2333年3月3日03時03分03秒	Home　Mail
あああああ。ボーダーは、便宜上入れてあります。

テーブルを使って記事を配置する場合、一番のネックとなるのがレイアウト崩れでしょう。長いＨＮやタイトルで書き込まれたときには必ず起こることです。改行自体は、上の例ならば、タイトルとHNの敷居を可変にすれば（<td>のwidthを指定しなければ）、改行されることは稀ですが、予想もしないときに変なレイアウトになることもあり、また、ページ全体の統一感も損なわれます。
内容重視とするか、レイアウト重視で行くか…。二者択一となるのですが、ここでは後者に関して触れていきたいと思います。

Sample(1)[テーブル幅を完全に固定する]

[333] サンプルです。長い題名の場合、この欄内で改行され、レイアウト崩れします。	だぃ
2333年3月3日03時03分03秒	Home　Mail
あああああ。ボーダーは、便宜上入れてあります。

☆ソースの解説☆

☆各表示形式のソースにて☆

<table style="table-layout:fixed"><tr style="height:○○px">…

まず、テーブルのレイアウトを固定させ、<tr>の高さを完全に固定し、はみ出した部分を表示させないようにする方法です。「height」はフォントのサイズに合わせて決めていただければ良いのですが、そのためには予めフォントサイズをピクセルで指定しておくと良いでしょう。
この方法だと、長いタイトルの後半部分を完全に無視することになるので、書き込みフォームの方で文字数の上限を設定しておくといいかも知れません。
（onClickで「table-layout:fixed」を部分的に解除するscriptは簡単に書けるのですが、ソースの量の割りにメリットは少ないので、とりあえずここでは触れないことにいたします。）

Sample(2)[フォントサイズを可変にする]

[333] サンプルです。長い題名の場合、この欄内で改行され、レイアウト崩れします。	だぃ
2333年3月3日03時03分03秒	Home　Mail
あああああ。ボーダーは、便宜上入れてあります。

[333] 短いタイトルです。	だぃ
2333年3月3日03時03分03秒	Home　Mail
あああああ。ボーダーは、便宜上入れてあります。

☆ソースの解説☆

☆各表示形式のソースにて☆

<script language="javascript">
var daimei$seq = '$subject';
var nagasa$seq = daimei$seq.length;
var fsize$seq = Math.floor( ○○ / nagasa$seq );
if (fsize$seq > △){fsize$seq = △ };
document.write('<font style="font-size:',fsize$seq,'px;">');
</script>

$subject

<script language="javascript">
document.write('</font>');
</script>

○○を<td>の幅（-30pxぐらい）、△を通常のフォントサイズ(px)として下さい。流れとしては

（ <td>の幅）/ 文字数 = フォントサイズとする
　　　↓　
サイズが通常より大きければ、通常と同じサイズをフォントのサイズとする。
　　　↓　
タグを生成。

となっています。○○の部分は、表示フォントの種類によって目安が変わってくるので、実際の<td>のサイズよりも30～50pxぐらい小さい数値を設定してやると良いでしょう。　フォントサイズの最大値に相当する△のサイズは単位がpxなので気をつけて下さい。

この方法は、本文中にも応用できると思います。例えば、OTDが配布している「バルーンの掲示板」では、テーブルサイズの最大値が固定され、それを越える書き込みは途中で切れてしまいますが、この方法を応用すれば「テーブルサイズを完全に固定して、それに応じてフォントサイズを変える」ことができます。そうすることで記事を雲や宇宙船の画像に乗せたりすることが可能になり、一番カスタマイズの難しい「バルーン」も　自分好みの掲示板に仕上げることが出来ると思います。