丸角テーブルが作りたい

質問

たびたびお世話になっていますｍ（＿＿）ｍ
HP作成初級者です。
丸角テーブルを作りたいと思っています。
しかも、そのテーブルに背景画像も入れたいのですが可能でしょうか？
やはり、丸角テーブルに背景画像を入れると角の部分が変になってしまうでしょうか？
もし、可能であれば一番簡単な方法を教えていただきたいです。
よろしくお願いします。

回答No.4

SortaNerd

背景画像の上に角丸の画像を表示すれば可能です。
角丸tableの作り方は分かっている前提で…

まず背景画像を目的のtableのサイズに合わせて9つに切り分けます。
(これをしないとブラウザによってtableのセルごとに画像が表示されますので切れ目で不連続になります。)
そして、角には背景画像を表示させた上でtableの内容として透過gifで作った角丸画像を置きます。
欠点として、tableのサイズを変更することができません。

ちなみに背景画像が1枚の画像でなく小さな画像を繰り返すタイプの場合、背景画像のサイズと角丸のサイズを合わせておく必要があります。

回答No.3

crepon133

角の丸いテーブルを作る
http://atp.boo.jp/act/html/04.html
応用編の８つの画像で、白の部分を透過にする。
さらに、角の画像はグレイ部分をページの背景色と同色にする。
1*1ピクセルの透過GIFファイルを用意する。
これを利用してテーブルの背景に画像が置けると思います。

<table border="0" align="center" cellpadding="0" cellspacing="0" background="back.jpg">
<tr>
<td><img src="01.gif" width="8" height="8"></td>
<td background="02.gif"><img src="spacer.gif" width="1" height="1"></td>
<td><img src="03.gif" width="8" height="8"></td>
</tr>
<tr>
<td background="04.gif"><img src="spacer.gif" width="1" height="1"></td>
<td>本文 本文 本文</td>
<td background="05.gif"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td><img src="06.gif" width="8" height="8"></td>
<td background="07.gif"><img src="kara.gif" width="8" height="8"><img src="spacer.gif" width="1" height="1"></td>
<td><img src="08.gif" width="8" height="8"></td>
</tr>
</table>

回答No.2

kabuni

テーブルの角を丸くする機能はありませんので
丸くなったように見せる・・・ということになりますが、
●テーブルの背景に画像を使うのならばその画像をテーブルと同じサイズにして角丸に見えるようにカド四箇所を背景と同じ色で丸く塗っておく。もしくはＧＩＦ画像でカドを透明処理しておく。
●テーブルごと画像として作成して張り込む。
●テーブル四隅にＨＰの背景色と同じ色の角丸画像を配置する。
（わかりにくいかもしれませんが、ＨＰの背景色と同じ■を四隅に配置したら角っとへこんだ画像に見えますよね。この■を形をかえてやればいろんなカドの形にできます。）

ということしか思いつきませんね。
ただ、その際、テーブルのボーダーは０でないと変です。
（すべてFlashで作成すればそのような苦労はなくなりますが・・・＾＾：）

回答No.1

torayoshi

丸角といってもいろいろな形がありますよね。
外側の角が丸く内側が四角いものと、内も外も丸いものと…
どんなタイプの丸角テーブルですか？

丸角といっても元は四角い画像ですから、その中に画像を入れると
だいたい想像つくと思います。
外側が丸で内側が角なら画像は変な余白なしに収まりますが、
外も内も丸なら変な余白が出来ます。