tablleタブ基礎

■tableタグについて■
横並べにする場合はliよりもtableの方がよいときもある。間の調整はth/tdにwidthつけるかそれぞれにpaddingをつけて調整。

 

▲例(牧場サイト)▲
<table>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
<tr>
<th width=”170″>牧場名</th>
<td width=”300″>玉名牧場</td>
</tr>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
<tr>
<th>代表者名</th>
<td>矢野希実</td>
</tr>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
<tr>
<th>郵便番号</th>
<td>865-0009</td>
</tr>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
<tr>
<th>住所</th>
<td>熊本県玉名市三ツ川1024-2</td>
</tr>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
<tr>
<th>電話番号</th>
<td>0968-74-9248</td>
</tr>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
<tr>
<th>ファックス番号</th>
<td>0968-74-9381</td>
</tr>
<tr>
<td colspan=”2″ class=”line”><img src=”image/acecss/line.png” width=”476″ height=”5″ alt=””/></td>
</tr>
</table>

 

例②
<table>
<tr>
<th><img src=”image/acecss/num01.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>玉名方面から県道4号線を南関方面へ</td>
</tr>
<tr>
<th><img src=”image/acecss/num02.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>三ツ川小学校が左に見えてきます。</td>
</tr>
<tr>
<th><img src=”image/acecss/num03.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>その先、左側に簡易郵便局があるのでさらにその先約100m行き左折します。</td>
</tr>
<tr>
<th><img src=”image/acecss/num04.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>道なりに800mくらい行くと玉名牧場の看板あります。</td>
</tr>
<tr>
<th><img src=”image/acecss/num05.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>その先は角ごとの看板どおりに進んでください。</td>
</tr>
</table>