クーポンや、他の関連画像の配列を正しくレイアウトしたい。

Question

いつもお世話になっております。ヤフーショップのＴＯＰページはクーポンや画像の
配列がうまくいきません。どうすれば正しくレイアウトできますか？
宜しくお願い致します。

https://store.shopping.yahoo.co.jp/auroraweb3/

Accepted Answer

ECマスターズの伊藤です。

> ヤフーショップのＴＯＰページはクーポンや画像の
> 配列がうまくいきません。どうすれば正しくレイアウトできますか？

こちらのクーポンの配置は、TABLEタグをご利用して設置して頂いておりますでしょうか。
確認させていただきましたところ、TABLEタグが正しく記述されていないようでした。

TABLEタグの基本は、下記の通りとなっております。
コンテンツはかならず、ここに記述します
＝＝＝＝＝＝＝＝＝＝＝＝＝



コンテンツは必ずここにはいる



＝＝＝＝＝＝＝＝＝＝＝＝＝

以下の箇所に記述すると、表示が崩れてしまいます。
＝＝＝＝＝＝＝＝＝＝＝＝＝

※ここに記述すると崩れます

※ここに記述すると崩れます


※ここに記述すると崩れます

※ここに記述すると崩れます

＝＝＝＝＝＝＝＝＝＝＝＝＝

今回の場合は、一部が下記の通りとなっていたため、表示崩れが発生していました。
＝＝＝＝＝＝＝＝＝＝＝＝＝





ここに記述されていました

trがなくtdが始まっていました


＝＝＝＝＝＝＝＝＝＝＝＝＝


また、
colspan → 横の連結
rowspan → 縦の連結
となっています。

今回の配置ですと、
横3列を連結
縦2列を連結 クーポン　クーポン
　　　　　　クーポン　クーポン
となるため、
colspan="3"
rowspan="2"
の順で配置する必要がございます。

上記を踏まえまして、改めてHTMLを記述しますと、下記の通りとなります。
＝＝＝＝＝＝＝＝＝＝＝＝

  
    
  
  
    
    
      
      
    
    
      
      
    
  
  
    
      
      
    
    
      
      
    
  

＝＝＝＝＝＝＝＝＝＝＝＝