- ベストアンサー
テーブルをcssでどうやる？
- テーブルをCSSで横にも長く、縦にも長く表示する方法について教えてください。
- セルに入る文字数が異なる場合でも、CSSを使ってテーブルを作成することは可能ですか？
- セルに入る文字数が同じでない場合、CSSを使って縦の列を並べることはできるのでしょうか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (1)
関連するQ&A
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- 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
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 二つのテーブルを横に並べて表示するにはどうすれば
"<table border=10><tr><td>test</td></tr></table><table border=10><tr><td>test</td></tr></table>" のように、テーブルを二つ表示させたい時に test test と、縦に並んでブラウザに表示されてしまうのですが testtest のように、二つのテーブルを横に並べて表示するにはどうすればよいでしょうか？
- ベストアンサー
- HTML
- テーブルを横に二つ並べて表示する方法はありますか？
テーブルを横に二つ並べて表示する方法はありますか？ 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に２個並んでしまいます。
- 締切済み
- HTML
- tableをcssで表記したい
下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか？ tableの種類が一つの場合はできるのですが・・・ ＜table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"＞ ＜tr＞ ＜td width="30" bgcolor="#FFFFFF"＞a＜/td＞ ＜td "＞b＜/td＞ ＜/tr＞ ＜/table＞ ＜br＞ ＜table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"＞ ＜tr＞ ＜td width="25" bgcolor="#CCCCCC"＞c＜/td＞ ＜td＞d＜/td＞ ＜/tr＞ ＜/table＞
- 締切済み
- HTML
- テーブルを2つ横に並べる
ホームページ作りに熱中しているのですが、テーブルを2つ横に並べる方法がよくわかりません。どうしても縦に連なってしまいます。 テーブルを横に並べるタグはあるのでしょうか？教えてくださいm(vv)m このテーブルを横に並べたいのですが・・・。 <table style="border:1px solid 色;background-color:white;" cellpadding="5"><tr><td> 文字を入れる </td></tr></table>
- ベストアンサー
- レンタルサーバ・ASP
- cssで商品を並べる時、テーブルを使わないでできる？
cssとっかかったばかりの初心者ですのでわけのわからない質問ばかりしてしまいますが、よろしくお願いします。 cssを使ったページに商品を並べる場合、テーブルを使ってレイアウトするのが楽と思いますが、テーブルを使わないで2列、3列というようにできますか？ 普通にテーブルを使ったら <table> <tr> <td>item1</td> <td>item2</td> <td>item3</td> </tr> <tr> <td><img src="img/01.jpg" width="100" height="100"></td> <td><img src="img/02.jpg" width="100" height="100"></td> <td><img src="img/03.jpg" width="100" height="100"></td> </tr> </table> ですが、テーブルタグをつかわず、cssで列を指定ってできますか？ それとも、商品ラインナップの場合はテーブルで入れるのが普通ですか？？？ いろいろやってみたんですが、わからなくなったので、質問します。 よろしくお願いします。
- ベストアンサー
- XML
お礼
参考になりました。 ありがとうございました。