chatura: บทที่ 8 เรืองการสร้างตาราง

บทที่ 8 การสร้างตาราง

การแสดงข้อมูลที่มีความสัมพันธ์ในลักษณะของแถวและคอลัมน์ ต้องแสดงข้อมูลในลักษณะของตารางเพื่อที่จะทำความเข้าใจกับข้อมูลที่ทำการแสดงผล

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

คำสั่งที่ใช้ในการสร้างตาราง

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

• <TABLE> กำหดการสร้างตาราง และคำสั่งปิดคือ </TABLE>

• <CAPTION> เป็นการกำหนดคำหรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ<CAPTION>

• <TR> เป็นการกำหนดแถวของตาราง และคำสั่งปิดคือ </TR>

• <TH> เป็นการกำหนดหัวเรื่องในคอลัมน์ และคำสั่งปิดคือ </TH>

• <TD> เป็นการกำหนดข้อมูลในแต่และสดมภ์ในตาราง และคำสั่งปิดคือ </TD>

การใช้งานคำสั่ง ถ้าทำการเปิดด้วยคำสั่งใด ต้องทำการปิดด้วยคำสั่งนั้น เช่นเดียวกับการเปิด-ปิดวงเล็บของสมการทางคณิตศาสตร์

ตัวอย่างการสร้างตาราง

<TITLE> โปรแกรมแรกของดิฉัน </TITLE>

</HEAD>
<BODY>

                <table border = "1">
                <caption> ข้อความส่วนบนของตาราง </caption>
                <tr><th>คอลัมภ์ ที่ 1 </th><th> คอลัมภ์ที่ 2 </th></tr>
                <tr><td>ข้อมูลแถว ที่ 1/1 </td><td>ข้อมูลแถวที่ 1/2 </td></tr>
                <tr><td>ข้อมูลแถว ที่ 2/1 </td><td>ข้อมูลแถวที่ 2/2 </td></tr>
                </table>

</BODY>
</HTML>

การกำหนดเส้นขอบของตาราง

ข้อมูลในตารางจะแบ่งเป็นส่วนอย่างชัดเจน โดยมีเส้นกรอบล้อมรอบแต่ละช่องของข้อมูลหรือเส้นขอบของตารางเพื่อความสวยงามของเว็บเพจ ผู้ที่ทำการออกแบบเว็บเพจจะไม่แสดงส้นกรอบนั้นเพื่อความสวยงาม การกำหนดเส้นขอบของตารางสามารถกำหนดโดยใช้การกำหนดคุณลักษณะพิเศษของคำสั่ง คำสั่งที่ใช้ในการกำหนดลักษณะพิเศษเพิ่มเติมนั้น คือ Border ใช้ในการกำหนดขนาดของเส้นขอบและ Bordercolor ในการกำหนดสีของเส้นขอบ โดยมีรูปแบบการใช้งานคำสั่งดังนี้คือ

ตัวอย่างการสร้างตาราง

<HTML>

<HEAD>

<TITLE><B>ชื่อเรื่องของตาราง</B></TITLE>

</HEAD>

<BODY>

<TABLE>

<CAPTION>ชื่อเรื่องของตาราง</CAPTION>

<TR>

</TR>

<TR>

<TD>มอส มอดไหม้</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

</BODY>

</HTML>

ตัวอย่างการกำหนดสีเส้นขอบของตาราง

<HTML>

<HEAD>

<TITLE>ชื่อเรื่องของตาราง</TITLE>

</HEAD>

<BODY>

<CAPTION><B>ชื่อเรื่องของตาราง</B></CAPTION

ตัวอย่างการกำหนดรูปแบบเส้นขอบตาราง

<HTML>

<HEAD>

<TITLE>ชื่อเรื่องของตาราง</TITLE>

</HEAD>

<BODY>

ตัวอย่างการปรับขนาดของตาราง

<HTML>

<HEAD>

<TITLE>ชื่อเรื่องของตาราง</TITLE>

</HEAD>

<BODY>

ตัวอย่างการกำหนดสีพื้นหลังของตาราง
<HTML>

<HEAD>

<TITLE>ชื่อเรื่องของตาราง</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

</HTML>

ตัวอย่างกำหนดสีพื้นหลังเฉพาะแถวแรก

<HTML>

<HEAD>

<TITLE>ชื่อเรื่องของตาราง</TITLE>

</HEAD>

<BODY>

<CAPTION><B>ชื่อเรื่องของตาราง</B></CAPTION>

การกำหนดความกว้างและความสูงของตาราง

การกำหนดความกว้างและความสูงของตาราง สามารถทำได้โดยใช้คำสั่งสำหรับกำหนดคุณลักษณะพิเศษเพิ่มเติมที่อยู่ภายใต้คำสั่ง <TABLE> โดยคำสั่งที่ใช้สำหรับกำหนดคุณสมบัติพิเศษเพิ่มเติมนั้น คือ WIDTH เพื่อใช้สำหรับกำหนดความกว้างของตารางและ HEIGHT สำหรับกำหนดความสูงขงตาราง สามารถกำหนดได้ 2 ลักษณะคือ กำหนดเป็นเปอร์เซ็นต์ของจอภาพ และกำหนดเป็นจำนวนพิกเซล มีรูปแบบการใช้คำสั่งดังนี้

<TABLE WIDTH = “ ความกว้างของตาราง ” HEIGHT = “ ความสูงของตาราง ”

ตัวอย่างการกำหนดความกว้างและความสูงของตาราง

            <html>
                <head>
                <title>การสร้างตาราง</title>
                </head>
                <body>
                                <br>การกำหนดความกว้างและความสูงของตาราง </br>
                <hr>
                                <table border="1" cellspacing="5" width="500" height="400">
                               <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
                               <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
                               <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
                               <tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
                </table>
                </body>
                </html>

การกำหนดระยะเว้นขอบภายในเซลข้อมูล

การกำหนดระยะเว้นขอบภายในของเซลข้อมูลในตารางจะมีผลต่อการแสดงผลทำให้พื้นที่ว่างที่แสดงผลข้อมูลในแต่ละเซลแต่ละคอลัมน์ พื้นที่ช่องว่างสามารถทำการกำหนดได้เป็นค่าของพิกเซลและเปอร์เซ็นต์ การกำหนดระยะเว้นขอบภายในเซลสามารถทำการกำหนดได้โดยใช้คำสั่งการกำหนดคุณลักษณะพิเศษเพิ่มเติมนี้คือ Cellpadding รูปแบบการใช้งานคำสั่งสามารถแสดงได้ดังนี้

ตัวอย่างการกำหนดระยะเว้นขอบภายในเซลล์ข้อมูลในตาราง

<HTML>

<HEAD>

<TITLE>Cellspacing_Cellpadding</TITLE>

</HEAD>

<BODY>

<caption> ใบลงทะเบียน</caption>

<tr>

<th> รหัสคอม</th> <th> รหัสวิชา</th> <th> ชื่อวิชา</th> </tr>

<tr> <td> <center> 2708</center> </td> <td> <center> 137- 406</center> </td> <td> โครงงานด้านคอมพิวเตอร์ธุรกิจ</td> </tr>

<tr> <td> <center> 2713</center> </td> <td> <center> 137- 407</center> </td> <td> สัมมนาคอมพิวเตอร์ธุรกิจ</td> </tr>

<tr> <td> <center> 2208</center> </td> <td> <center> 130- 304</center> </td> <td> ธุรกิจและสิ่งแวดล้อม</td> </tr>

</table>

</BODY>

</HTML>

การกำหนดตำแหน่งของตาราง

การกำหนดตำแหน่งของตารางที่แสดงผลบนหน้าจอของโปรแกรมเว็บเบราว์เซอร์ ว่าจะให้อยู่ที่ตำแหน่งกึ่งกลาง ชิดซ้ายหรือชิดขวา สามารถทำได้โดยใช้คำสั่งการกำหนดคุณลักษณะพิเศษเพิ่มเติมของคำสั่ง <TABLE> โดยคำสั่งที่ใช้กำหนดคุณลักษณะพิเศษเพิ่มเติมนี้คือ Align โดยต่อด้วยส่วนขยายเพิ่มเติมดังนี้

• Left จัดวางตารางชิดด้านซ้ายของบรรทัด

• Right จัดวางตารางชิดด้านขวาของบรรทัด

• Center จัดวางตารางอยู่กึ่งกลางของบรรทัด

โดยมีรูปแบบการใช้งานคำสั่งดังนี้

<TABLE Align = “ตำแหน่งของตาราง”

ตัวอย่างการกำหนดตำแหน่งของตาราง

<HTML>

<HEAD>

<TITLE>ตัวอย่างตาราง</TITLE>

</HEAD>

<BODY>

<CAPTION>หัวเรื่องของตาราง</CAPTION>

<TR><TD>แถวที่ 1 ข้อมูลที่ 1</TD><TD>แถวที่ 1 ข้อมูลที่ 2</TD ><TD>แถวที่ 1 ข้อมูลที่ 3</TD></TR>

<TR ><TD>แถวที่ 2 ข้อมูลที่ 1</TD><TD>แถวที่ 2 ข้อมูลที่ 2</TD><TD>แถวที่ 2 ข้อมูลที่ 3</TD></TR>

<TR<TD>แถวที่ 3 ข้อมูลที่ 1</TD><TD>แถวที่ 3 ข้อมูลที่ 2</TD><TD>แถวที่ 3 ข้อมูลที่ 3</TD></TR>

</TABLE>

</BODY>

</HTML>

การกำหนดสีพื้นของตาราง

การกำหนดสีพื้นของตารางนั้น ผู้ที่ทำการสร้างเว็บเพจสามารถทำการกำหนดสีพื้นให้เป็นสีตามต้องการได้ โดยใช้คำสั่งสำหรับกำหนดลักษณะพิเศษคือ Bgcolor ซึ่งเป็นคำสั่งย่อยที่อยู่ภายใต้คำสั่ง <TABLE> โดยมีรูปแบบการใช้งานคำสั่งดังนี้

ตัวอย่างการกำหนดสีพื้นในตาราง

            <html>
                <head>
                                <title>การสร้างตาราง</title>
                </head>
                <body>
                                <br>การกำหนดความกว้างและความสูงของตาราง </br>
                <hr>
                                <table border="1" cellspacing="5" width="300" height="100"          bgcolor="pink">
                               <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง                                 </caption>
                               <tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1               คอลัมน์ 2 </td></tr>
                               <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2          </td></tr>
                               <tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="#00ffcc"> แถว 3        คอลัมน์ 2 </td></tr>
                </table>
                </body>
                </html>

การกำหนดคุณลักษณะพิเศษที่เกี่ยวข้องกับแถว

การกำหนดคุณลักษณะพิเศษที่เกี่ยวกับแถวนั้น จะใช้ร่วมกับคำสั่ง <TD>, <TR>, และ<TH> โดยจะเป็นส่วนขยายเพิ่มเติมภายใต้คำสั่ง <TD>, <TR>, และ<TH>สามารถสรุปการกำหนดคุณลักษณะพิเศษที่เกี่ยวกับแถวได้ดังนี้

• Align กำหนดการจัดวางตำแหน่งข้อความในตารางในแนวนอนมีการจัดวาง 3 แบบคือ

- Left จัดวางข้อความในตารางชิดซ้าย

- Center จัดวางข้อความในตารางกึ่งกลาง

- Right จัดวางข้อความในตารางชิดขวาของตาราง

การกำหนดการจัดวางตำแหน่งข้อความในตารางแนวนอน

• Bgcolor การกำหนดสีพื้นห้กับตารางในแถวนั้น

• Valign การกำหนดข้อความในแนวตั้งของช่องตาราง แบ่งการจัดวางได้ 3 ตำแหน่งคือ

- Top จัดข้อความชิดขอบบนของช่องตาราง

- Middle จัดข้อความอยู่กึ่งกลางของช่องตาราง

- Bottom จัดข้อความชิดขอบล่างของช่องตาราง

การกำหนดข้อความในแนวตั้งของตาราง

• Rowspan การผนวกแถวของช่องตารางในด้านแนวตั้งเข้าด้วยกัน เช่น Rowspan = 4 ช่อง หมายถึง ผนวกแถวในความสูง 4 แถวเข้าด้วยกัน

• Colspan การผนวกคอลัมน์ของช่องตารางในด้านแนวนอนเข้าด้วยกัน เช่น Colspan = 4 ช่อง หมายถึง ผนวกคอลัมน์ในความกว้าง 4 คอลัมน์เข้าด้วยกัน

การใส่รูปภาพลงในตาราง

การใส่รูปภาพลงในตารางก็คล้ายกับการใส่ข้อความไว้ในตาราง โดยใช้คำสั่ง IMG SRC = “Image File” ไว้ในคำสั่ง <TD>

ตัวอย่างการใส่รูปภาพในตาราง

<html>

<title> ตารางรูปภาพ </title>

<body>

<center><table border =5>

<tr>

<td><IMG SRC =“lilies.jpg” Align = center width = 100% height = 100%

</td>

</tr>

</table>

</center>

</body>

</html>

แบบทดสอบบทที่ 8 การสร้างตาราง

1. คำสั่งที่ใช้ในการสร้างตารางข้อใดถูกต้อง

ก. <TABLE>

ข. <Center>

ค. <title>

ง. <body>

จ. ไม่มีข้อใดถูก

2. Rowspan 4 ช่อง หมายถึงอะไร

ก. ผนวกคอลัมน์ในความกว้าง 4 คอลัมน์เข้าด้วยกัน

ข. ผนวกแถวในความสูง 4 แถวเข้าด้วยกัน

ค. การกำหนดข้อความในแนวตั้ง

ง. การกำหนดสีพื้นให้กับตารางในแถว

จ. การกำหนดการจัดวางตำแหน่งข้อความในตารางในแนวนอน

3. Align มีการจัดวางแบบใดบ้าง

ก. จัดข้อความชิดขอบบนของช่องตาราง,จัดข้อความอยู่กึ่งกลางของช่องตาราง,จัดข้อความชิดขอบล่างของช่องตาราง

ข. กำหนดสีของพื้นตาราง,การเพิ่มสีของตัวอักษรภายในตาราง

ค. จัดวางข้อความในตารางชิดซ้าย,จัดวางข้อความในตาราวกึ่งกลาง,จัดวางข้อความในตารางชิดขวาของตาราง

ง. กำหนดสีของเส้นขอบตาราง,การกำหนดลวดลายของเส้นขอบตาราง

จ. กำหนดให้มีเว้นระยะขอบของเส้นขอบตาราง

4. Colspan 4 ช่องหมายถึงอะไร

ก. ผนวกคอลัมน์ในความกว้าง 4 คอลัมน์เข้าด้วยกัน

ข. ผนวกแถวในความสูง 4 แถวเข้าด้วยกัน

ค. การกำหนดข้อความในแนวตั้ง

ง. การกำหนดสีพื้นให้กับตารางในแถว

จ. การกำหนดการจัดวางตำแหน่งข้อความในตารางในแนวนอน

5. การกำหนดเส้นขอบของตารางใช้รูปแบบใด

ก. <TABLE WIDTH = “ ความกว้างของตาราง” HEIGHT=”ความสูงของตาราง” >

ข. <TABLE CELLPADPING = “ ระยะขอบภายในเซลข้อมูลในตาราง” >

ค. <TABLE Alingn = “ ตำแหน่งของตาราง” >

ง. <TABLE Border = “ ค่าตัวเลขที่เป็นขนาดของเส้นขอบ” Bordercolor = “ # RGB หรือชื่อสี” >

จ. <TABLE Bgcolor = “ # RGB หรือชื่อสี” >

6. การกำหนดความกว้างและความสูงของตารางสามารถกำหนดได้ 2 ลักษณะคือ

ก. กำหนดระยะเว้นขอบภายในและกำหนดระยะเว้นขอบภายนอก

ข. การกำหนดสีพื้นและกำหนดตำแหน่งของตาราง

ค. การกำหนดแถวและคอลัมน์

ง. กำหนดหัวเรื่องในคอลัมน์และกำหนดข้อความอธิบายตาราง

จ. กำหนดเป็นเปอร์เซ็นต์ของจอภาพและกำหนดเป็นจำนวนพิกเซล

7. โครงสร้างของตารางจะประกอบด้วยอะไร

ก. คอลัมน์และดัชนี

ข. คอลัมน์และข้อความ

ค. แถวและคอลัมน์

ง. แถวและข้อความ

จ. แถวและดัชนี

8. Cellpadding เป็นรูปแบบการใช้งานคำสั่งใด

ก. กำหนดให้มีการเว้นระยะขอบภายในเซลข้อความ

ข. กำหนดให้มีการเว้นระยะขอบของเส้นขอบตาราง

ค. กำหนดให้มีการเว้นระยะของตัวอักษรในแต่ละเซล

ง. กำหนดให้มีการเว้นช่องว่างของแถวและคอลัมน์

จ. กำหนดลวดลายของเส้นขอบตาราง

9. Bordcolor เป็นคำสั่งใด

ก. กำหนดสีของพื้นตาราง

ข. การทำลวดลายของเส้นขอบตาราง

ค. การเพิ่มสีของตัวอักษรภายในตาราง

ง. กำหนดสีของเส้นขอบตาราง

จ. กำหนดความกว้างและความสูง

10. การกำหนดแถวของตารางใช้คำสั่งใด

ก. <TD>

ข. <TH>

ค. <Table>

ง. <TR>

จ. <title>

เฉลยแบบทดสอบบทที่ 8 การสร้างตาราง

1. ก.

2. ข.

3. ค.

4. ก.

5. ง.

6. จ.

7. ค.

8. ก.

9. ง.

10. ง.

ที่มา หนังสือการสร้างเว็บเพจ(ภาษา HTML)

www.google.com

จัดทำโดย

นางสาวจตุรา ชูจันทร์ ชั้น ปวส.2/5

นางสาวเบญจวรรณ วรรณฤกธิ์ ชั้น ปวส.2/5

นางสาวสุภิตา โส๊สันสะ ชั้น ปวส.2/5

chatura

วันจันทร์ที่ 24 มกราคม พ.ศ. 2554

บทที่ 8 เรืองการสร้างตาราง

ไม่มีความคิดเห็น:

แสดงความคิดเห็น