วันปล่อยของ... อยากรู้ว่าทำไง อ่านข้างล่างน๊า                ...นู๋มิวจ้า

กรอบวันนี้เป็นรูปกระดาษเขียนจดหมาย สวยน่ารักดี วิธีทำก็ไม่ยากด้วยน๊า
เป็นการนำเอาตารางมาประยุกต์ใช้ ใครที่ยังไม่เข้าใจวิธีการสร้างตาราง ไปอ่านได้ใน
  • Html และการใช้ <TABLE> (ภาค1) สำหรับมือใหม่หัดสร้างตารางนะจ๊ะ
  • การใช้ <TABLE>(ภาค 2) สำหรับวิธีการรวมตารางค่ะ
กระดาษที่เราจะสร้างนี้สร้างขึ้นด้วยแนวความคิดว่า...
ต้องการให้กระดาษนี้ขยายออกได้ตามความยาวของข้อความ และเพราะว่ากระดาษวันนี้มีพื้นสีขาว
เลยเปลี่ยนแบคกราวของบลอคให้เป็นสีครีมจะได้ดูง่ายๆนะ

ก่อนอื่นเรามาดูว่ากระดาษแผ่นนี้ประกอบด้วยส่วนอะไรกันบ้าง
ก็มีแค่ 4 ชิ้นเท่านั้นเองแหละ คือ ขอบด้านบน / หัวกระดาษ / ตัวกระดาษ / ท้ายกระดาษ

ตามรูปนี้นะคะ

ตารางที่เอามาใช้สร้างก็จะเป็นแบบ 4แถว 3 ช่อง
เราจะสร้างกระดาษโดยใช้วิธีทำภาพเป็นแบคกราว และใช้การรวมเซลตารางมาเข้ามาช่วย
ทำให้เราไม่ต้องใส่ภาพ ตรงมุม 4 ด้าน เหมือนกับวิธีในตอนที่แล้ว (การประยุกต์ใช้ตาราง)

Code

<TABLE cellSpacing=0 cellPadding=0 align=middle border=0>
<TBODY>

<TR>
<TD style="BACKGROUND-REPEAT: repeat-x" background=http://i8.photobucket.com/albums/a16/happymew/paper/100top.gif colSpan=3 height=20></TD></TR>

<TR>
<TD align=middle bgColor=#ffffff colSpan=3><IMG src="http://i8.photobucket.com/albums/a16/happymew/paper/100head.gif"></TD>
</TR>

<TR>
<TD width=20 bgColor=#ffffff></TD>
<TD vAlign=top align=middle width=210 background=http://i8.photobucket.com/albums/a16/happymew/paper/100paper.gif height=100>
<P>&nbsp;</P>
<P align=middle><FONT size=2>Text Here</P>
<P><BR>ข้อความ</P>
<P>Text Here</P>
<P>&nbsp;</P>
</FONT></P></TD>
<TD width=20 bgColor=#ffffff></TD></TR>

<TR>
<TD style="BACKGROUND-REPEAT: repeat-x" background=http://i8.photobucket.com/albums/a16/happymew/paper/100bottom2.gif colSpan=3 height=72></TD></TR>

</TBODY></TABLE>

อธิบาย
จะแบ่งอธิบายไปทีละแถวของตาราง ตามที่เว้นวรรคเอาไว้นะ

เริ่มจากแท็ก <Table> เราเพิ่มคำสั่ง
cellSpacing=0 - ระยะห่างระหว่างแต่ละช่องในตารางเป็น 0 เพื่อให้ภาพแบคกราวมันต่อกันสนิทจะได้ดูเหมือนเป็นภาพๆเดียว  
cellPadding=0 - ระยะห่างระหว่าง ขอบตาราง กับข้อความเป็น 0  
align=middle - จัดตารางนี้ให้อยู่ตรงกลางของ Blog และใส่  
border=0  -ไม่ต้องการให้เห็นขอบตาราง

แถวที่ 1
ในแท็ก <TD> เราใส่คำสั่ง
colSpan=3 - เพื่อรวมเซลตารางของแถวนี้ให้เป็นช่องเดียว
background=Url ของภาพ - ใส่ภาพขอบบนเป็นแบคกราว  
BACKGROUND-REPEAT: repeat-x  - ให้แสดงภาพแบคกราว ต่อกันในแนวนอนอย่างเดียว

แถวที่ 2
ในแท็ก <TD> ใส่คำสั่ง
bgColor - ใส่สีแบคกราวในช่องนี้เป็นสีขาว
colSpan=3 - รวมเซลตารางแถวนี้ให้เป็นช่องเดียว
align=midle สั่งให้จัดข้อมูลในช่องนี้ให้อยู่กึ่งกลาง
และใส่รูปหัวกระดาษเอาไว้ <IMG src="Url ของภาพ">

แถวที่ 3
แถวนี้ตารางของเราจะมี 3 ช่อง โดยที่
ตรงขอบด้านขวา และ ซ้าย จะใส่ bgColor เป็นสีขาวให้เหมือนสีพื้นของตัวกระดาษ
ช่องกลางเป็นที่เราเอาไว้พิมข้อความ ในแท็ก <TD> จะใส่คำสั่ง
background=Url ของภาพ - ใส่ภาพตัวกระดาษเป็นแบคกราว
vAlign=top - จัดข้อความในช่องนี้ขิดขอบด้านบน
align=middle - จัดข้อความให้อยู่ตรงกลาง
width / height - ความกว้าง ความสูง
สีน้ำเงิน  - คือส่วนของข้อความที่เราพิมลงไป

แถวที่ 4
จะเหมือนกับแถวที่ 1 คือ
ในแท็ก <TD> เราใส่คำสั่ง
colSpan=3 - เพื่อรวมเซลตารางของแถวนี้ให้เป็นช่องเดียว
background=Url ของภาพ - ใส่ภาพขอบด้านล่างเป็นแบคกราว  
BACKGROUND-REPEAT: repeat-x  - ให้แสดงภาพแบคกราว ต่อกันในแนวนอนอย่างเดียว

ปิดท้ายด้วยแท็ก </TBODY></TABLE> เป็นการปิดตาราง
ภาพที่ทำเสร็จแล้วก็จะเหมือนกับที่อยู่บนสุดของบลอคนี้ค่ะ 
ขอบคุณทุกที่อ่านมาถึงตรงนี้นะจ๊า~*