Munuบทเรียนการเขียนเว็บด้วยภาษา html
การสร้างตาราง
นี่เป็นตารางของชื่อผลไม้ชนิดต่างๆครับ
ผลไม้ชนิดต่างๆ
|
กล้วย
|
ขนุน
|
เงาะ
|
|
มะละกอ
|
มะเฟือง
|
มะไฟ
|
|
มะพร้าว
|
ส้มโอ
|
แตงโม
|
เอ่อ… นี่ไม่ใช่ตารางที่ฉันต้องการนะ!
ใช่สิครับ นี่เป็นตารางที่สร้างจากคำสั่ง <TABLE> และ </TABLE> (table แปลว่าตารางหรือโต๊ะ) มันเป็นตารางเพราะว่า…อืม.. เอ่อ… ผมว่าที่คุณหมายถึงคือตารางแบบนี้ :
ผลไม้ชนิดต่างๆ
|
กล้วย
|
ขนุน
|
เงาะ
|
|
มะละกอ
|
มะเฟือง
|
มะไฟ
|
|
มะพร้าว
|
ส้มโอ
|
แตงโม
|
ใช่มั้ยครับ ? คุณต้องการขีดเส้นให้เป็นตารางที่สมบูรณ์
คำสั่งสร้างตารางอย่างง่าย
อย่างแรกเลย ผมอยากแสดงวิธีการทำตารางแรกที่คุณไม่ต้องการ แล้วผมจะอธิบายวิธีตีเส้นทีหลัง ตารางนี้มีรูปแบบที่ง่ายมาก นี่เป็นโปรแกรมเล็กๆที่สร้างตารางผลไม้ขึ้นมา :
<TABLE>
<CAPTION>ผลไม้ชนิดต่างๆ</CAPTION>
<TR>
<TD>กล้วย</TD>
<TD>ขนุน</TD>
<TD>เงาะ</TD>
</TR>
<TR>
<TD>มะละกอ</TD>
<TD>มะเฟือง</TD>
<TD>มะไฟ</TD>
</TR>
<TR>
<TD>มะพร้าว</TD>
<TD>ส้มโอ</TD>
<TD>แตงโม</TD>
</TR>
</TABLE>
ดูเหมือนว่ามีคำสั่งมากมายรึเปล่าครับ แต่จริงๆแล้วใช้เพียง 4 คำสั่ง มีการใช้คำสั่งซ้ำๆกันหลายๆครั้ง และนี่คือคำอธิบายแต่ละคำสั่ง :
- <TABLE> และ </TABLE> เป็นคำสั่งเริ่มและปิดการสร้างตาราง
- <CAPTION> และ </CAPTION> เป็นคำสั่งสร้างหัวข้อ ที่จะอยู่ด้านบนกลางของตาราง ซึ่งคุณจะใช้หรือไม่ใช้มันก็ได้
- <TR> มาจากคำว่า Table Row(หมายถึงแถวของตาราง) ใช้เมื่อคุณต้องการขึ้นแถวหรือบรรทัดใหม่ ในตารางนั้น (ลองสังเกตว่าการสร้างแต่ละแถวนอนของตารางต้องใช้คำสั่ง <TR> และปิดแถวด้วย </TR>)
- <TD> มาจากคำว่า Table Data (หมายถึงข้อมูลในตาราง) ใช้คำสั่งนี้ทุกครั้งที่คุณต้องการใส่ข้อมูลหรือตัวหนังสือเข้าไปในตาราง และสังเกตว่าต้องปิดคำสั่งด้วย </TD> ทุกๆครั้งไป
จริงๆแล้วไม่ต้องมีคำสั่งปิด TR และ TD ก็สามารถใช้ได้ หาก Browser ที่ใช้เป็น Internet Explorer แต่หากเป็น Netscape จะทำให้การแสดงผลผิดพลาดได้
มีอะไรเกิดขึ้นบ้าง ?
คำสั่ง Table เป็นคำสั่งที่สร้างกล่องข้อมูล(cell)เป็นชุดๆ โดยแต่ละกล่องถูกสร้างด้วยคำสั่ง TD การใช้คำสั่ง TD ต่อเนื่องไปเรื่อยๆ ก็จะได้กล่องข้อมูลเพิ่มขึ้นเรื่อยๆ ในบรรทัดหรือแถวนั้น จนกระทั่งใช้คำสั่ง TR จึงจะขึ้นบรรทัดหรือแถวใหม่
หรือคิดว่าคุณต้องการตารางที่มี 9 ช่อง มีสามช่องในแนวตั้ง และสามช่องในแนวนอน ในแนวตั้งสามช่อง หมายถึงคุณต้องใช้ TR ในการขึ้นแถวใหม่ ในแนวนอน คุณต้องใช้ TD สามคำสั่ง เพื่อสร้างกล่อง 3 กล่องใน 1 แถว แล้วทำกล่องข้อมูลแต่ละแถวทำไปเรื่อยๆจนครับ 9 ช่อง
การตีเส้นและอื่นๆ
ผลไม้ชนิดต่างๆ
|
กล้วย
|
ขนุน
|
เงาะ
|
|
มะละกอ
|
มะเฟือง
|
มะไฟ
|
|
มะพร้าว
|
ส้มโอ
|
แตงโม
|
ตารางนี้ผมสร้างขึ้นจาก :
<TABLE BORDER=4 CELLSPACING=0 CELLPADDING=10>
<CAPTION>ผลไม้ชนิดต่างๆ</CAPTION>
<TR>
<TD ALIGN = “center”>กล้วย</TD>
<TD ALIGN = “center”>ขนุน</TD>
<TD ALIGN = “center”>เงาะ</TD>
</TR>
<TR>
<TD ALIGN = “center”>มะละกอ</TD>
<TD ALIGN = “center”>มะเฟือง</TD>
<TD ALIGN = “center”>มะไฟ</TD>
</TR>
<TR>
<TD ALIGN = “center”>มะพร้าว</TD>
<TD ALIGN = “center”>ส้มโอ</TD>
<TD ALIGN = “center”>แตงโม</TD>
</TR>
</TABLE>
คุณจะสังเกตเห็นคำสั่ง 3 คำสั่งที่เพิ่มเข้ามาในคำสั่ง TABLE ซึ่งมีดังนี้
- BORDER Border แปลว่า ขอบหรือริม ซึ่งในที่นี้คือเส้นตารางนั่นเอง ส่วนเครื่องหมายเท่ากับและตามด้วยตัวเลข เป็นการระบุความกว้างของเส้นตารางในหน่วยพิกเซล ถ้าคุณใช้ BORDER=0 ก็จะได้ตารางที่ไม่มีเส้น
- CELLSPACING หมายถึงที่ว่างระหว่างกล่องข้อมูล ยิ่งกำหนดค่ามาก ระยะห่างระหว่างกล่องก็จะยิ่งมากขึ้น
- CELLPADDING หมายถึงที่ว่างระหว่างเส้นขอบกับเนื้อหาในกล่องข้อมูล ยิ่งกำหนดค่ามาก จะทำให้ได้กล่องใหญ่ และตารางใหญ่ขึ้น ซึ่งอาจทำให้ตารางดูง่ายขึ้น
แล้วคุณคงเห็นคำสั่ง ALIGN=”center” ที่อยู่ใน TD ซึ่งเป็นคำสั่งจัดตัวหนังสือให้อยู่ตรงกลางแต่ละกล่อง คุณยังจำได้รึเปล่าครับว่ามีการจัดแบบอื่น นอกจากจัดกลาง… ลองใช้ ALIGN=”left” และ ALIGN=”right” เพื่อปรับเปลี่ยนการวางของแต่ละกล่องไปทางซ้าย ขวา หรือกลางตามที่คุณต้องการ
การกำหนดขนาดของตาราง
ผลไม้ชนิดต่างๆ
|
กล้วย
|
ขนุน
|
เงาะ
|
|
มะละกอ
|
มะเฟือง
|
มะไฟ
|
|
มะพร้าว
|
ส้มโอ
|
แตงโม
|
ตารางนี้มีความกว้าง 500 พิกเซล สูง 300 พิกเซล ผมทำได้โดยเพิ่มคำสั่งกำหนดความกว้าง.. WIDTH=”500″ และคำสั่งกำหนดความสูง.. HEIGHT=”300″ เข้าไปในคำสั่ง TABLE คุณไม่สามารถกำหนดความสูงให้ต่ำกว่าขนาดปกติ ก่อนที่จะปรับ การกำหนดขนาดยังสามารถทำได้โดยใช้ค่า % ขนาดความกว้างและสูงของหน้าต่าง เช่น ตารางด้านล่าง ใช้ความกว้าง WIDTH=”50%” และความสูง HEIGHT=”50%” (สังเกตว่าจะมีความกว้างและสูงประมาณครึ่งหนึ่งของขนาดหน้าต่าง โดยคิดรวมหัวข้อตารางด้วย)
ผลไม้ชนิดต่างๆ
|
กล้วย
|
ขนุน
|
เงาะ
|
|
มะละกอ
|
มะเฟือง
|
มะไฟ
|
|
มะพร้าว
|
ส้มโอ
|
แตงโม
|
การสร้าง link ในตาราง
จะดีไหมหากคุณสามารถ สร้างตัวหนังสือในตารางที่เป็น link และสามารถคลิ๊กได้ ลองดูตัวอย่างข้างล่างสิครับ
|
ไร่ถุงเงิน
|
freewebs
|
|
programs4u
|
ชัยนาท
|
ยังใช้รูปแบบการสร้างตารางเหมือนเดิมครับ เพียงแต่สร้าง link เข้าไปในคำสั่ง TD ยกตัวอย่างเช่น :
<TD align=”center”>
<A HREF=”http://www.google.co.th”>google</A>
</TD>
ตารางนี้ผมใช้ BORDER CELLSPACING และ CELLPADDING เป็น 20 ทั้งหมดครับ เพื่อให้เป็นตัวอย่างของตารางที่กำหนดค่ามาก
รูปภาพในตาราง
ฉันจะใส่รูปภาพลงในตารางได้รึเปล่า ? …ได้แน่นอนครับ นี่คือตัวอย่าง
 |
<– เห็นไหม ?
|
|
เห็นไหม ? –>
|
|
ที่คุณต้องทำก็คือ ใส่คำสั่งวางรูปภาพไว้ในคำสั่ง TD แบบนี้ :
<TD align=”center”>
<IMG SRC=”na.jpg”>
</TD>
ตารางนี้ผมใช้ BORDER=3 CELLSPACING=2 และ CELLPADDING=10
การทำกรอบรูป
ผมเคยถูกถามว่าจะทำกรอบรูปได้อย่างไร ในตัวอย่างที่แล้วคุณทำกรอบรูป 2 กรอบ ในแต่ละรูป หากเป็นกรอบรูปเดียว ก็ให้ใช้ตารางที่มีกล่อง(หรือช่อง)เดียว แบบนี้
|
|
นี่เป็นตารางที่มีรูปแบบง่ายกว่าทุกๆตัวอย่างในหน้านี้ทั้งหมด คุณเพียงใช้คำสั่ง TR คำสั่งเดียว TD คำสั่งเดียว และกำหนดขนาด BORDER ซึ่งจะเป็นขนาดกรอบรูป และกำหนด CELLPADDING=0 และ cellspacing=0 เพื่อให้รูปเต็มกรอบ หรือไม่ให้เกิดที่ว่างในตาราง …ทดลองทำกับรูปหรือข้อมูลของคุณในแบบต่างๆดูครับ
กลับ_คำสั่ง head กำลังอ่านการสร้างตาราง ไป_การปรับรูปแบบตัวอักษร
