No.1
94
14
50pt
下記サイトが参考になるかと思います。HTML とCSS のみなら、どこも同じ方法を使用しています。
"Tableタグで角丸『border-radius』(CSS3)が使えるのか検証→可能"
http://d.hatena.ne.jp/y_guriko/20110114/p1
ただし、I.E 8以下はCSS3(border-radius)に対応していないため、画像を使用しない角丸は表示出来ません。
比較的簡単にコードを生成したい場合には、下記で紹介されているサービスを利用されるとよいかもしれません。
"角丸のHTML・CSSコードを生成してくれる「RoundedCornr」"
http://webpersons.jp/tips/2008/04/roundedcornr.html
No.2
1504493
50pt
border-radiusのサンプル。回答1にあるようにborder-radiusは新しめのブラウザでしか使えない。
http://jsfiddle.net/cherenkov/2KLDw/
<html> <head> <style> table, td, th { border-radius: 5px; } </style> </head> <body> <table border=4 width=250 align=center> <tr bgcolor="#cccccc"> <th><br></th> <th>列-A</th> <th>列-B</th> <th>列-C</th> </tr> <tr align=center> <td>行-1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr> <tr align=center> <td>行-2</td> <td>A2</td> <td>B2</td> </tr> <tr align=center> <td>行-3</td> <td>A3</td> <td colspan=2>A3-B3</td> </tr> </table> </body> </html>
ブラウザ間で見た目の統一を図るならborder-radiusよりもjquery.corner.js使ったほうがいいのかも。（全てのブラウザで同じ表示になるかは未確認）
http://jsfiddle.net/cherenkov/fasKs/1/
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.corner.js"></script> <script> $(function() { $("table, td, th").corner(); }); </script> </head> <body> <table border=4 width=250 align=center> <tr bgcolor="#cccccc"> <th><br></th> <th>列-A</th> <th>列-B</th> <th>列-C</th> </tr> <tr align=center> <td>行-1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr> <tr align=center> <td>行-2</td> <td>A2</td> <td>B2</td> </tr> <tr align=center> <td>行-3</td> <td>A3</td> <td colspan=2>A3-B3</td> </tr> </table> </body> </html>
121
120
コメント（0件)