HTMLとCSSにて添付した画像のようなテーブルを組むにはどうしたらよいのでしょうか？

Question

ysog

8

8もっと見る

70pt

ウェブ制作

HTMLとCSSにて添付した画像のようなテーブルを組むにはどうしたらよいのでしょうか？

一番下の行の左側を空白かつ枠線なしにする方法が解らず困っています。

回答の条件

1人2回まで

登録：2010/10/14 19:33:23
終了：2010/10/14 20:04:09

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Answer 1 · 2010-10-14T19:50:19+09:00

背景とかは省略しているけど、こんな感じ？

<style>
.xxxx {
	border-collapse: collapse;
}
.xxxx TD {
	border: 1px solid black;
}
</style>

<table class="xxxx">
<tr>
	<td>見出し１</td>
	<td>1234</td>
	<td>見出し３</td>
	<td>1234</td>
</tr>
<tr>
	<td>見出し１</td>
	<td>1234</td>
	<td style="border: none;"></td>
	<td style="border: none;"></td>
</tr>
<tr>
	<td style="border: none;"></td>
	<td style="border: none;"></td>
	<td>見出し３</td>
	<td>1234</td>
</tr>
</table>

Galapagos · Answer 2 · 2010-10-14T19:59:54+09:00

以下のようにすればいいでしょう。

<html>
<head>
<style type="text/css">
#table {
    border-width: 0px 0px 0px 0px;
}
#td1 {
    width: 100px;
    background-color: orange;
    border-style: solid;
    border-color: black;
    border-width: 1px 1px 1px 1px;
}
#td2 {
    width: 100px;
    text-align: right;
    border-style: solid;
    border-color: black;
    border-width: 1px 1px 1px 1px;
}
#td3 {
    width: 100px;
    border-width: 0px 0px 0px 0px;
}

</style>
</head>
<body>
<table>
<tr>
<td id="td1">見出し１</td><td id="td2">1234</td>
<td id="td1">見出し３</td><td id="td2">1234</td>
</tr>
<tr>
<td id="td1">見出し２</td><td id="td2">1234</td>
<td id="td3"></td><td id="td3"></td>
</tr>
<tr>
<td id="td3"></td><td id="td3"></td>
<td id="td1">見出し４</td><td id="td2">1234</td>
</tr>
</table>
</body>
</html>

HTMLとCSSにて添付した画像のようなテーブルを組むにはどうしたらよいのでしょうか？

回答（2件）

a-kuma3497321542010/10/14 19:50:19

Galapagos963892010/10/14 19:59:54

コメント（0件)

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