Issuu on Google+

1

สาระสาคัญ การนาเสนอข้อมูลที่เป็ นรายการหรื อสถิติต่างๆ โดยทัว่ ไปจะนาเสนอข้อมูลในรู ปของตาราง เพื่อความเป็ นระเบียบเรี ยบร้อยและง่าย ต่อการทาความเข้าใจ ตัวอย่างการนาเสนอข้อมูลในรู ปของตาราง เช่น สถิติผูป้ ระสบอุบตั ิเหตุในช่วงวันสงกรานต์ ปี 2549 , สถิติคะแนนการ สอบวัดความรู ้ระดับชาติ เป็ นต้น โดยที่แท็กในภาษา HTML ที่ใช้ในการสร้างตารางคือ <TABLE>...</TABLE> พร้อมทั้งแท็กประกอบในการสร้างตาราง เช่น สร้าง แถว , สร้างคอลัมภ์ , กาหนดสี เส้นขอบตาราง , กาหนดขนาดตาราง , การแทรกรู ปภาพลงในตาราง , การจัดตาแหน่งตาราง เป็ นต้น

สาระการเรียนรู้ประจาหน่ วย  คาสั่งหลักในการสร้างตารางของภาษา HTML  คาสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML ผลการเรียนรู้ที่คาดหวังประจาหน่ วย  อธิบายการใช้คาสัง่ เกี่ยวกับการสร้างตารางได้  สามารถใช้คาสั่งเกี่ยวกับการสร้างตารางได้  สามารถเรี ยกดูแฟ้ ม HTML ทางโปรแกรมเว็บบราวเซอร์ ได้


2

Tables : การสร้ างตาราง ตารางจะควบคุมการแสดงผลของข้อความ รู ปภาพ ปุ่ มเมนู ต่างๆ ให้รวมเป็ นกลุ่ม ในเว็บเพจที่ใช้เทคนิคนี้แม้ว่าเราจะมองไม่เห็นเส้น ขอบตาราง (เพราะกาหนดให้ซ่อนเส้นขอบไว้) แต่เราสามารถมองเห็นขอบเขตของตารางช่องต่างๆ ได้ ซึ่ งเราจะได้ศึกษาเทคนิควิธีการในบทนี้ และบทต่อๆ ไป รูปแบบคาสั่ ง <TABLE>...............................</TABLE> <CAPTION>..........................</CAPTION> <TR>........................................</TR> <TH>........................................</TH> <TD>........................................</TD>

คาอธิบาย คาสัง่ ที่กาหนดให้บราวเซอร์ สร้างตาราง คาสั่งที่ใช้ต้ งั ชื่อหรื อหัวข้อเรื่ องให้กบั ตาราง คาสั่งสาหรับสร้างแถวในตาราง (ROW) คาสั่งสาหรับกาหนดข้อมูลส่ วนหัวของตาราง คาสั่งสาหรับสร้างแถวในตาราง (ROW)

ตัวอย่างเป็ นการสร้ างตาราง 2 แถว 2 คอลัมน์ รูปแบบคาสั่ ง <TABLE> <CAPTION>ชื่อตาราง</CAPTION> <TR> <TH> ข้อมูลส่ วนหัว1</TH> <TH> ข้อมูลส่ วนหัว2</TH> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE>

การแสดงผล

ชื่อตาราง ข้ อมูลส่ วนหัว 1 ข้ อมูลส่ วนหัว 2 ช่องที่ 1

ช่องที่ 2

ช่องที่ 3

ช่องที่ 4

ถ้าดูจากการแสดงผลฝั่งขวาแล้วจะเห็นว่าไม่เห็นมีตารางอะไรเลย เห็นเพียงข้อความ 4 ชุดในสองแถวเท่านั้นเอง แต่ในความเป็ นจริ งมี ตารางอยูแ่ ต่ไม่แสดงเส้นขอบ ซึ่ งในคาสั่ง <TABLE> เองเราสามารถเพิ่มคุณสมบัติการแสดงเส้นขอบด้วยการเพิ่ม border="x" เมื่อ x เป็ นตัวเลข ขนาดพิกเซล (ปกติถา้ ไม่กาหนดจะมีค่าเป็ น 0)


3

รูปแบบคาสั่ ง <TABLE BORDER="1" > <CAPTION>ชื่อตาราง</CAPTION> <TR> <TH> ข้อมูลส่ วนหัว1</TH> <TH> ข้อมูลส่ วนหัว2</TH> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE>

การแสดงผล

ชื่อตาราง ข้ อมูลส่ วนหัว 1 ข้ อมูลส่ วนหัว 2 ช่องที่ 1

ช่องที่ 2

ช่องที่ 3

ช่องที่ 4

หมายเหตุ คาสัง่ <CAPTION>............</CAPTION> และ <TH>..............</TH> อาจไม่จาเป็ นต้องใส่ กไ็ ด้ การกาหนดตาแหน่ งการจัดวางตาราง เราสามารถกาหนดตาแหน่งการวางตารางได้ 3 รู ปแบบ รูปแบบคาสั่ ง <TABLE BORDER="1" WIDTH="90%"> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE>

การแสดงผล

ช่องที่ 1

ช่องที่ 2

ช่องที่ 3

ช่องที่ 4

Specifying table sizes : การกาหนดความกว้ างของตาราง เราสามารถกาหนดความกว้างของตารางด้วยการกาหนดค่าในหน่วยเปอร์ เซนต์ของหน้าจอ (ความกว้างจะขยายตามขนาดบราวเซอร์ ) และในหน่วยพิกเซล (ความกว้างจะคงที่ไม่ขยายตามบราวเซอร์ ) ด้วยการเพิ่มส่ วนขยาย WIDTH="x" เข้าไปภายในคาสั่ง <TABLE> เช่นเดียวกับการแสดงเส้นขอบ


4

รูปแบบคาสั่ ง <TABLE BORDER="1" WIDTH="90%"> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE> <TABLE BORDER="1" WIDTH="260" HEIGHT="100"> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE>

การแสดงผล

ช่องที่ 1

ช่องที่ 2

ช่องที่ 3

ช่องที่ 4

ช่องที่ 1

ช่องที่ 2

ช่องที่ 3

ช่องที่ 4

เราสามารถกาหนดความสู งของตารางได้เช่นเดียวกัน ด้วยการระบุส่วนขยายเป็ น HEIGHT="x" แต่ค่า x ต้องเป็ นหน่วยพิกเซลเท่านั้น จากตัวอย่างด้านบนจะเห็นว่า ในตารางแต่ละแถวและแต่ละคอลัมน์จะแบ่งออกเป็ นสองส่ วน เท่ากันโดยอัตโนมัติ แต่อย่างไรก็ตาม ความกว้างและความสู งของตารางอาจจะขยายออกไปให้พอดีกบั จานวนตัวอักษรหรื อขนาดของรู ปที่ใหญ่เกินกว่า ขนาดของตารางได้ (ควรระวังในการกาหนดขนาด) Text alignment in table cells : การกาหนดการจัดวางข้อความ โดยปกติเมื่อป้ อนข้อความในตารางเราจะเห็นข้อความปรากฏทางด้านซ้ายของตาราง เราสามารถกาหนดให้ขอ้ ความอยูใ่ นตารางตาม แนวนอน โดยใช้ส่วนขยาย ALIGN="LEFT/CENTER/RIGHT" (เลือกตาแหน่งตามที่ตอ้ งการจากคาทั้ง 3) ถ้าไม่กาหนดตาแหน่ง ค่าปกติจะ เป็ นซ้าย (left) <TD ALIGN="LEFT"> หรื อ <TD ALIGN="CENTER"> หรื อ <TD ALIGN="RIGHT"> นอกจากการกาหนดตาแหน่งข้อความในแนวนอนแล้ว ยังสามารถกาหนดตาแหน่งตามแนวตั้งได้เช่นกัน โดยใช้ส่วนขยาย VALIGN="TOP/MIDDLE/BOTTOM" (เลือกตาแหน่งตามที่ตอ้ งการจากคาทั้ง 3) ถ้าไม่กาหนดตาแหน่ง ค่าปกติจะเป็ นซ้าย (middle) <TD VALIGN="TOP"> หรื อ <TD VALIGN="MIDDLE"> หรื อ <TD ALIGN="BOTTOM">


5

รูปแบบคาสั่ ง <TABLE BORDER="1" WIDTH="95%" HEIGHT="100"> <TR> <TD align="left" valign="top">ซ้ายบน</TD> <TD align="right" valign="middle">ขวากลาง</TD> </TR> <TR> <TD align="center" valign="bottom">กลางล่าง</TD> <TD align="right" valign="top">ขวาบน</TD> </TR> </TABLE> การแสดงผล ซ้ายบน

ขวากลาง กลางล่าง

ขวาบน

Images in table cells : การแทรกภาพในตาราง อย่างที่บอกไว้แล้วว่า ตาราง สามารถที่จะควบคุมตาแหน่งของรู ปภาพและข้อความให้อยูใ่ นที่ที่เราต้องการได้ การแทรกรู ปภาพเราจะ แทรกเข้าไปในเซลใดๆ ก็ได้ตามต้องการ โดยยังใช้คาสั่ง <IMG> แทรกระหว่าง <TD> ... lt;/TD>


6

รูปแบบคาสั่ ง <HTML> <HEAD> <TITLE>Images in Table : แทรกรู ปภาพในตาราง</TITLE> </HEAD> <BODY> <TABLE BORDER="1"> <TR> <TD><IMG SRC="images/chickenlittle01.gif"> </TD> <TD> รู ปด้านข้างนี้คือ chickenlittle </TD> </TR> </TABLE> </BODY> </HTML> การแสดงผล

รู ปด้านข้างนี้คือ chickenlittle

END : สรุปคาสั่ งที่ใช้ ในบทนี้ TAGS

รายละเอียด

<TABLE> ... </TABLE>

คาสั่งกาหนดการสร้างตาราง ซึ่ งในคาสั่งนี้สามารถเพิ่มเติมส่ วนขยายให้กบั ตารางได้อีกมาก เช่น เส้นขอบ สี พ้นื ตาราง การจัดข้อความทั้งในแนวตั้งและแนวนอน

<TR> ... </TR>

คาสั่งกาหนดการสร้างแถว (Table Row)

<TD> ... </TD>

คาสั่งกาหนดช่องตารางหรื อเซล หรื อคอลัมน์ (Table Data) สาหรับบรรจุขอ้ มูล ตัวอักษร ภาพ

<TH> ... </TH>

คาสั่งกาหนดช่องตารางหรื อเซล หรื อคอลัมน์ที่เป็ นหัวตาราง (Table Heading) เหมือนกับ <TD> แต่ขอ้ ความที่บรรจุระหว่างคาสั่งนี้จะเป็ นตัวหนาและจัดกึ่งกลางเสมอ


7

Cell padding : ระยะห่ างจากเส้ นขอบของตาราง เราสามารถกาหนดระยะห่าง ทั้งแนวตั้งและแนวนอนของข้อความและรู ปภาพจากเส้นขอบภายในช่องตารางได้ ด้วยการกาหนดค่า CELLPADDING="x" เมื่อ x มีหน่วยเป็ นพิกเซล (ค่าปกติถา้ ไม่ค่า padding จะมีค่าเป็ น 1 เสมอ) ถ้าเราต้องการให้ไม่มีการเว้นระยะจากขอบ สามารถกาหนดค่าให้เป็ น 0 ได้ รูปแบบคาสั่ ง <TABLE BORDER="1" WIDTH="450" CELLPADDING="10"> <TR> <TD>ข้อความภายในตารางที่กาหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</TD> <TD><IMG SRC="chicklittle.gif" border="1"></TD> </TR> <TR> <TD>ข้อความในตารางที่ระยะห่างเท่ากับ 10 พิกเซล</TD> <TD>chicklittle</TD> </TR> </TABLE> Cell spacing : ระยะห่ างระหว่ างช่ องตาราง

ในการสร้างตารางขนาด 2 แถว 2 คอลัมน์ (4 ช่อง) นั้น ถ้าเราจินตนาการถึงรู ปสี่ เหลี่ยมใหญ่ที่มีรูปสี่ เหลี่ยมเล็ก 4 รู ปวางซ้อนกันอยูจ่ ะ ทาให้เรามองเห็นว่า ในตารางจะมีเส้นขอบอยู่ 2 เส้นคือ เส้นขอบของสี่ เหลี่ยมใหญ่ภายนอก และเส้นขอบของสี่ เหลี่ยมเล็กที่อยูภ่ ายใน ระยะห่าง ระหว่างเส้นขอบทั้งสองนี้เราเรี ยกว่า Cell spacing ค่าปกติของระยะห่างของเส้นขอบตารางคือ 2 ถ้าเราต้องการเส้นขอบที่บางมากๆ สามารถ กาหนดเป็ นค่า 0 ได้ รูปแบบคาสั่ ง <TABLE BORDER="3" WIDTH="450" CELLSPACING="10"> <TR> <TD>ข้อความภายในตารางที่กาหนดระยะห่างจากเส้น���อบ padding ไว้ในตาราง</TD> <TD><IMG SRC="chicklittle.gif" border="1"></TD> </TR> <TR> <TD>ข้อความในตารางที่ระยะห่างเท่ากับ 10 พิกเซล</TD> <TD>kero</TD> </TR> </TABLE>


8

Tables and Images : ตารางและรูปภาพ ในบทเรี ยนที่ผ่านมาเราเคยใช้รูปภาพสาหรับทาเป็ นจุดเชื่อมโยงไปยังหน้าเว็บไซต์ต่างๆ มาแล้ว และเราคงเคยพบว่ามีหลายเว็บเซต์ใช้ รู ปภาพเดียวกันแต่สามารถคลิกที่ตาแหน่งต่างๆ บนภาพแล้วจะนาไปสู่ เว็บไซต์ที่แตกต่างกัน เทคนิคง่ายๆ ที่ทาได้คือการตัดซอยรู ปออกเป็ น ส่ วนๆ นาไปบรรจุในตาราง แล้วสร้างจุดเชื่อมโยงไปยังหน้าเว็บไซต์ต่างๆ ได้ นอกจากนี้แล้ว ตารางยังใช้ประโยชน์ในการนาเสนอรู ปภาพขนาดใหญ่บนหน้าเว็บเพจได้ เนื่องจากการนาภาพขนาดใหญ่ 1 ภาพมา แสดงในหน้าเว็บเพจนั้นจะใช้เวลาในการแสดงผลนาน (จากการโหลดไฟล์จากเครื่ องแม่ข่ายมายังเครื่ องผูช้ ม) จึงต้องใช้เทคนิคในการตัดซอย รู ปภาพออกเป็ นส่ วนๆ ด้วยโปรแกรมตกแต่งภาพ จากนั้นนาภาพขนาดเล็กมาบรรจุลงในช่องตารางและเพื่อให้การแสดงผลเป็ นภาพเพียงภาพ เดียวต่อกันเราจะต้องกาหนดระยะห่างระหว่างภาพและขอบตารางดังตัวอย่าง END : สรุปคาสั่ งที่ใช้ ในบทนี้ TAGS

รายละเอียด

CELLPADDING="x"

คาสั่งกาหนดระยะห่างระหว่างตัวอักษรหรื อขอบรู ปภาพกับเส้นขอบตาราง มีหน่วยเป็ น พิกเซล

CELLSPACING="x"

คาสั่งกาหนดระยะห่างระหว่างช่องตารางแต่ละช่องกับเส้นขอบ มีหน่วยเป็ นพิกเซล

Table background color : ตารางและสี พื้นหลัง เราสามารถใช้สีเป็ นพื้นหลังของตารางได้ ด้วยการกาหนดเพิ่มคุณสมบัติ BGCOLOR="color name" ภายในคาสั่ง <TABLE> ซึ่ งจะมี ผลกับทุกช่องในตารางนั้น รูปแบบคาสั่ ง <TABLE WIDTH="250" BGCOLOR="#FF0000" HEIGHT="100"> <TR> <TD WIDTH="50%">A</TD> <TD WIDTH="50%">B</TD> </TR> <TR> <TD>C</TD> <TD>D</TD> </TR> </TABLE>

การแสดงผล

A

B

C

D


9

ในตัวอย่างข้างบนเป็ นการกาหนดสี ของตารางทั้งหมด เราสามารถกาหนดสี ให้แต่ละแถวมีความแตกต่างกันได้ดว้ ยการเพิ่มคุณสมบัติ BGCOLOR="color name" ให้กบั คาสัง่ <TR> ดังตัวอย่าง รูปแบบคาสั่ ง <TABLE WIDTH="250" BGCOLOR="#ffff00" HEIGHT="100"> <TR BGCOLOR="#66ff00"> <TD WIDTH="50%">A</TD> <TD WIDTH="50%">B</TD> </TR> <TR BGCOLOR="#ff99ff"> <TD>C</TD> <TD>D</TD> </TR> </TABLE>

การแสดงผล

A

B

C

D

ในทานองเดียวกัน หากเราต้องการเปลี่ยนสี เฉพาะช่องใดช่องหนึ่งก็สามารถทาได้ ด้วยการนาคุณสมบัติ BGCOLOR= "color name" ไปเพิ่ม ให้กบั คาสั่ง <TD> ก็จะเกิดผลตามที่เราต้องการได้ เช่นเราต้องการให้ช่อง B เป็ นสี ขาว และช่อง C เป็ นสี เทาก็สามารถเปลี่ยนได้ดงั ตัวอย่าง รูปแบบคาสั่ ง <TABLE WIDTH="250" BGCOLOR="#ffff00" HEIGHT="100"> <TR BGCOLOR="#66ff00"> <TD WIDTH="50%">A</TD> <TD WIDTH="50%" BGCOLOR="white">B</TD> </TR> <TR BGCOLOR="#ff99ff"> <TD BGCOLOR="#808080">C</TD> <TD>D</TD> </TR> </TABLE>

การแสดงผล

A

B

C

D

สรุปการใช้ คาสั่ ง BGCOLOR เป็ นคุณสมบัติเพิ่มเติมขยายให้ กับตารางจะมีผลแตกต่ างกัน เมื่อนาไปเพิ่ม ณ คาสั่ งต่ างๆ ดังนี้  เมื่อนาไปขยาย <TABLE> จะมีผลทาให้ตารางนั้นทั้งตารางเปลี่ยนสี ไปตามค่าสี ที่กาหนดไว้  เมื่อนาไปขยาย <TR> จะมีผลทาให้เฉพาะแถวนั้นมีค่าสี เปลี่ยนไปตามที่กาหนดไว้  เมื่อนาไปขยาย <TD> จะมีผลทาให้เฉพาะช่อง (หรื อเซล) นั้นมีค่าสี เปลี่ยนไปตามที่กาหนดไว้


10

Column Span : การผนวกช่ องเซล (คอลัมน์ )  ในบางครั้งเรามีความจาเป็ นที่จะต้องรวมเซลภายในแถวเข้าด้วยกัน อย่างตัวอย่างนี้ เรามีตารางชนิด 2*3 จานวน 6 ช่อง ถ้าเราต้องการ ผนวกช่อง A และ B เข้าด้วยกัน ในการสร้างตารางก็จะเหลือแถวบนเพียง 2 ช่อง แถวล่างมี 3 ช่อง ดังภาพ

รูปแบบคาสั่ ง <TABLE WIDTH="250" BORDER="1" BGCOLOR="#ffff00"> <TR> <TD>AB</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

การแสดงผล

AB

C

D

E

F

จากตัวอย่างโคีดคาสั่งด้านบนจะเห็นว่า การแสดงผลของแถวแรกผิดพลาด เพราะช่อง AB ไม่ขยายออกไป และช่อง C ก็ไม่ได้อยูท่ ี่ตาแหน่งริ ม ขอบตาราง (เหนือช่อง F) วิธีการแก้ไขเราจะต้องมีการสั่งให้มีการขยายช่อง AB ออกไปเพื่อให้ผนวกเซลทั้งสองเข้าด้วยกัน โดยใช้คาสั่ง COLSPAN="x" ขยายในคาสั่ง <TD> เมื่อ x คือจานวนช่องที่ผนวกเข้าด้วยกันดังตัวอย่างข้างล่าง


11

รูปแบบคาสั่ ง <TABLE WIDTH="250" BORDER="1" BGCOLOR="#ffff00"> <TR> <TD COLSPAN="2">AB</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

การแสดงผล

AB D

C E

F

Row Span : การผนวกแถวในตาราง เช่นเดียวกับหัวข้อที่ผ่านมา ในบางครั้งเราก็มีความจาเป็ นในการรวมเซลข้ามแถวเข้าด้วยกัน อย่างตัวอย่างนี้ เรามีตารางชนิด 2*3 จานวน 6 ช่อง ถ้าเราต้องการผนวกช่อง A และ D ซึ่ งอยูค่ นละแถวเข้าด้วยกัน ในการสร้างตารางก็จะเหลือแถวบน 3 ช่อง โดยช่องแรกจะต้อง ขยายไปคลุมพื้นที่ในแถวที่สองด้วย ดังนั้นแถวที่สองจึงมีเพียง 2 ช่อง ดังภาพ การขยายแถวลงไปต้องใช้คาสัง่ ROWSPAN="x" ขยายช่องเซล A ในคาสั่ง <TD> เช่นเดียวกัน

รูปแบบคาสั่ ง <TABLE WIDTH="250" BORDER="1" BGCOLOR="#ff00ff"> <TR> <TD ROWSPAN="2">AD</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

การแสดงผล

AD

B

C

E

F


12

จากตัวอย่างที่ผ่านมาทั้งสองกรณี เราสามารถจะนามารวมกันเพื่อสร้างตารางที่มีความซับซ้อนได้ เช่น การสร้างตารางบรรจุขอ้ มูลและ รู ปภาพให้มีความสวยงามอาจจะมีการผนวกเซล และผนวกแถวภายในตารางเดียวกัน จึงควรหมัน่ ฝึ กฝนในการสร้างตารางที่พิเศษออกไปกว่า ปกติ ลองคลิกดูที่ตวั อย่างแล้วปฏิบตั ิดู Nested Tables : ตารางซ้ อนในตาราง ในบางครั้งการออกแบบหน้าเว็บเพจ เราอาจจะมีความประสงค์ในการควบคุมการแสดงผลที่สลับซับซ้อนลงไป เช่น เราต้องการสร้าง เนื้อหาที่มีเส้นกรอบรอบตารางแสดงขอบเขต ในขณะเดียวกัน เราก็ตอ้ งการแทรกรู ปภาพและข้อความลงไปภายในเซลของตาราง และต้องการ จะตรึ งภาพและข้อความนั้นไว้ แต่ไม่ตอ้ งการแสดงเส้นตารางให้ผชู ้ มเห็น ดังในภาพข้างล่างนี้นามาจากเว็บไซต์ www.cnn.com

จากภาพด้านบนจะเห็นว่ามีการแบ่งตารางบรรจุรูปภาพและข้อความเป็ น 3 คอลัมน์ และมีหลายแถวเรี ยงลาดับลงไป (ตัดมาให้เห็น 2 แถว) ถ้าพิจารณาเฉพาะแถวบนจะมี 3 ช่องตาราง คือ OFFBEAT NEWS, BUSINESS NEWS, MORE REPORTS ถ้าเราพิจารณาเฉพาะส่ วน OFFBEAT NEWS ที่วาดเส้นสี เขียวนั้นคือตารางย่อย 1 ตารางมี 2 แถว 3 ช่อง แถวบนมีเพียงหนึ่งช่องใหญ่ จะมีตารางบรรจุเส้นสี แดงและข้อความ TOP DOG และรู ปภาพหัวข้อ OFFBEAT NEWS ในแถวที่สองจะมี 2 ช่อง ช่องด้านซ้ายมือจะมี ข้อความ และช่องขวามือจะบรรจุภาพสุ นขั ไว้ ในกรณี เช่นนี้การนาเอาตารางเข้าไปแทรกภายในตารางอีกครั้งหนึ่ง จึงเป็ นทางออกที่มีการนามาใช้กนั มาก และตารางก็เป็ นเครื่ องมือ ที่ทรงพลังในการจัดหน้าตาเว็บเพจนั้นให้ดูดีอีกด้วย ลองดูตวั อย่างโค๊ดคาสั่งนี้เป็ นการแทรกตารางในตารางแบบง่ายๆ END : สรุปคาสั่ งที่ใช้ ในบทนี้ TAGS BGCOLOR="color name"

รายละเอียด คุณสมบัติของการกาหนดสี พ้นื หลังของตารางที่ให้ผลแตกต่างกันเมื่ออยูห่ ลังคาสั่งต่างกัน   

อยูใ่ นคาสั่ง TABLE สี ที่กาหนดจะมีผลกับทั้งตาราง อยูใ่ นคาสั่ง TR สี ที่กาหนดจะมีผลกับแถวนั้นแถวเดียว อยูใ่ นคาสั่ง TD สี ที่กาหนดจะมีผลกับช่องเซลนั้นช่องเดียว

COLSPAN="x"

คาสัง่ ผนวกเซลเข้าด้วยกัน (ในแถวเดียวกัน) ค่า x คือจานวนเซลที่รวมกันตามแนวนอน

ROWSPAN="x"

คาสั่งผนวกแถวเข้าด้วยกัน ค่า x คือจานวนแถวที่ผนวกรวมกันตามแนวตั้ง


html