プロが教えるわが家の防犯対策術!

cssで、1行2段のtableを記述するには?


→ htmlのページに以下を挿入しました。

<table>
<tr>
<td width="2"></td>
<td width="588"></td>
</tr>
</table>



→ htmlのページの<head>と</head>の間に以下を挿入しました。

<link rel="stylesheet" type="text/css" href="table.css">


→ table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。

TABLE{width : 640px;border-width : 0px 0px 0px 0px;
padding-top : 0px;padding-left : 0px;padding-right : 0px;
padding-bottom : 0px; background-color : #FFFFFF;}



→ table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか?
いろいろ試しましたが、うまくいきません。

<tr>
<td width="2"></td>
<td width="588"></td>
</tr>



→ うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。

<table>
</table>

よろしくおねがいします。

このQ&Aに関連する最新のQ&A

CSS 表」に関するQ&A: 【CSS】表に線を入れる

A 回答 (2件)

こんにちは。



外部ファイル(***.css)は1つでいいはずです。
1つの外部ファイルにスタイルを設定するのです。

お分かりだと思いますが、
スタイルの設定の仕方には
1.外部ファイル
2.クラス
3.各々の設定
があります。

1.外部ファイル
外部ファイルをアップロードしたディレクトリ内の全てのファイルに対して
スタイルを一括して適用します。

2.クラス
ファイル(ページ)ごとにファイル内に記述して
記述したファイルにだけに適用します。

3.各々の設定
文字やテーブルごとに1つずつ適用します。

ファイル数がそれほど多くない場合は
クラスで設定されたほうが分かりやすいと思いますよ。
特にテーブルを多用する場合は。

例えばご質問のことをクラスを使って設定すると
(1行2段→1行2列)

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
.a{ width : 2px;}
.b{ width : 588px;}
.c{ border-width : 0px 0px 0px 0px; width : 640px; padding-top : 0px;
padding-left : 0px; padding-right : 0px; padding-bottom : 0px;
background-color : #FFFFFF;}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE class="c">
<TBODY>
<TR>
<TD class="a">1</TD>
<TD class="b">2</TD>
</TR>
</TBODY>
</TABLE>
</BODY>

閲覧者に仕組みを見せたくないと言うことでしょうか。
もし、そうであっても
外部ファイルをダウンロードすることは可能です。

スタイルシートは画面上の見た目を整えると
私自身認識しています。
ですから、スタイルシートを使ってテーブルを構成することは
残念ながら不可能です。
    • good
    • 0
この回答へのお礼

「クラス」の意味がわかりました。
cssでは、テーブルを構成できないこともよくわかりました。
1行2列のテーブルの設定方法もわかりました。

重ね重ねありがとうございました。
おかげざまで1段高見にたつことができました。

お礼日時:2002/09/26 11:08

→ うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。



<table>
</table>    とありますが・・・・・・

css スタイルシートは表示方法を統一する為に使われるのが一般的ですし、
タグ一つ一つに属性を書き込む手間を省くのに効果的だとは思いますが、勘違い
されてるように思います。

スタイル:背景色・位置・文字の色・枠線の表示/非表示・表の広さ(サイズ)etc
ですから<cssで、1行2段のtableを記述>というのはできません。
上記のように記述出来ても肝心の表の中身(セルの内容は記入できませんが?)

例)<td>ああでもないこうでもない</td>

前回の回答者の方もかかれてましたURLはご覧になりましたでしょうか?

スタイルシートの部分は↓(かなり詳しく書いてあります)
http://tohoho.wakusei.ne.jp/wwwcss1.htm#What

○同じタグに違うスタイルを指定したい場合は外部スタイルシートの場合
クラス名を指定します。

TD.2{width:2px;}
TD.588{width:588px;}

でHTMLのボディタグの中に
<table>
<tr>
<td class="2"></td>
<td class="588"></td>
</tr>
</table>
と記述します。

(現実的に2pxのセルは?ですが「grizzly」さんの例を参考にしました。)
横幅だけの指定ですから記述が楽になるどころかかえってめんどくさいですが
他の(プロパティ:値;)を複数指定したい場合は便利なわけです。
え~~と、当方のへぼな説明より件のURLをしっか見てください。

もし失礼な表現等がありましたらお許しください。
    • good
    • 0
この回答へのお礼

cssは、色、空白、フォントなどの属性を規定するのですね。勘違いしていました。
Yahoo!のcssの項を見て、ようやくわかりました。

http://dir.yahoo.co.jp/Computers_and_Internet/In …

テーブルはひとつにまとめました。
ありがとうございました。

お礼日時:2002/09/26 10:59

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Q日付入力欄の表示形式を自動的に「yyyy/mm/dd」形式にしたい。

FORMによる入力ページを作成しているのですが、日付入力の欄に「yyyymmdd」の形式で入力したものをフォーカスが移動した時点で、自動的に「yyyy/mm/dd」の表示形式に変更して表示し、なおかつフォームデータを送信したした時のデータは「yyyymmdd」の形式で送信したいと思っています。(※データベース上はyyyymmddの為)
同様のスクリプトを探してみたのですが、なかなか見つからず困っています。
Javascriptではなく、他の方法でも可能な方法があればそちらでもかまいません。
よろしくお願いいたします。

Aベストアンサー

onFucusとonBlurで整形するといいのでは?
もちろん応用で送信するときにyyyymmddにすることは
可能ですが、そもそも「データベース上はyyyymmddの為」
ということはなんのインジェクションもなしにデータ
ベースに挿入しようとしていますので、これは問題外。
破壊的なデータを送られてきたらどうするつもりでしょう?

送る側でやってもいいですが、送られてきた側がサーバー上
のプログラムでデータの整合性をみてスラッシュを
はずす方が効率的だと思います。

ただ普通はデータベースならDATE型で管理する物なので
この手の作業は発生しませんが・・・。

<script type="text/javascript">
function dateFormat(obj,flg){
var str0=obj.value
if(flg){
if(str0==""){
return
}else if(str0.match(/[0-9]{8}/)){
str1=str0.substring(0,4)+"/"+str0.substring(4,6)+"/"+str0.substring(6,8)
obj.value=str1
}else{
alert("8桁の数字を入力してください")
obj.value="";
}
}else{
str1=str0.split("/").join("");
obj.value=str1
}
}
</script>
<form>
<input type="text" size="15" onBlur="dateFormat(this,true)" onFocus="dateFormat(this,false)">
</form>

onFucusとonBlurで整形するといいのでは?
もちろん応用で送信するときにyyyymmddにすることは
可能ですが、そもそも「データベース上はyyyymmddの為」
ということはなんのインジェクションもなしにデータ
ベースに挿入しようとしていますので、これは問題外。
破壊的なデータを送られてきたらどうするつもりでしょう?

送る側でやってもいいですが、送られてきた側がサーバー上
のプログラムでデータの整合性をみてスラッシュを
はずす方が効率的だと思います。

ただ普通はデータベースならDATE型で...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む


人気Q&Aランキング