Text Here

- - -

ข้อความ

- - -

Text Here

Text Here

- - -

ข้อความ

- - -

Text Here

 ขั้นที่ 1

กำหนดรูปแบบของตารางกันก่อน ในที่นี้จะใช้ตารางแบบ 3 แถว 5 ช่อง
และใช้การผสานเซลตารางในแถวที่ 1 กับ 3 ตามภาพข้างล่าง

 Code

<TABLE style="WIDTH: 460px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 307px" cellSpacing=0 cellPadding=0 background=http://i8.photobucket.com/albums/a16/happymew/frame/frame05.gif border=0 align=center>
<TBODY>

<TR>
<TD colSpan=5 height=30></TD></TR>

<TR>
<TD width=28></TD>
<TD width=170 height=249></TD>
<TD></TD>
<TD width=170 height=249></TD>
<TD width=28></TD></TR>

<TR>
<TD colSpan=5 height=28></TD></TR>

</TBODY></TABLE>

 
อธิบาย

ที่แท็ก Table ใส่คำสั่ง
width / height กำหนดขนาดตารางให้พอดีกับภาพที่เราจะเอามาเป็นแบคกราว
BACKGROUND-REPEAT: no-repeat - สั่งไม่ให้ทำซ้ำภาพแบคกราว
background=Url ของภาพ - ใส่ภาพที่จะเอามาทำแบคกราว

แถวที่ 1
ในแท็ก <TD> ใส่ height กำหนดความสูงให้แถวบน ขนาดเท่ากับขอบด้านบนของภาพ
ใส่ colSpan=5 รวมตารางแถวบนให้เป็นช่องเดียว
(สำหรับแถวนี้ ที่จริงเราไม่ได้ใช้ ไม่จำเป็นต้องรวมก็ได้ค่ะ แต่ว่าจะต้องใส่ <TD></TD> ไป 5 ช่องแทน ซึ่งจะทำให้โค้ดของเรายาวขึ้น)

แถวที่ 2
ในแท็ก <TD> ช่อง 1 และ 5 ใส่ width ความกว้างเท่ากับขอบของภาพ
ช่องที่ 2 และ 4 ใส่ความกว้างให้เท่ากับส่วนที่เขียนข้อความ

แถวที่ 3 จะเหมือนกับแถว 1

---------------------------------------

ขั้นที่ 2

พอเราจัดตารางให้พอดีกับส่วนที่เราจะเขียนข้อความเรียบร้อยแล้ว
ก็ค่อยมาใส่โค้ดกรอบเลื่อนในช่องที่เราต้องการ (ช่อง 2 กับ 4)

โค้ดสำหรับกรอบเลื่อน

<DIV style="SCROLLBAR-FACE-COLOR: #eeeeee; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 170px; SCROLLBAR-SHADOW-COLOR: #cccccc; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-DARKSHADOW-COLOR: #cccccc; HEIGHT: 100%" align=center> ข้อความ </DIV>

อธิบาย

ตรง SCROLLBAR คือใส่โค้ดสีของ Scrollbar นะคะ มี สีพื้น สีขอบบน-ล่าง สีลูกศร สีขอบด้านนอกบน-ล่าง ก็ลองไปปรับกันเองนะ

COLOR  - อันนี้คือสีของตัวอักษร

OVERFLOW  - กำหนดรูปแบบ scrollbar ของเรา auto ก้อคือ ถ้าข้อความยาวเกินกล่องข้อความ ถึงจะแสดง scrollbar

---------------------------------------

อันนี้คือโค้ดที่ทำเสร็จเรียบร้อยแล้ว และกรอบที่ทำเสร็จแล้วก็จะเหมือนอันข้างบนค่ะ

<TABLE style="WIDTH: 460px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 307px" cellSpacing=0 cellPadding=0 background=http://i8.photobucket.com/albums/a16/happymew/frame/frame05.gif border=0 align=center>
<TBODY>

<TR>
<TD colSpan=5 height=30></TD></TR>

<TR>
<TD width=28></TD>
<TD width=170 height=249>
<DIV style="SCROLLBAR-FACE-COLOR: #eeeeee; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 170px; SCROLLBAR-SHADOW-COLOR: #cccccc; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-DARKSHADOW-COLOR: #cccccc; HEIGHT: 100%" align=center> ข้อความ </DIV>
</TD>
<TD></TD>
<TD width=170 height=249>
<DIV style="SCROLLBAR-FACE-COLOR: #eeeeee; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 170px; SCROLLBAR-SHADOW-COLOR: #cccccc; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-DARKSHADOW-COLOR: #cccccc; HEIGHT: 100%" align=center> ข้อความ </DIV>
</TD>
<TD width=28></TD></TR>

<TR>
<TD colSpan=5 height=28></TD></TR>

</TBODY></TABLE>