พื้นฐานเรื่องตารางในเว็บไซต์

   ข้อมูลนี้นำมาจาก yakyaihost.net มีคำแนะนำดีมากมาย ลองเข้าไปดูกันครับ

ตาราง (Table) เป็นส่วนที่สำคัญอย่างยิ่งในการทำเว็บเพจ (Web Page) โดยจะแบ่งพื้นที่ในหน้าเว็บเพจออกเป็นสัดส่วน เป็นระเบียบดูสวยงาม สามารถสื่อสารกับผู้ชมเว็บเพจได้อย่างสบายตา และสิ่งแรกที่ควรทำในการออกแบบเว็บเพจก็คือการจัดวางรูปร่าง (Lay Out) ให้เหมาะสมกับลักษณะข้อมูลของเรา ที่จะนำเสนอในหน้าเว็บเพจ

การใช้ตาราง ไม่มีเครื่องมือใดที่ใช้เขียน Code HTML มีประโยชน์เท่ากับ Code ตาราง ตารางช่วยให้คุณสามารถจัดวางวัตถุและส่วนต่างๆได้อย่างถูกต้อง ทำให้คุณสามารถสร้างสรรค์รูปแบบอย่างไร้ขอบเขต และข้อควรรู้ประกอบอีกอย่างคือในการแสดงผล บราวเซอร์ (Browser) จะทำการ ดาวน์โหลด (Download) ข้อมูลในตารางทั้งหมดก่อน แล้วจึงแสดงผลตารางบนเว็บเพจ



<Table> Tag Attributes : ส่วนขยายของแท็กตาราง เริ่มต้นด้วย <TABLE> แท็กนี้จะแจ้งกับบราวเซอร์ของคุณว่าคุณต้องการเริ่มสร้างตารางหลังจากแท็กนี้ , <TABLE> tag มีส่วยขยายซึ่งคุณสามารถใช้เปลี่ยนแปลงรูปร่างหน้าตาและคุณสมบัติของตารางตามที่คุณต้องการได้
Border=

ถ้าคุณต้องการให้ตารางของคุณแสดงเส้นขอบ คุณสามารถกำหนดค่าตัวเลขซึ่งจะแจ้งกับบราวเซอร์ถึงความกว้าง (Pixels Wide) ที่ต้องการได้ โดยใช้ Border=5 ซึ่งหมายถึงเส้นขอบขนาด 5 Pixels Wide เป็นต้น
ตารางสามารถกำหนดเส้นขอบซึ่งจะช่วยในการแยกรายละเอียดได้อย่างชัดเจน หรือจะกำหนดให้ไม่มีเส้นขอบปรากฏบนเว็บเพจก็ได้
 

ตารางที่มีเส้นขอบบาง Cell A Cell B Cell C Cell D Cell E Cell F

ตารางที่มีเส้นขอบหนา Cell A Cell B Cell C Cell D Cell E Cell F

ตารางที่ไม่มีเส้นขอบ Cell A Cell B Cell C Cell D Cell E Cell F

*** คำแนะนำ : ปกติผมจะตั้งค่าเส้นขอบของตารางไว้ที่ 1 ขณะที่ผมกำลังสร้างตารางซึ่งจะทำให้คุณดูผลของตารางที่สร้าง และเมื่อเสร็จการสร้างตารางและทุกอย่างเป็นไปตามที่ผมต้องการ ผมค่อยเปลี่ยนขนาดเส้นขอบของตารางเป็น Border=0.
Width=

โดยการใช้ส่วนขยายนี้ คุณสามารถกำหนดความของตารางที่คุณต้องการ ถ้าคุณไม่กำหนดความกว้างของตาราง ตารางจะปรากฏควมกว้างของตารางเท่ากับวัตถุที่คุณใส่เข้าไป มี 2 วิธีที่คุณสมารถใช้กำหนด Width= Attribute:
วิธีเปอร์เซนต์ (Percentage Method)
Width=60%

ใช้วิธีนี้จะสร้างตารางซึ่งมีความกว้าง 60% ของจอภาพของคุณ แนะนำวิธีนี้เพราะผู้คนใช้ขนาดความละเอียดของจอที่แตกต่างกันซึ่งจะทำให้เห็นตารางขนาดความกว้าง 60% ของจอภาพเหล่านั้น ไม่ว่าจะพวกเขาจะใช้ขนาดความละเอียดของจอ 640x480, 800x600 หรืออะไรก็ตาม
วิธีความกว้าง Pixel จริง (Absolute Method)
Width=450

ใช้วิธีนี้คุณสามารถกำหนดความกว้างที่แท้จริง PIXEL width. เหมาะกับการใช้เมื่อคุณวางวัตถุได้เที่ยงตรงบนเว็บเพจของคุณ มีข้อเตือนใจดังตัวอย่าง ถ้าคุณกำหนดความกว้าง 800 Pixels และผู้ชมดูด้วยความละเอียดของจอ 640x480 (กว้าง 640 สูง 480) พยายามจะดูตารางของคุณ พวกเขาจะไม่สามารถเห็นตารางได้ทั้งหมดบนหน้าจอ จะต้องเลื่อนสกอร์บาร์เพื่อจะดูทุกอย่างได้
BGcolor=

คุณสามารถใช้ส่วนขยายนี้กำหนดสีพื้นหลัง (background color) ทุกๆ เซลล์ในตารางของคุณ ทั้งหมด ของเซลล์ของตารางจะมีสีพื้นเดียวกัน Code BGcolor= Attribute ดังนี้
BGcolor=#ff0000
ALIGN=

โดยการใช้ส่วนขยายนี้ คุณสามารถกำหนดจัดวางตำแหน่งของ ทุกส่วน ของตาราง ค่าที่ถูกต้องของส่วนขยายนี้คือ right, left and center กลาง ซ้าย และขวา ตามลำดับ เราเขียน Code ได้ดังนี้
ALIGN=right
Cellpadding=

ค่าตัวเลขนี้ทำให้คุณกำหนดจำนวน Pixels ระหว่างวัตถุและข้อความในเซลล์และผนังของเซลล์ ค่านี้จะมีผลต่อ ทุกส่วน ของเซลล์ในตาราง Code ของคุณมีดังนี้
Cellpadding=2
Cellspacing=

ค่าตัวเลขนี้ทำให้คุณกำหนดจำนวน Pixels ระหว่าง แต่ละเซลล์ ค่านี้จะมีผลต่อ ทุกๆ เซลล์ในตารางเหมือนกัน Code ของคุณมีดังนี้
Cellspacing=3
*** คำแนะนำ : ถ้าคุณมีปัญหาในการแยกแยะความแตกต่างระหว่าง cellpadding และ cellspacing ลองนึกภาพลังที่บรรจุเบียร์หลายๆลัง ระยะห่างระหว่างขวดและลังก็คือ CELLPADDING ระยะห่างระหว่างลังและลังก็คือ CELLSPACING
คุณสามารถผสมผสานคำสั่งส่วนขยายหลายๆอันในหนึ่งแท็กตาราง <TABLE> tag ดังนี้
<TABLE Width=60% Cellpadding=2 ALIGN=RIGHT Border=1>
ส่วนประกอบของตาราง ตารางแบ่งเป็นแถวและเซลล์ แต่ละแถวจะประกอบด้วยเซลล์ และเซลล์ประกอบด้วยรูปภาพและข้อความ โดยต่อไปนี้คือ Tag ที่ใช้ในการสร้างตาราง

แท็ก (Tag) ที่ใช้สร้างตาราง	หน้าที่ของแท็ก (Tag)
<TABLE>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นของตาราง
<TH>...</TH>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นและสิ้นสุดของหัวตาราง
<TR>...</TR>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นและสิ้นสุดของแถว (Row)
<TD>...</TD>	บอกบราวเซอร์ว่าเป็นจุดเริ่มต้นและสิ้นสุดของเซลล์ (Cell)
</TABLE>	บอกบราวเซอร์ว่าเป็นจุดสิ้นสุดของตาราง

Code ตาราง 1 แถว

นี่เป็นตารางแบบง่ายๆซึ่งกำหนดค่าเส้นขอบเท่ากับ 1:
 

Cell A Cell B Cell C	Row 1
Column 1      Column 2      Column 3

ไปดู Code ของตารางตัวอย่าง
<TABLE Border=1>      <-- แท็กเปิดของตารางพร้อมเส้นขอบ
<TR>      <-- แท็กเริ่มต้นแถวแรก
<TD> Cell A </TD>      <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell B </TD>      <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell C </TD>      <-- กำหนดเซลล์แต่ละเซลล์
</TR>      <-- แท็กสิ้นสุดแถวแรก
</TABLE>      <-- แท็กปิดของตาราง
Code ตาราง 2 แถวหรือมากกว่า
 

Cell A Cell B Cell C Cell D Cell E Cell F	Row 1 Row 2
Column 1      Column 2      Column 3

ไปดู Code ของตารางข้างบน
<TABLE Border=1>      <-- แท็กเปิดของตารางพร้อมเส้นขอบ
<TR>      <-- แท็กเริ่มต้นแถวแรก
<TD> Cell A </TD>      <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell B </TD>      <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell C </TD>      <-- กำหนดเซลล์แต่ละเซลล์
</TR>      <-- แท็กสิ้นสุดแถวแรก
(นี่คือ แถวที่ 2)
<TR>      <-- แท็กเริ่มต้นแถวที่สอง
<TD> Cell D </TD>      <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell E </TD>      <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell F </TD>      <-- กำหนดเซลล์แต่ละเซลล์
</TR>      <-- แท็กสิ้นสุดแถวที่สอง
</TABLE>      <-- แท็กปิดของตาราง
การตกแต่งเซลล์ตารางของคุณ

แต่ละเซลล์ของตารางต้องการแท็กเปิด <TD> tag และแท็กปิด </TD> tag เพื่อทำงานได้สมบูรณ์ คุณสามารถแทรกข้อความ รูปภาพ และอะไรก็ได้ที่คุณต้องการในแต่ละส่วนของหน้าเว็บเพจลงในเซลล์ของตาราง มีหลายคำสั่งส่วนขยายที่คุณสามารถใช้ปรัปปรุงเซลล์ของคุณ
ALIGN=

ส่วนขยายนี้ทำให้คุณกำหนด จัดวางตำแหน่งในแนวนอน (HORIZONTAL ALIGNMENT) ของข้อความหรือวัตถุในเซลล์ ค่าที่ถูกต้องของส่วนขยายนี้คือ left, center และ right กลาง ซ้าย และขวา ตามลำดับ เราเขียน Code ได้ดังนี้
ALIGN=right
VALIGN=

ส่วนขยายนี้ทำให้คุณกำหนด จัดวางตำแหน่งในแนวตั้ง (VERTICAL ALIGNMENT) ของข้อความหรือวัตถุในเซลล์ ค่าที่ถูกต้องของส่วนขยายนี้คือ top, middle และ bottom บน กลาง และล่าง ตามลำดับ เราเขียน Code ได้ดังนี้
VALIGN=bottom
COLSPAN=

ส่วนขยายนี้ทำให้คุณกำหนดจำนวนกี่คอลัมน์ที่เซลล์ 1 เซลล์จะขยายคร่อม ค่าที่ถูกต้องคือตัวเลขที่ใส่ดังนี้
COLSPAN=2
คุณจะใช้จำนวนเท่าไรขึ้นกับคอลัมน์กี่คอลัมน์ที่คุณต้องการให้เซลล์ 1 เซลล์ขยายคร่อม
ROWSPAN=

ส่วนขยายนี้ทำให้คุณกำหนดจำนวนกี่แถวที่เซลล์ 1 เซลล์จะขยายคร่อม ค่าที่ถูกต้องคือตัวเลขที่ใส่ดังนี้
ROWSPAN=2
คุณจะใช้จำนวนเท่าไรขึ้นกับแถวกี่แถวที่คุณต้องการให้เซลล์ 1 เซลล์ขยายคร่อม
BGcolor=

ส่วนขยายนี้ทำให้คุณกำหนดสีพื้นหลัง (background color) ของแต่ละเซลล์ คุณใช้ส่วนขยายนี้อย่างสมบูรณ์โดยใส่ค่าของสีเลขฐาน 16 (Hexadecimal color) ดังนี้
BGcolor=#000000
Width=

ส่วนขยายนี้ทำให้คุณกำหนดความกว้างของเซลล์ตามที่ควรจะเป็น คุณสามารถใช้วิธีเปอร์เซนต์หรือวิธีความกว้าง Pixel จริง
วิธีเปอร์เซนต์ (Percentage Method)
Width=35%
วิธีความกว้าง Pixel จริง (Absolute Method)
Width=150
นี้คือความกว้างของตารางในหน่วย Pixels PIXELS.
Spanning Columns and Rows

Spanning เป็นเครื่องมือสร้างตารางที่มีประโยชน์มาก การขยายเซลล์ทำให้คุณสามารถเปลี่ยนขนาดของเซลล์ตามที่คุณต้องการ ต่อไปนี้คือตารางตัวอย่าง
 

Cell A Cell B Cell C Cell D Cell E Cell F

Row 1 Row 2

คุณจะสังเกตเห็นว่าแต่ละแถวมี 3 เซลล์ แต่เราจะทำอย่างไรถ้าเราต้องการให้แถวที่สองมีเพียง 2 เซลล์
ทำดังต่อไปนี้ เราจำเป็นต้องแก้ไข <TD> tag ด้วยส่วนขยายซึ่งทำให้เราสามารถขยายเซลล์ 1 เซลล์ ข้ามไปถึง 2 เซลล์เดิม ถ้าเราใช้ COLSPAN= Attribute เราสามารถยืด 1 เซลล์ข้ามไปถึง 2 เซลล์หรือมากกว่า คอลัมน์ของตาราง
 

Cell A Cell B Cell C Cell D Cell F

Row 1 Row 2

ให้สังเกต Cell D ตอนนี้ได้ถูกยืดออก หรือถูกขยาย (SPANNED), คร่อม 2 เซลล์
นี้คือ Code ที่ใช้ในการสร้างตารางข้างบน
<TABLE Border=1> <-- แท็กเปิดของตารางพร้อมเส้นขอบ
<TR> <-- แท็กเริ่มต้นแถวแรก
<TD> Cell A </TD> <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell B </TD> <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell C </TD> <-- กำหนดเซลล์แต่ละเซลล์
</TR> <-- แท็กสิ้นสุดแถวแรก
<TR> <-- แท็กเริ่มต้นแถวที่สอง
<TD COLSPAN=2> Cell D </TD> <-- กำหนดเซลล์แต่ละเซลล์
(สังเกตว่าผมตัด CELL E ออกทั้งหมด)
<TD> Cell F </TD> <-- กำหนดเซลล์แต่ละเซลล์
</TR> <-- แท็กสิ้นสุดแถวที่สอง
</TABLE> <-- แท็กปิดของตาราง
และมีการเปลี่ยนแปลงเล็กน้อยในการใช้ ROWSPAN= attribute:
 

Cell A Cell B Cell C Cell D Cell E

Row 1 Row 2

ให้สังเกต Cell C ตอนนี้ได้ถูกยืดออกหรือถูกขยายคร่อม 2 เซลล์ และ 2 แถว
นี้คือ Code ที่ใช้ในการสร้างตารางข้างบน
<TABLE Border=1> <-- แท็กเปิดของตารางพร้อมเส้นขอบ
<TR> <-- แท็กเริ่มต้นแถวแรก
<TD> Cell A </TD> <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell B </TD> <-- กำหนดเซลล์แต่ละเซลล์

<TD ROWSPAN=2> Cell C </TD> <-- กำหนดเซลล์แต่ละเซลล์
</TR> <-- แท็กสิ้นสุดแถวแรก
<TR> <-- แท็กเริ่มต้นแถวที่สอง
<TD> Cell D </TD> <-- กำหนดเซลล์แต่ละเซลล์

<TD> Cell E </TD> <-- กำหนดเซลล์แต่ละเซลล์
(สังเกตว่าผมตัด CELL F ออกทั้งหมดเพราะ CELL C ได้ใช้พิ้นที่แล้ว)
</TR> <-- แท็กสิ้นสุดแถวที่สอง
</TABLE> <-- แท็กปิดของตาราง

   ต่อไปนี้เป็นตัวอย่างการเขียน Code HTML สำหรับตารางในรูปแบบต่างๆ เพื่อเป็นแนวคิดในการจัดทำตารางต่อไป

R1C1 R1C2 R1C3 R1C4 R2C1 R2C2 R2C3 R2C4 R3C1 R3C2 R3C3 R3C4 R4C1 R4C2 R4C3 R4C4 Code HTML สำหรับตารางนี้ <TABLE border=2> <TR> <!-- Row 1 --> <TD align=center> R1C1 </TD> <TD align=center> R1C2 </TD> <TD align=center> R1C3 </TD> >TD align=center> R1C4 </TD> </TR> <TR> <!-- Row 2 --> <TD align=center> R2C1 </TD> <TD align=center> R2C2 </TD> <TD align=center> R2C3 </TD> <TD align=center> R2C4 </TD> </TR> <TR> <!-- Row 3 --> <TD align=center> R3C1 </TD> <TD align=center> R3C2 </TD> <TD align=center> R3C3 </TD> <TD align=center> R3C4 </TD> </TR> <TR> <!-- Row 4 --> <TD align=center> R4C1 </TD> <TD align=center> R4C2 </TD> <TD align=center> R4C3 </TD> <TD align=center> R4C4 </TD> </TR> </TABLE>

R1C1 R1C2 R1C4 R2C1 R2C4 R3C1 R3C4 R4C1 R4C4 Code HTML สำหรับตารางนี้ <TABLE border=2> <TR> <!-- Row 1 --> <TD align=center> R1C1 </TD> <TD align=center colspan=2 rowspan=4> R1C2 </TD> <TD align=center> R1C4 </TD> </TR> <TR> <!-- Row 2 --> <TD align=center> R2C1 </TD> <TD align=center> R2C4 </TD> </TR> <TR> <!-- Row 3 --> <TD align=center> R3C1 </TD> <TD align=center> R3C4 </TD> </TR> <TR> <!-- Row 4 --> <TD align=center> R4C1 </TD> <TD align=center> R4C4 </TD> </TR> </TABLE>

R1C1 R2C1 R2C2 R2C3 R2C4 R3C1 R4C1 R4C2 R4C3 R4C4 Code HTML สำหรับตารางนี้ <TABLE border=2> <TR> <!-- Row 1 --> <TD align=center colspan=4> R1C1 </TD> </TR> <TR> <!-- Row 2 --> <TD align=center> R2C1 </TD> <TD align=center> R2C2 </TD> <TD align=center> R2C3 </TD> <TD align=center> R2C4 </TD> </TR> <TR> <!-- Row 3 --> <TD align=center colspan=4> R3C1 </TD> </TR> <TR> <!-- Row 4 --> <TD align=center> R4C1 </TD> <TD align=center> R4C2 </TD> <TD align=center> R4C3 </TD> <TD align=center> R4C4 </TD> </TR> </TABLE>