htmlテーブルレイアウトの空白セルでレイアウトが崩れないために。
htmlで表を作成した時に空白セルができてしまう時
class名を入れてcssで指定する。
古いやり方ではspacer.gifで透明の画像を入力する。
とりあえず空白だとブラウザが勝手に16pxに合わせてしまい16pxよりは小さくすることができないので、とりあえず中を埋めて崩れないようにする。
空白のところにtr class="head"と名前をつけてhight10pxの指定をしている。
下側(5月と7月の間)の空欄にはspacer.gifを入れている。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> table { font-size: 0.875em; border: 1px solid #FFF; border-collapse:collapse; } th,td { border: 1px solid #FFF; padding: 5px 10px; } .aplir { background-color: #FCF; } .may { background-color:#C1FDB7; } .july { background-color:#CFF; } .head { heigt: 10px; margin: 0; padding: 0; } th,td { padding: 4px 10px; } img { margin: 0; padding: 0; } </style> </head> <body> <table width="346"> <tr class="aplir"> <th>4月</th><td>29日</td><td>昭和の日</td> </tr> <tr class="head"><th colspan="3"></th> </tr> <tr class="may"> <th rowspan="3">5月</th><td>3日</td><td>憲法記念日</td> </tr> <tr class="may"> <td>4日</td><td>みどりの日</td> </tr> <tr class="may"> <td>5日</td><td>こどもの日</td> </tr> <tr> <th colspan="3"><img src="8-1/images/spacer.gif" width="1" height="1"/></th> </tr> <tr class="july"> <th>7月</th><td>第3月曜日</td><td>海の日</td> </tr> </table> </body> </html>