tableコーディング 幅ピッタリにしたい。

tableコーディングについて詳しい方お助け下さい。
宜しくお願いいたします。

楽天のページを作成しています。html4で組んでいます。
バナーを並べる為にtableを作成しようと考えています。

talbeのwidthを673pxにし、添付画像のように大、小のバナーを並べ、かつ、幅が揃うようにしたいです。

ただ、大きいバナーと小さいバナーのサイズをどうしたら、ピッタリ幅があうのか計算方法がわかりません。


どのように計算して、幅をピッタリ合わす事が出来ますでしょうか？

宜しくお願いいたします。

質問者からの補足コメント

• 

  回答ありがとうございます。
  してみたのですが、うまくできませんでした。
  
  添付画像のようになってしまいます。

  
  No.1の回答に寄せられた補足コメントです。 補足日時：2016/11/01 18:21

• 

  回答ありがとうございます。
  うまくいきました。理想に近いかたちです。
  
  本当にありがとうございます。
  
  追加で質問させて下さい。
  colspanの使い方についてもご教授お願いできますでしょうか？
  
  colspanについても調べたのですが、何故この指定方法でうまくいっているか理解できてないです。
  
  １行目の<tr>間でcolspanを両方とも指定していて、２行目の<tr>間で真ん中だけcolspanを指定しているのは何故でしょうか？
  
  大変申し訳ございませんが、宜しくお願いいたします。

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/11/01 18:33

No.4 ベストアンサー 回答者： yambejp 回答日時： 2016/11/01 20:29

#2です。

実際には列は４列あるのです
それを連結することで2列と3列にしています

<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td colspan=2 class="red"></td>
<td colspan=2 class="yellow"></td>
</tr>
<tr>
<td class="aqua"></td>
<td colspan=2 class="lime"></td>
<td class="fuchsia"></td>
</tr>
</table>

この回答へのお礼

ありがとうございます。
理解しました！！！

本当に助かりました！

お礼日時：2016/11/02 09:35

No.3 回答者： daaa- 回答日時： 2016/11/01 18:32

通りすがりです。

No.1さんのケアレスミス。すみません。
colsapn－＞ colspan

No.2 回答者： yambejp 回答日時： 2016/11/01 18:01

テーブルでやるようなことではないように思いますが

こんな感じでどうでしょう。
（端数は適当に処理されているようです）

<style>
table {border:0px solid;border-collapse:collapse;width:673px;}
td.red{background-Color:red;width:336px;}
td.yellow{background-Color:yellow;336px;}
td.aqua{background-Color:aqua;width:224px;}
td.lime{background-Color:lime;width:224px;}
td.fuchsia{background-Color:fuchsia;width:224px;}
</style>
<table>
<tr>
<td colspan=2 class="red"></td>
<td colspan=2 class="yellow"></td>
</tr>
<tr>
<td class="aqua"></td>
<td colspan=2 class="lime"></td>
<td class="fuchsia"></td>
</tr>
</table>

No.1 回答者： t_fumiaki 回答日時： 2016/11/01 18:00

横、つまりcolumnを統合する。

一番上は2カラムで下は３カラム。
下のカラムを基準にすると上は1.5。上を基準にすると下は2/3。
いずれも端数は出るから、横カラム数を6にすればよい。

673は3で割り切れないから具合が悪い。672なら2と3で割り切れる。
例だからcssを使わずhtmlだけにする。

<table width="672px">

<tr>
<td colsapn="2" width="336px">コンテンツ</td>
<td colsapn="2" width="336px">コンテンツ</td>
</tr>

<tr>
<td colsapn="3" width="224px">コンテンツ</td>
<td colsapn="3" width="224px">コンテンツ</td>
<td colsapn="3" width="224px">コンテンツ</td>
</tr>

</table>