- 締切済み
ＣＳＳでテーブルダグのように記述するには？
こんばんわ。 テーブルタグは簡単に中のデータの上下左右の位置指定ができますよね。 たとえば<ｔｄ align="center">でｔｄ内部の画像は真ん中に指定できますよね。 cssでこのように位置を指定するにはどうすればいいのでしょうか？？
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ttyp03
- ベストアンサー率28% (277/960)
- meso_sonpo
- ベストアンサー率18% (5/27)
関連するQ&A
- テーブルデザインをCSSで行う方法
tableタグで組んでいるデザインをCSSに変更したいと考えております。 以下のHTMLをCSSでtableタグを使わずに実現したいのですが、可能なのでしょうか。 ※参考までに画面上のイメージも添付しました。 CSSが苦手なのでどなたかご教授下さい。 <html> <head> </head> <body> <table border="1" width="50%" height="20%"> <tr> <td colspan="2" rowspan="2"><p align="center">test</p></td> <td colspan="2" rowspan="2"><p align="center">test</p></td> <td colspan="2"><p align="center">test</p></td> <td colspan="2" rowspan="2"><p align="center">test</p></td> </tr> <tr> <td><p align="center">test</p></td> <td><p align="center">test</p></td> </tr> <tr> <td colspan="2">data1</td> <td colspan="2">data1</td> <td>data1</td> <td>data1</td> <td colspan="2">data1</td> </tr> <td colspan="2">data2</td> <td colspan="2">data2</td> <td>data2</td> <td>data2</td> <td colspan="2">data2</td> </tr> <td colspan="2">data3</td> <td colspan="2">data3</td> <td>data3</td> <td>data3</td> <td colspan="2">data3</td> </tr> </table> </body> </html>
- 締切済み
- HTML
- CSSで画像・テーブルをウインドウの中央（上下・左右共）に表示したい！
前回は文字を一番下の中央に表示させたい質問をして、 回答を頂き出来るようになったのですが、今度は画像や テーブルをCSSを使ってウインドウの中央（上下・左右共） に表示させる方法が分らず困っています。 ご存知の方がおられましたら回答を宜しくお願いします。 このようにやってみましたが、画像やテーブルの縦の長さ に関係なく50％位置に配置されてしまい、上下に中央では なくなってしまいました。 position: absolute; top: 50%; width: 100%; text-align: center; いじょう宜しくお願いします。
- ベストアンサー
- HTML
- テーブルとDIVとCSSについて質問です。
テーブルとDIVとCSSについて質問です。 テーブルタグのtdにdivで、写真を入れたい（写真の周りにdivで枠の飾りみたいのをつけたいから）です。 その下に、CSSで定義した文字を入れたいのですが、 tdが横に２つ（＝つまり、写真が２つ並ぶ）と、左の写真の下の文字を3行にし、 右の写真を下の文字を2行にすると、縦の中央になってしまい、 右が少し下にきてしまいます。 どう、定義したらいいでしょうか？ また、その文字らを、text-align="center"でCSSで定義しても、 デザインですとセンターに見えても、ブラウザでみると、左揃えによってしまいます。 どう書いたらいいか、あわせて教えてください。 また、tableにdivを入れたらダメの場合は、どうやったら、いいか教えて下さい。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで画像を中央に持っていく方法。
簡単な問題です。 画像を liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？ 画像のサイズがまちまちなので、 paddingなどで数値を指定するのは、NGです。 vertical-align:middleはだめでした。 text-align:centerで左右の中央に持って行く所まで、できました。 HTML ==================== <ul class="book_slide"> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> </ul> ====================== css ======================= ul.book_slide li{ float:left; height:114px; width:80px; border:1px solid #000; text-align:center; } =======================
- ベストアンサー
- CSS
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- テーブルタグについて
私は今テーブルタグでレイアウトする勉強をしています。よくＨＰでみかける作り方ですが、セルを縦に設定したいと思っています。作り方がテーブルタグの中にテーブルタグをいれて作っているようなのですが、実際私が作ってみると、左右のテーブルの位置が行数が違ってくると少ない行数の方が上下にセンタリングされてしまい、トップの位置がずれてしまいます。 何回もＨＰを見て、これはと思うタグをいれてやってはみたのですが、うまくいきません。 下に私が作った「html」をのせましたので、どなたかわかる方、教えてください。お願いします。 ＜参考html＞ <html> <head> </head> <body> <table border="1" align="center" cellspacing="0" cellpadding="0"> <tr> <td> <table> <tr> <td> <table border="1"> <tr> <td>これは日本昔話です。</td> </tr> <tr> <td>むかしむかしあるところにおじいさんとおばあさんが住んでいました。ある日おじいさんは芝刈りに、おばあさんは川へせんたくにいきました。</td> </tr> </table> </td> </tr> </table> </td> <td> <table border="1"> <tr> <td> <table border="1"> <tr> <td>私はＷＥＢの勉強をしています。</td> </tr> <tr> <td>なかなかむずかしいです。。</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルをウィンドウのセンターに
700px*400pxぐらいのテーブルを、ウィンドウの大きさにかかわらず上下左右ともにセンターに配置するには、どのようなコードを書けばいいのでしょうか？ 左右はセンター配置になるのですが上下が。。。 できればHTMLでお願いします。m(_ _)m また、テーブルの位置（上下左右センター）をCSSで指定できるのでしょうか？ よろしくお願いしマス。
- ベストアンサー
- HTML
- CSSでの文字と画像の関係
HTML・CSSの使用経験があまりないので教えてください。 画像を<align=center>で表示し、 その下に文字をCSSのmarginで画像の左端から少し空けて表示させています。 |------------------| | | | | |------------------| ここに文字 ですが画面を小さくすると文字位置がおかしくなってしまいます。。 いい方法があれば教えていただけませんか？ よろしくお願いします。
- ベストアンサー
- HTML
- cssを作成したい初心者です☆
こんにちわ☆ ホームページを作成したい初心者です。htmlをある程度学ぶことができ、今度はcssに超背印してみようと思うようになりました。 そこで、htmlにCSSが反映されるように、テキストエディットに <link rel="stylesheet=" href="style.css">を書きました。CSSの方は、 h1, h2{ font-size: 30px; } h1{ text-align: left; } h2{ text-align: center; } を入力して、h2の文字の位置がブラウザ上で真ん中になるようにしたいのですが、確認したところ、思ったように反映されていなくて困っています。CSSの保存名は「style.css」にして拡張子もCSSにしたのですが・・・。 どのようにすればCSSで作ったものが反映されるようになるのか、教えてくださいっ。
- 締切済み
- HTML
- 表の1列だけをCSSを使って右揃えにするには？
XHTMLとCSSを使ってホームページを作成中の初心者です。 表の中のデータを中央揃えにするのですが、ある1つの列の文字だけは全て右揃えにしたいのです。 A-1 B-1 C-1 A-2 B-2 C-2 A-3 B-3 C-3 という表があったとすると、この中の「C-1、C-2、C-3」は右揃え、他の部分は中央揃えにしたいのです。 もし、表の中のデータ全てを中央揃えにするのであれば、ソース部分は <table class="test"> <colgroup span="1" id="test-a"></colgroup> <colgroup span="1" id="test-b"></colgroup> <colgroup span="1" id="test-c"></colgroup> <tbody> <tr><td>A-1</td><td>B-1</td><td>C-1</td></tr> <tr><td>A-2</td><td>B-2</td><td>C-2</td></tr> <tr><td>A-3</td><td>B-3</td><td>C-3</td></tr> </tbody> </table> のような感じで、CSS部分は table.test td {text-align: center} というようにすればよいかと思います。 また、個別に指定するのであれば、ソース部分は <tbody> <tr><td class="c">A-1</td><td class="c">B-1</td><td class="r">C-1</td></tr> <tr><td class="c">A-2</td><td class="c">B-2</td><td class="r">C-2</td></tr> <tr><td class="c">A-3</td><td class="c">B-3</td><td class="r">C-3</td></tr> </tbody> のような感じで、CSS部分は td.c {text-align: center} td.r {text-align: right} でも良いかと思います。 ただ、データの量が多く、全てのセルに対して <td class="c"> <td class="r"> 等の指定をすることは非常に大変です。 列ごとに横幅の指定をするときなどはCSS部分で colgroup#test-c {width: 20px} 等のようにすると思いますが、例えば、この colgroup#test-c 等を利用してCの列は右揃え、他の列は中央揃えにする方法をご教示お願いします。
- ベストアンサー
- CSS
