Munuการสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>
|
คำสั่ง
|
คุณสมบัติ
|
| <TABLE>…</TABLE> | เป็นคำสั่งเปิดปิดตาราง |
| <TR>…</TR> | ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง |
| <TH>…</TH> | หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา และกึ่งกลาง โดย อัตโนมัติ |
| <TD>…</TD> | เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง |
คุณสมบัติของตาราง
<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n
โดย
| ALIGN | กำหนด ตำแหน่งตาราง โดย LEFT=กำหนดตารางให้อยู่ทางซ้าย RIGHT=กำหนดตารางให้อยู่ทางขวา |
| BACKGROUND | ใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ |
| BGCOLOR | กำหนดสีให้ตาราง |
| BORDER | เส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง |
| BORDERCOLOR | กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER |
| CELLPADDING | กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง |
| CELLSPACING | กำหนดขนาดของเส้นตาราง |
| WIDTH | กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น % |
| HEIGHT | กำหนดความสูงของตารางเป็นตัวเลขและเป็น % |
<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type
โดย
| ALIGN | กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT=อยู่ทางซ้าย CENTER=อยู่ตรงกลาง RIGHT=อยู่ทางขวา |
| BACKGROUND | ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
| BGCOLOR | กำหนดสีที่เป็นฉากหลังให้แถว |
| BORDERCOLOR | กำหนดสีให้ขอบตาราง |
| VALIGN | จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP = จัดอยู่ข้างบน MIDDLE = จัดอยู่ตรงกลาง BPTTOM = จัดอยู่ข้างล่าง |
<TH>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type
โดย
| ALIGN | กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT=อยู่ทางซ้าย CENTER=อยู่ตรงกลาง RIGHT=อยู่ทางขวา |
| BACKGROUND | ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
| BGCOLOR | กำหนดสีที่เป็นฉากหลังให้แถว |
| BORDERCOLOR | กำหนดสีให้ขอบตาราง |
| COLSPAN | ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี |
| ROWSPAN | ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี |
| VALIGN | จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP = จัดอยู่ข้างบน MIDDLE = จัดอยู่ตรงกลาง BPTTOM = จัดอยู่ข้างล่าง |
<TD>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type
โดย
| ALIGN | กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT = อยู่ทางซ้าย CENTER = อยู่ตรงกลาง RIGHT = อยู่ทางขวา |
| BACKGROUND | ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
| BGCOLOR | กำหนดสีที่เป็นฉากหลังให้แถว |
| BORDERCOLOR | กำหนดสีให้ขอบตาราง |
| COLSPAN | ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี |
| ROWSPAN | ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี |
| VALIGN | จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP = จัดอยู่ข้างบน MIDDLE = จัดอยู่ตรงกลาง BPTTOM = จัดอยู่ข้างล่าง |
ตารางซ้อนตาราง
มีอยู่ บ่อยครั้งที่เราจำเป็นที่จะต้องสร้างตารางให้มีลักษณะของตารางทับซ้อนกันได้ เพื่อผลทางการแสดงผลข้อมูล
ข้อมูลให้แบบละเอียดของข้อมูลได้มากที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด
<TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>…..</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น
| A | B | ||
|
E |
ซึ่งมีโคดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>
การใส่รูปภาพลงในตาราง
เรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น
<TABLE BORDER=”2″ CELLPADDING=”5″ CELLSPACING=”5″ WIDTH=”60%”>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”Aq.gif” WIDTH=”108″ HEIGHT=”108″></TD>
<TD WIDTH=”30%”><IMG SRC=”34.gif” WIDTH=”20″ HEIGHT=”20″></TD>
<TR>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”direc.gif” WIDTH=”200″ HEIGHT=”44″></TD>
<TD WIDTH=”30%”><IMG SRC=”pencil.gif” WIDTH=”50″ HEIGHT=”50″></TD>
<TR>
</TABLE>
 |
 |
 |
 |
การปรับขนาดรูปภาพให้พอดีกับตาราง
เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนำ รูปภาพ ใส่เข้า ไปในตาราง เราก็ กำหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทำให้ภาพ ที่แสดง ออกมา มีขนาด เท่ากัน เช่น
<TABLE BORDER=”2″ CELLPADDING=”5″ CELLSPACING=”5″ WIDTH=”60%”>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”Aq.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TD WIDTH=”30%”><IMG SRC=”34.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TR>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”direc.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TD WIDTH=”30%”><IMG SRC=”pencil.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TR>
</TABLE>
|
|
|
|
การเชื่อมโยงข้อมูลในตาราง
เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น เช่น
<table border=2 cellpadding=5 cellspacing=5 width=”50%”>
<tbody>
<tr>
<td width=”50%”><a href=”../index.asp”><img height=20 src=”34.gif” width=20 border=0></a></td>
<td width=”50%”><a href=”../index.asp”>กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>
|
กลับไปหน้าแรก |
