• ベストアンサー

trとtrの間

縦幅だけ開ける方法はありますでしょうか？ CSSは怖くていじれません 1行1列目の要素　1行2列目の要素 2行1列目の要素　2行2列目の要素 3行1列目の要素　3行2列目の要素 4行1列目の要素　4行2列目の要素 現状こういうこういう感じのテーブルを、 1行1列目の要素　1行2列目の要素 2行1列目の要素　2行2列目の要素 3行1列目の要素　3行2列目の要素 4行1列目の要素　4行2列目の要素 こういうイメージに変更したいです。

  • HTML
  • 回答数1
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

というか、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」は基本ですから、単純にtable書いてスタイルシートで調整するほうが楽ですし危険もない。そもそも上記に書かれているようにメンテナンスも楽になる。失敗したらスタイルシート書き換えればよい。 　スタイルシート使うと、HTML使うよりはるかに多彩なデザインができますよ。HTMLシンプルなのでメンテナンスも楽。 ※タブは　(全角スペース)に置換してあるので戻す。 <table border="1" summary="サンプルの表"> 　<tbody> 　　<tr> 　　　<th>一列目</th><th>二列目</th> 　　</tr> 　　<tr> 　　　<td>1行1列目の要素M</td><td>1行2列目の要素</td> 　　</tr> 　　<tr> 　　　<td>2行1列目の要素</td><td>2行2列目の要素</td> 　　</tr> 　　<tr> 　　　<td>3行1列目の要素</td><td>3行2列目の要素</td> 　　</tr> 　　<tr> 　　　<td>4行1列目の要素</td><td>4行2列目の要素</td> 　　</tr> 　</tbody> 　　</table> に対して、<head></head>内に <style type="text/css"> <!-- table[summary="サンプルの表"]{ border-collapse:separate;/* 分離して描く */ border-spacing:0px 30px;/* 左右の間隔が0px、縦の間隔が30px */ border-style:double; border-color:red; border-width:5px; } table[summary="サンプルの表"] th, table[summary="サンプルの表"] td{ border-style:solid; border-color:blue; border-width:2px 0;/* ボーダーの巾上下2px 左右0 */ padding: 0 20px; } table[summary="サンプルの表"] tr:nth-child(2n) td{ background-color:yellow; } table[summary="サンプルの表"] th{ background-color:aqua; } --> 　</style>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでの表の作成について

    CSSでの表の作成方法を教えてください。 table要素使わずCSSのみで表の作成は可能でしょうか？ 作成したい表は　2列10行の表で、列幅は　それぞれ違った幅を指定、行の高さも　それぞれの行によって　高さを変えたいと思っています。 背景色の指定、ボーダーの指定もしたいです。 table要素使わずCSSのみで表を作成するには、どうしたらいいのか教えてください。 初心者なので、CSSの内容とHTMLの内容（ソース）を書いたものがあると助かります。 どうかよろしくお願いします。

  • htmlの作成方法をCSSに移行した方にお聞きします。

    こちらは4年前にhtmlを習得しました。会社ではhtml担当が自分しかいないので現在のhtmlの作成方法について質問します。 本屋に行きましたら、DREAM WEVER8の解説書として、htmlにはdiv要素やimgの要素の指定をして、細かい指定はCSSでしているのを見ました。テーブルと同じレイアウトをCSSでしてまして、CSSは本格的に使用されはじめていると感じました。 数年前から言われていたように思いますが、実際CSSを多用するのをイメージできたのはこの本を見てからです。そこでweb制作会社のデザイナーやフリーの方にお聞きしたいのですが、 1）tableで全体のレイアウトを作っていたのをCSSに変更されたのはいつぐらいでしょうか。 2）tableでできたのにCSSでできなくなったことはありますか。 3）完全にCSSでできないことは、html中にtableを置くことはありますか。 4）CSSで作成することに限界があるとしたらどこでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • CSSのテーブルの縦100%について

    CSSの縦100%指定について伺います。 現在、三行二列のテーブルを、縦100%のレイアウトにしようとしております。 上段一行は一列に統合して、ヘッダーを入れます。 下段一行は一列に統合して、フッターを入れます。 一行目と三行目の縦幅をピクセルで指定して、 二段目の高さをautoに指定し、 テーブル全体の縦の高さを100％にして、 ウィンドウサイズが変わったときに二段目のみが伸縮するように 出来るものでしょうか。 お分かりの方、どうぞご助言をお願いいたします。

  • CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？

    CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？ 例えば、HTMLで一行に3列になるよう以下の様に記述した時に <table> <tr> <td> <p>テキスト左</p> </td> <td> <p>テキスト中</p> </td> <td> <p>テキスト右</p> </td> </tr> </table> CSSでのそうさのみによって 見栄え的に縦3行、横1列に見えるようにできますでしょうか？ 幅などをピクセル制限したりするのでも構いません。 もしHTMLで実現するとするならば <table> <tr> <td> <p>テキスト左</p> </td> </tr> <tr> <td> <p>テキスト中</p> </td> </tr> <tr> <td> <p>テキスト右</p> </td> </tr> </table> 上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。 もし、何らかの形で実現できそうな場合がありましたらアイディアをください。 お忙しいところお手数おかけしますが、よろしくお願いいたします。 ※CSS記述の変更のみ。 ※特定のブラウザに依存させたくない。 ※Javasprictは使用しない。

  • tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取

    tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取りたいです。 jqueryのSortableプラグインを調べ、これならできそうとプログラムを組み、 trの一行ごとならばできました。 やりたいことは、rowspanで連結されている<tr>を2行以上まとめて１つの要素とみなし、 入れ替えたいのですが、 jqueryのSortableでできますでしょうか？ <table> <tr><td rowspan="2">一行目</td><td>あいう</td> <tr><td>えお<td></tr> <tr><td rowspan="2">二行目</td><td>かきく</td> <tr><td>けこ<td></tr> </table> <table>を入れ子にすれば実現はできそうですが、 ちょっとCSSの関係もあり、その方法を採用するのは難しい気がしています。

    • ベストアンサー
    • AJAX
  • CSSで<table>を横に並べるように指定する方法

    今までは、テーブルを入れ子にしてデザインしていたものを できる範囲でCSSに変更したく思っています。 本体が２カラムにしてあるページのメイン部分に、 小さなテーブルが横に４つ、縦に10から50個ほど入っています。 今までは テーブルが４つ入りのテーブルを縦にずらっとならべていました。 ブロック要素であるテーブルをスタイルシートでインライン要素に変える http://himajin.moo.jp/html/table/table3.html 上記サイトさんにあるような方法でやるとしたら 具体的にどのようなCSSを書けばよいのでしょうか？ また、他に方法ありましたら宜しくご教授願います。

    • 締切済み
    • CSS
  • foreachの間にテーブルの<TR>を出力

    HTMLのテーブルにデータを入れたいのですが、 6列ごとに改行の<tr></tr>を入れる方法が分かりません。 下のように並べたいです [ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME] [ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME] データは1～12個きますので、一行の時と二行にわたる時、<td></td>に何もデータが入らない時もあります。 今現在このような感じです。 <table width="600"> <tr> <?php foreach ($item_array as $item){ ?> <td width="100" align="center"> <?=$str = mb_strimwidth($item['ITEMNAME'], 0, 100, "...");?> </td> <?php } ?> </tr> </table> どうか宜しくお願い致します。 既に他で同じ内容が出ていますが、そちらでは理解して応用できませんでしたので改めて質問させて頂きました。ごめんなさい。

    • ベストアンサー
    • PHP
  • CSSレイアウトで、画像を常に画面の真ん中にする方法について。

    質問失礼いたします。 テーブルでレイアウトしたサイトをCSSレイアウトに変更したいと考えております。 現在は、1行1列の100％×100％のテーブルに「align="center" valign="middle"」を設定することで、画像（コンテンツ）を常に画面の真ん中に表示するように設定しています。 ジャバスクリプトを使わずに、 DIVタグなどを使って、CSSレイアウトでこれと同じように表示するにはどうしたらよいでしょうか？ いろいろ調べたり、聞いたりしましたが、いまいちスムーズな方法がみつからず、困っております。 どなたかご存知の方がおりましたら、具体的に教えいただければ大変うれしいです。 宜しくお願いいたします。

  • CSSを用いてのマウスオーバー

    CSS勉強中です。 今やろうとしていることができるのか不安になってきました。 可能ならサンプルコードを教えて頂けませんでしょうか。 ２行×４列のテーブルで 一行目の４つのセルにマウスオーバーした時、 ２行目の連結セルの背景を変えたいのですが 可能でしょうか？ テーブルを使ってのhoverはなんとかわかったのですが 別の行を修飾する方法がわかりません。 どうか宜しくお願い致します。

    • 締切済み
    • CSS
  • エクセルで1列置きに書式変更

    お世話になります。 シートの特定の範囲のみセルの書式を変えたいと思っています。 具体的にはシートの一部について 1行置きに書式を変えたいです。 但し、1行置きとは言っても一部は変えたくない場所があります。 現状は変更したい範囲を手動で飛び地で選択し、まとめて変更しています。 これを簡潔にできないでしょうか？ 現状の表は以下の様な感じです 　　　　　A列　　　　B列　　　　C列・・・・ 1行目 2行目 3行目 ・ ・ ・ この内１・３・５・・・・の行について書式を変更したいのです。 ただし、A列についてはセルを結合していることもあり変更はしたくありません。 また、このシートにはいくつかの表が混在しています。 それらの表それぞれについて1行置きに書式を変えたいと思っています。 したいことを一言で言うと ・変更したいセル範囲を手動で選択する。 ・その後、なんらかの方法（マクロ？）にて選択したところの書式を1行置きに変える。 こういうことは可能でしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する