スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト模写(Paul) 4 配置 複雑なテーブルを作成する。

4.配置 複雑なテーブルを作成する。
 行数や列の条件を詳細に指定する。

今回は、店舗情報のページを作成していきます。
メインページをtableで構成していきます。
以下の画像が完成イメージです。

20140524_2.jpg

tableの構成をわかりやすくした図がこちら

20140524_3.jpg

この図のコードから見ていきましょう。
<table border="1">
 <tr>
 <td colspan="3">お店の名前</td><td rowspan="4">画像1<br>画像2</td>
 </tr>
 <tr>
  <td colspan="3">お店の説明</td>
 </tr>
 <tr> 
  <td colspan="3">お店の情報</td>
 </tr>
 <tr>
  <td>お店外観</td><td> </td><td>店内画像</td>
 </tr>
</table>

まず、「お店の名前、お店の説明、お店の情報」はその下の行にある「お店外観、空白、店内画像」この3つの列の結合したものなので、colspan="3"を設定します。
続いて右の列「画像1、画像2」は左の4行を縦に結合しているので、rowspan="4"を設定します。

これを元にサイトの構成に合わせていきます。

<table width="680" height="183" border="0" cellspacing="0" cellpadding="0">
     <tr><td width="350" height="110" colspan="3"><h3>XXXXX店</h3><br>
             お店の説明<br>
           </td>

           <td width="330" rowspan="11" class="a">
            <img src="" width="250" height="220" alt"お店外観"/><br><br>
            <img src="" width="250" height="220" />
           </td>
      </tr>
      <tr>
        <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
      </tr>
      <tr>
        <td colspan="3"> 電話   |000-000-0000</td>
      </tr>
      <tr>
        <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
      </tr>
      <tr>
        <td colspan="3"> 営業時間|10:00~19:00</td>
      </tr>
      <tr>
          <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
          <td width="290"></td>
      </tr>
      <tr>
          <td colspan="3"> 住所   |住所00-11</td>
      </tr>
        <tr>
         <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
      </tr>
            <tr><td><br></td></tr>
      <tr>
         <td width="120"><img src="" width="120" height="200" /></td>
         <td width="5"> </td>
         <td width="214"><img src="" width="120" height="200" /></td>
      </tr>
      <tr>
        <td><span class="s">お店の外観</span></td>
        <td></td>
        <td><span class="s">お店の店内</span></td>
      </tr>
</table>

このコードの画像がこちら。

20140524_1.jpg





トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。