罫線が１ピクセルのtableを表示するタグその2 （担当Ｍ）

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

プロフィール

テクニカルライター

フォローする

フリーページ

取材

(6)

バックナンバー

2026/08
2026/07
2026/06

2026/05
2026/04
2026/03

日記/記事の投稿

ブログを引っ越します（蝦名）
仕組み作りは、お任せください（滝田）
あるべき姿と今の姿（滝田）
原稿をいただいて流し込むだけのWeb屋ではありません（蝦名）
負の連鎖にまきこまれない（滝田）
年度末で大変な皆様へ（蝦名）

お気に入りブログ

ＡＩに編集してもら… ＬＤ菊池さん

どさんこ営業マン「… くりりん630さん
ＰＬＡ＋ＮＥＴＳク… ａｙｕｍｙｕさん
天使の導き 安寿ーあんじゅさん
新川てるえの家族の… 新川てるえさん
おもしろき　ことも… kenkenppaさん
プリプレス･センター… プリプリ人さん
駐妻の光と影　 pumpkin2005さん
にわとりのあたま にわとりのあたまさん
カラーセラピーＲｏ… rosa_mihoさん

< 新しい記事

新着記事一覧(全1310件)

過去の記事 >

2004/09/27

テーマ：裏ワザ・便利ワザ(461)

カテゴリ：ホームページ作成ノウハウ

前回は、1ピクセルのtdで罫線を描画する方法を紹介しました。今回はもっとカンタンな方法でやってみましょう。

手順は次のとおりです。

1.テーブルを1つ作成

2.その中にもう1つテーブルを作成

3.外側のテーブル、
　 border="0" cellspacing="0" cellpadding="1"
　を指定します。また、bgcolorを罫線の色にします。

4.内側のテーブル、
　 border="0" cellspacing="0" cellpadding="0"

　また、bgcolorをテーブル内部の色にします。

これでOKです～♪
タグの例はこちら。

<table width="100%" border="0" cellspacing="0" cellpadding="1" bgcolor="#006600">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
<p>こんな<br>かんじに<br>なります</p>
</td>

</table>
</td>
</tr>
</table>

コピペしてやってみてください。

テーブルをネストするだけで、簡単にできちゃいました。

でも本当は、
こういうことは
スタイルシートで実現するのがスジというものです。

次回はスタイルシートを使った例を紹介しますよ！

お気に入りの記事を「いいね！」で応援しよう