( คำสั่งเริ่มต้น ) ( สีสรร ) ( ข้อความ ) ( รูปภาพ ) ( การเชื่อมโยง ) ( รายการ ) ( ตาราง ) ( เฟรม ) ( ฟอร์ม ) ( มัลติมีเดีย )
การสร้างตาราง

การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ
ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
<TABLE>
<CAPTION>ชื่อของตาราง</CAPTION>
  <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 = จัดอยู่ตรงกลาง
BOTTOM = จัดอยู่ข้างล่าง
TEXTTOP=จัดชิดบนสุดให้ตรงกับตัวอักษรตัวที่สูงสุด
ABSBOTTOM=จัดชิดล่างสุดตรงกับส่วนล่างสุดของบรรทัด

<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=อยู่ทางขวา
JUSTIFY=จัดพอดีบรรทัด
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว URL เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN ปรับขนาดของคอลัมน์ให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี
ROWSPAN ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง

กลับไปที่สารบัญ

ตารางซ้อนตาราง
    มีอยู่ บ่อยครั้ง ที่เรา จำเป็น ที่จะต้อง สร้างตาราง ให้ มีลักษณะ ของตาราง ทับซ้อน กันได้ เพื่อ ผล ทางการ แสดงผล ข้อมูล ข้อมูล ให้แบบ ละเอียด ของข้อมูล ได้มาก ที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด <TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ ตัวอย่าง
AB
CD
 E

ซึ่งมีโค้ดดังนี้
<HTML>
  <HEAD><TITLE>Table with and Nested tables</HEAD></TITLE>
  <BODY>
    <H1>Table with and Nested 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="guest.gif" WIDTH="112" HEIGHT="105"></TD>
      <TD WIDTH="30%"><IMG SRC="orange.gif" WIDTH="187" HEIGHT="187"></TD>
   <TR>
   <TR>
      <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="moon2.gif" WIDTH="73" HEIGHT="73"></TD>
      <TD WIDTH="30%"><IMG SRC="star2.gif" WIDTH="99" HEIGHT="46"></TD>
   <TR>
</TABLE>

กลับไปที่สารบัญ

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

<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
   <TR>
      <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="guest1.gif" WIDTH="80" HEIGHT="80"></TD>
      <TD WIDTH="30%"><IMG SRC="orange.gif" WIDTH="80" HEIGHT="80"></TD>
   <TR>
   <TR>
      <TD VALIGN="bottom" WIDTH="30%"><IMG SRC="moon2.gif" WIDTH="80" HEIGHT="80"></TD>
      <TD WIDTH="30%"><IMG SRC="star2.gif" WIDTH="80" HEIGHT="80"></TD>
   <TR>
</TABLE>

กลับไปที่สารบัญ

การเชื่อมโยงข้อมูลในตาราง
     เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น ตัวอย่าง <table border="2" cellpadding="5" cellspacing="5" width="50%">
<tr>
<td width="50%"><a href=internet.html><img src="34.gif" width="20" height="20"></td> <td width="50%"><a href=index.html>กลับไปหน้าแรก</a></td> </tr> </table>

กลับไปหน้าแรก

กลับไปที่สารบัญ

1