- ベストアンサー
tableの角の丸い装飾
Tableの外枠に角丸の画像を使ったり、線状の行を使ったりして、角が丸い表を表示しています。 ここから角の丸い装飾 <TD>★★</TD> ここで角の丸い装飾の終わり ★★の部分に、なんなかの文章なり、小さいtableを入れて使っていますが、★★以外の部分を関数化して共用にして簡単に使う方法はないでしょうか。 ××★★×× ＃上記部分を極限まで短い文字にするテクニックを。
- s-holmes
- お礼率47% (767/1609)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
1番。IE限定。 <head> <title></title> <script language="JavaScript"> <!-- var tableHTMLpart1 = '\ <table border="1">\ <tr>\ <td>'; var tableHTMLpart2 = '\ </td>\ </tr>\ </table>'; function makeup(id){ var src = tableHTMLpart1 + document.all.item(id).innerHTML + tableHTMLpart2; document.all.item(id).innerHTML = src; } //--> </script> </head> <body onload="makeup('undressed')"> <div id="undressed"> <H1>★★</H1> </div> </body> JavaScriptオフなブラウザでアクセスされたらオシマイ;-)
関連するQ&A
- 表の角を丸くする方法を教えてください。
WORDなどで表を挿入するときに、外枠の角を丸くしたいと思うのですが、どのようにすれば出来るのか教えてください。 オートシェイプで角丸四角形を挿入しても、その後がうまく行かないので、どなたかお願いします。
- ベストアンサー
- オフィス系ソフト
- htmlで作成するテーブルの横線の太さを変えたい
よろしくお願いします。 htmlでテーブルを使用しての表を作っているのですが、 見やすくするために横線の太さを変えたいと思っています。 基本的なhtmlタグとスタイルシートの書き方は理解できますが、以下のよう作る方法が どうしてもわかりません。 10×10のセルのテーブルとした時に、 1. 全体の外枠は3pxの太さ。 2. 内側の縦線はすべて1px。 3. 3行おきに、セルの下部分の太さを2pxにしたい。（3行おきに区切り線を表示したい） もし無理であれば、全体の外枠と3行おきのセル下部分の太さが同じ（2px)でもよいです。 どなたかご返答よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルの角を丸くして、立体的に
先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 －－－－－－－－－－－－ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>
- ベストアンサー
- CSS
- 角丸テーブルのCSS化？
既存のテーブルレイアウトのサイトを、 CSSレイアウトに変更しようと思っています。 大体は大丈夫なのですが、問題は角丸テーブル。 縦横自由伸張の(影付き)角丸テーブルなので、 一番単純な部分でも9個のtdがある状態です。 これはどういうふうにしたら良いでしょうか。 9個のDIVというのは複雑すぎますし… 何か良い案があればアドバイスをお願いします。
- ベストアンサー
- HTML
- 連想配列からテーブルを作成する関数
連想配列からテーブルを作成する関数を作ろうと思っています。 関数をどのように書けばHTMLのソースのようになるでしょうか？ //----- 関数 ----- function table($v) { } //----- 配列 ----- $s[0] = array( 'あ行' , 'い行' , 'う行' , 'え行' , 'お行' ); $s[1] = array( 'か' , 'き' , 'く' , 'け' , 'こ' ); $s[2] = array( 'さ' , 'し' , 'す' , 'せ' , 'そ' ); table($s); //----- 生成されるhtml ----- <table> <tr><td>あ行</td><td>い行</td><td>う行</td><td>え行</td><td>お行</td></tr> <tr><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr> <tr><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr> </table> //----- print_r ----- array(3) { [0]=> array(5) { [0]=> string(4) "あ行" [1]=> string(4) "い行" [2]=> string(4) "う行" [3]=> string(4) "え行" [4]=> string(4) "お行" } [1]=> array(5) { [0]=> string(2) "か" [1]=> string(2) "き" [2]=> string(2) "く" [3]=> string(2) "け" [4]=> string(2) "こ" } [2]=> array(5) { [0]=> string(2) "さ" [1]=> string(2) "し" [2]=> string(2) "す" [3]=> string(2) "せ" [4]=> string(2) "そ" } }
- ベストアンサー
- PHP
- 画像を使ったテーブルで隙間ができてしまいます
画像を枠に使ったテーブルをHTMLで作成し、FC2ブログに載せています。 Chrome上ではうまく表示されるものの、IE、Firefoxでは Rowの上に隙間ができてしまい、枠画像が正しく表示されません。 ----------Tableの基本構造---------- <table cellspacing="0" cellpadding="0" border="0" width="x" height="y" bgcolor="#FFFFFF"> <tr><td><img src="左上角"></td> <td><img src="上部"></td> <td><img src="右上角"></td></tr> <tr><td width="15"><img src="左１列目"></td> <td style="color:# … ;"> 内容1</td> <td width="15"><img src="右1列目"></td></tr> <tr><td width="15"><img src="左2列目"></td> <td style="color:# … ;"> 内容2</td> <td width="15"><img src="右2列目"></td></tr> <tr><td><img src="左下角"></td> <td><img src="下部"></td> <td><img src="右下角"></td> </tr></table> -------------以上-------------- 上記のものよりも実際は行と列を増やしておりますが、基本的に増殖しているだけです。 1行目と2行目の間に隙間ができて縦の画像枠が細切れになっています。 隙間ができているのは行の下ではなく、上の部分のように見えます。（背景色の見え方などから） テーブルのみの上記コードは、ローカル環境ではIEでも正しく表示されるため、 ブログにアップした際乱れるのは、スタイルシートの影響かと考えております。 自分でそれらしいところをいろいろ設定をいじりましたが改善しません。 ということで、 ≪スタイルシートの設定で、画像を枠に使ったテーブルの隙間に影響を与えうる要素≫ が何が考えられるか教えて頂ければと存じます。 なお、使っているStyle Sheetは以下のものですが、 http://blog-imgs-30-origin.fc2.com/w/m/k/wmks/wm_gienah_R.html TableにかかわるStyle部分はコメントアウトしましたので、テーブル自体のスタイルは 適用されていないはずです。
- ベストアンサー
- CSS
- CSSでテーブルボーダーを一発指定出来ません！
現在テーブルに対してのCSSを設定しているのですが、私の勘違いなのかうまく出来ません・・・。 例えば縦5×横5列の表が有ったとします。 そこにCSSで四方1pxのボーダーを指定します。 でも、これだけだと表の一番外枠部分にしかボーダーが表示されません・・・。（当然なのかもしれませんが） そこで、CSSを使い中のブロック？部分、<td>全てにボーダーを表示させたいのですが、そのようなことは可能なのでしょうか？ ようは、表の枠線全てをcssで表示させたいのですが、この様な事は可能でしょうか？？ ご存知の方がいましたら、アドバイスいただけますでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- HTML
- tableタグを使わない表の作り方について
tableタグを使わずに、6列1行の表を作成したいのですが、どのように すれば、出来るのでしょうか また、<td colspan="2">のように2列を結合する方法を教えて頂けないでしょうか。 宜しくお願いします
- ベストアンサー
- HTML
- WORDで罫線の「面取り」って出来ますか?
普通はオートシェープの角丸を選んでいますが、罫線で「面取り」=「角を丸くする」というのは出来ますでしょうか? 段数が多い表の縦横の罫線を書いた後で外枠だけ「面取り」を施したいのですか?
- ベストアンサー
- オフィス系ソフト
- fireworksとdreamweaverとのテクニック
fireworksとdreamweaverとのテクニックを本で見たんですが 本もなく忘れてしまい困っています 教えて下さい fireworksで 正円をつくりそれを4等分（90°）にしスライスします dreamweaverでテーブルを行 列ともに 3とします テーブルのそれぞれの角にさっきつくったgifを読み込みます そこで問題です！！ IEでプレビューするとボーダーの部分に隙間が出来てしまいます セルの結合が出来ません 最終的には 角丸矩形をつくりたいんです で その中にテキストを入れます 確かこんな感じだったと思います 皆さん教えてください うまく表現できませんが この事かな？っとお思いの方宜しくお願いします
- ベストアンサー
- その他(ソフトウェア)
お礼
回答ありがとうございました。 感動です。 いろいろ方法があるものですね。 これだったら、面倒な囲み枠を惜し気もなく？使えそうです。 ＃奥が深い！(^O^)