テーブルの作り方で不明な点があります

写真のようなテーブルを作りたいと考えています。
若干雑でごめんなさい。Aの長さは上の建物、3階建を合わせた長さと同じになります。
つまり紙で書いた位置に建物と3階建と書いた間の線がなくなったテーブルを作りたいということです。

<table>
<tbody>
<tr>
<th style="width: 100px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important" scope="row">建物</th>
<td style="width: 300px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
<td style="width: 100px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
</tr>
<th style="width: 100px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important" scope="row">建物</th>
<td style="width: 300px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
<td style="width: 100px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
</tr>

</table>
コード

kei344

2016/06/25 02:01

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答3件

html テーブル作りの簡易法としてこんなものがあります。
(html になれてくれば、こういったものを使うことは稀です。
初心者には有用なツールかもしれません)

HTMLの表を簡単に作成。複雑な表の結合も文字の入力も簡単に出来ます。 https://tabletag.net/ja/

GUI html colspan
で google 検索してみつけました。
他にも、目的にあったツールをみつけることができると思います。

投稿2016/06/24 23:02

katoy

総合スコア22324

raccy

2016/06/24 23:07

こんな便利な物があったとは…

行動規範の内容に同意します

参考ＵＲＬ

テーブルのセルを結合するには<td>タグにcolspan="結合したい数"という属性をつけることで実現されます。
今回の場合だと、Ａの<td>が

HTML
1<td colspan=2>A</td>

という感じの指定になります。

参考ＵＲＬを参照してご自身で色々と試してみてもらって、
それでもダメそうなら出来ない部分を質問に追記して下さい。

投稿2016/06/24 22:06

tanat

総合スコア18713

rina0366

2016/06/24 22:13

すみません。初心者なものでもし書いてあるタグの部分で上記のタグを追加する場合どこに入れるか明記していただけないでしょうか？

行動規範の内容に同意します

ベストアンサー

要素をtdにしてcolspan="2"(横の要素と連結する数を2)を設定してみました。

html
1		<table>
2		<tbody>
3		<tr>
4		<th style="width: 100px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important" scope="row">建物</th>
5		<td style="width: 300px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
6		<td style="width: 100px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
7		</tr>
8		<tr>
9		<th style="width: 100px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important" scope="row">建物</th>
10		<td style="width: 300px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
11		<td style="width: 100px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">3階建</td>
12		</tr>
13
14		<tr>
15		<td colspan="2" style="width: 100px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important" scope="row">A</td>
16		<td style="width: 100px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">B</td>
17		</tr>
18
19		</table>