<TABLE border="0" style="border:solid 1px blue;" bgcolor="white">

<TR><TD>
<TABLE border="0" style="border:dotted 1px dodgerblue;">
<TR><TD align="center">
<TABLE border="0" cellpadding="3" cellspacing="3" width="横幅"style="font-size:○px;">
<TR><TD style="border-bottom:dotted 1px dodgerblue;">ここに文字</TD></TR>
<TR><TD style="border-bottom:dotted 1px dodgerblue;">ここに文字</TD></TR>
<TR><TD style="border-bottom:dotted 1px dodgerblue;">ここに文字</TD></TR>
<TR><TD style="border-bottom:dotted 1px dodgerblue;">ここに文字</TD></TR>
<TR><TD style="border-bottom:dotted 1px dodgerblue;">ここに文字</TD></TR>
</TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>

このテーブルを二箇所、個々で直接記述してテーブルタグをしていたのですが
面倒くさいのでスッキリさせたく、
スタイルシートで指定して使いたいんですがスタイルシートで指定する場合のタグの描き方
をズバリ教えて下さい
(テーブルで囲むところの記述方法<body></body>の間に書く<table></table>もあわせて。)

お返事くださる方は↓こういう感じに返答していただければありがたいです
どうぞ教えて下さい。よろしくお願いします
タグ講座などの紹介はいりません。
<HTML> <HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--
TABLE { }
-->
</STYLE> </HEAD> <BODY>
<TABLE> </TABLE> </BODY> </HTML>

回答の条件
  • 1人2回まで
  • 登録:2006/05/10 02:36:02
  • 終了:2006/05/17 02:40:03

回答(5件)

id:vector_xenon No.1

vector回答回数113ベストアンサー獲得回数42006/05/10 03:08:25

ポイント20pt

<head>

<style type="text/css">

.TableClass {

 font-size: ○px;

 border-size: 0px;

 width: 横幅;

}

.TDClass {

 border-bottom: 1px dotted dodgerblue;

 padding: 3px;

}

</style>

</head>

<body>

<table cellspacing="3" class="TableClass">

<tr>

 <td class="TDClass">・・・</td>

 <td class="TDClass">・・・</td>

 <td class="TDClass">・・・</td>

</tr>

</table>

</body>


こんな感じじゃないでしょうか。

id:ookawa-man

TableClass {

 font-size: ○px;

 border-size: 0px;

 width: 横幅;

}

の場合横幅を例えば500にした場合

ここに文字
ここに文字
ここに文字
ここに文字
ここに文字
</td></tr>

↑の様に右側と左側のサイズ(?!)を指定場合はどうすればいいのでしょうか?

あと文字をセンターと指定しなくてもセンターになるんですか?

あわせて教えてくださる方よろしくお願いします

2006/05/10 04:50:39
id:berryberyy No.2

berryberyy回答回数24ベストアンサー獲得回数12006/05/10 03:29:10

ポイント20pt

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title></title>

<STYLE TYPE="text/css"></p> <p>table.borderdot {</p> <p> border:solid 1px blue;</p> <p> background: #fff;</p> <p>}</p> <p>table.borderdot TABLE {</p> <p> border:dotted 1px dodgerblue;</p> <p>}</p> <p>table.borderdot table tr td {</p> <p> border-bottom:dotted 1px dodgerblue;</p> <p> font-size: small;</p> <p>}</p> <p></style>

</head>

<body>

ここに文字
ここに文字
ここに文字
ここに文字

</body>

</html>

id:yotaca No.3

よたか回答回数426ベストアンサー獲得回数462006/05/10 09:09:59

ポイント20pt

スタイルシートを使用する場合、テーブルを入れ子にする必要も無いと思いますが、ソース自体は手を入れずにスタイルシートのみで記述しました。

横幅と、フォントサイズについては、コメントアウトしてます。

あと、cellspacingにあたる部分(padding)が設定により、見え方が変わることがあります。気になるときは、paddingとmarginを外し、ソース中でcellpadding="3" cellspacing="3" を指定してください。

以下ソースになります。


<HTML><HEAD>

<STYLE TYPE="text/css">

<!--

table#out {bgcolor: #fff;border:solid 1px blue;}

table#med {border:dotted 1px dodgerblue;}

table#med td{text-align:center;}

table#med table{border:none;/*width: 500px;font-size:12pt;*/}

table#med table td{padding:3px;margin:3px;border-bottom:dotted 1px dodgerblue;}

-->

</STYLE>

</HEAD>

<BODY>

<TABLE id="out"><TR><TD>

<TABLE id="med"><TR><TD>

<TABLE>

<TR><TD>ここに文字</TD></TR>

<TR><TD>ここに文字</TD></TR>

<TR><TD>ここに文字</TD></TR>

<TR><TD>ここに文字</TD></TR>

<TR><TD>ここに文字</TD></TR>

</TABLE>

</TD></TR></TABLE>

</TD></TR></TABLE>

</BODY></HTML>

id:tezcello No.4

tezcello回答回数460ベストアンサー獲得回数692006/05/10 10:16:06

ポイント20pt

質問中と回答1へのコメントのhtnl文に正しくない記述があるように思いますが、まぁこういう意味だろうという事で...

style タグ内で

div.TableClass {

width: 500px;

border: solid 1px blue;

background-color: white;

padding: 2px;

}

.TableClass div {

border: dotted 1px dodgerblue;

padding: 3px;

}

.TableClass div table {

width: 100%;

font-size: 20px;

}

.TableClass div table td {

border-bottom: dotted 1px dodgerblue;

text-align: center;

}

.w100 {

width: 400px;

}

.w100 {

width: 100px;

}

と定義しておいて

< table>

< tr>< td class="w100">ここに文字の長いやつ</td>< td class="w400">ここに文字</td></tr>

< tr>< td class="w100">ここに文字の長いやつ</td>< td class="w400">ここに文字</td></tr>

< tr>< td class="w100">ここに文字の長いやつ</td>< td class="w400">ここに文字</td></tr>

</table>

という感じで。

(table関係のタグは投稿の都合でブランクが含まれています。コピー&ペースト時はご注意ください。)

1行に1項目しかない場合は、TD タグでの class 属性は不要です。

id:chankaz No.5

chankaz回答回数53ベストアンサー獲得回数32006/05/10 06:43:31

ポイント20pt
<html>
<head>
<title>入れ子テーブル</title>
<style type="text/css">
<!--
table.main {
 border : solid 1px blue;
 background : #fff;
}
table.main table {
 border : dotted 1px dodgerblue;
}
table.main table table {
 width : 500px;
 margin : 3px;
 padding : 3px;
}
table.main table td {
 text-align : center;
}
table.main table table td {
 border-bottom : dotted 1px dodgerblue;
 font-size : ○%;
}
table.main table table td.col1 {
 width : 100px;
}
table.main table table td.col2 {
 width : 400px;
}
-->
</style>
</head>
<body>
<table class="main">
<tr>
<td>
 <table>
 <tr>
 <td>
  <table>
  <tr>
  <td class="col1">ここに文字</td>
  <td class="col2">ここに文字</td>
  <td>ここに文字</td>
  <td>ここに文字</td>
  <td>ここに文字</td>
  </tr>
  </td>
  </tr>
  <tr>
  <td class="col1">ここに文字</td>
  <td class="col2">ここに文字</td>
  <td>ここに文字</td>
  <td>ここに文字</td>
  <td>ここに文字</td>
  </tr>
  </td>
  </tr>
  </table>
 </td>
 </tr>
 </table>
</td>
</tr>
</table>
</body>
</html>
id:ookawa-man

答えてくださった方々有難うございました。

2006/05/11 00:53:19

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません