ThaiSEOBoard.com

ความรู้ทั่วไป => General (ถามคุยวิชาการ IM) => ข้อความที่เริ่มโดย: saxo4 ที่ 27 กุมภาพันธ์ 2012, 09:26:28


หัวข้อ: ช่วยสอนเขียน HTML การจัดวางรูปหน่อยครับผม
เริ่มหัวข้อโดย: saxo4 ที่ 27 กุมภาพันธ์ 2012, 09:26:28
ช่วยสอยเขียน HTML การจัดวางรูปหน่อยครับผม รูปแบบประมาณนี้ครับ ผมลองทำเเล้ว
(http://1.bp.blogspot.com/-jnnJdcHgImA/T0roc5HF6mI/AAAAAAAAArA/_boUx45-MIk/s1600/545315.png)
ตรงช่องว่างระหว่างรูปไม่เท่ากันครับ บางครั้งก็ ติดกันไปเลย ต้องเขียนยังไงดีครับ  :wanwan017: :wanwan017:

หัวข้อ: Re: ช่วยสอนเขียน HTML การจัดวางรูปหน่อยครับผม
เริ่มหัวข้อโดย: AM-PM ที่ 27 กุมภาพันธ์ 2012, 09:32:54
ใช้ตารางครับ


<table border="1" cellspacing="2" cellpadding="2" width="350">
<tbody>
<tr>
<td valign="top" width="116">URL รูป</td>
<td valign="top" width="116">URL รูป</td>
<td valign="top" width="116">URL รูป</td></tr>
<tr>
<td valign="top" width="116">URL รูป</td>
<td valign="top" width="116">URL รูป</td>
<td valign="top" width="116">URL รูป</td></tr></tbody></table>

ที่ผมทำสีแดงไว้คือ เส้นขอตาบราง ข่องว่างภายในเซล ช่องว่างระหว่างเซล และความกว้างของตาราง ลองไปปรับตัวเลขดูครับ

หัวข้อ: Re: ช่วยสอนเขียน HTML การจัดวางรูปหน่อยครับผม
เริ่มหัวข้อโดย: m9gantz ที่ 27 กุมภาพันธ์ 2012, 09:33:37
ถ้าจะเอาง่ายๆก็ใส่ตารางไปเลยครับ

โค๊ด:
<table>
 <tr>
  <td>รูป1</td>
  <td>รูป2</td>
  <td>รูป3</td>
 </tr>
 <tr>
  <td>รูป4</td>
  <td>รูป5</td>
  <td>รูป6</td>
 </tr>
</table>

หัวข้อ: Re: ช่วยสอนเขียน HTML การจัดวางรูปหน่อยครับผม
เริ่มหัวข้อโดย: saxo4 ที่ 27 กุมภาพันธ์ 2012, 09:38:38
อ้างจาก: m9gantz ที่ 27 กุมภาพันธ์ 2012, 09:33:37
ถ้าจะเอาง่ายๆก็ใส่ตารางไปเลยครับ

โค๊ด:
<table>
 <tr>
  <td>รูป1</td>
  <td>รูป2</td>
  <td>รูป3</td>
 </tr>
 <tr>
  <td>รูป4</td>
  <td>รูป5</td>
  <td>รูป6</td>
 </tr>
</table>


ใช้ได้ดีเลยครับขอคุณครับผม

หัวข้อ: Re: ช่วยสอนเขียน HTML การจัดวางรูปหน่อยครับผม
เริ่มหัวข้อโดย: Pink.in.th ที่ 27 กุมภาพันธ์ 2012, 09:56:17
แนะนำอีกทางหนึ่งนะค่ะ


<style type="text/css">
   .Pic{ width:330px; height:auto; clear:both;}
   .Pic ul{ margin:0px; padding:0px; list-style:none;}
   .Pic ul li{ width:100px; height:100px; float:left; background-color:#CCCCCC; margin:5px;}
   .Clear{ clear:both;}
</style>
<div class="Pic">
   <ul>
       <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<div class="Clear"></div>
</div>

สะดวกนิดหนึ่งค่ะ ^_^


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com