人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

<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>

●質問者: ookawa-man
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:スタイルシート スッキリ ズバリ タグ 記述
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● vector
●20ポイント

<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>


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

◎質問者からの返答

TableClass {

font-size: ○px;

border-size: 0px;

width: 横幅;

}

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

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

</td></tr>

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

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

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


2 ● berryberyy
●20ポイント

<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>


3 ● よたか
●20ポイント

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

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

あと、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>


4 ● tezcello
●20ポイント

質問中と回答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 属性は不要です。


5 ● chankaz
●20ポイント
<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>
◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ