ให้นักเรียน จดใบความรู้ต่อไปนี้ลงในสมุดเสร็จแล้วส่งที่โ่ต๊ะครู
การสร้างตาราง (TABLE)
จากบทความในบทที่ผ่าน ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว แต่การจัดตำแหน่งนั้นก็ยังไม่สารมารถกำหนดเจาะจงได้ละเอียดนัก เพราะ สามารถระบุได้เฉพาะชิดซ้าย ชิดขวา และตรงกลางเท่านั้น ในบทความนี้เราจะมาจัดตำแหน่งของข้อความ โดยการใช้ตารางในการควบคุมตำแหน่งของข้อมูลที่เราต้องการแสดงผล
การสร้างตารางนั้น เราสามารถนำมาช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจของเราได้ ว่าข้อมูลไหนต้องการแสดง ณ ตำแหน่งใดในเว็บเพจ โดยเราสามารถนำข้อมูลต่าง ๆ มาจัดแสดงในเซลล์ต่าง ๆ ของตารางได้ ทำให้สะดวกในการออกแบบการจัดว่างข้อมูล และทำให้การจัดว่างข้อมูลมีระเบียบเรียบร้อยอีกด้วย
ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้1. การสร้างตาราง <table> </table>
2. การสร้างแถวภายในตาราง <tr>… </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table>… </table>
3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td>… </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr>… </tr>
| รูปแบบโครงสร้างของตาราง |
| <table> <caption >….ข้อความที่จะใช้เป็นส่วนหัวกำกับตาราง (ชื่อตาราง)….. </caption> <tr> <th>….ข้อความ….. </th> <td>….ข้อความ….. </td> </tr> </table> |
<table>...........</table>
|
เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง
|
<caption>............</caption>
|
เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง
|
<tr>............</tr>
|
เป็นคำสั่งที่ใช้กำหนดแถว (row)
|
<th>...........</th>
|
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง
|
<td>...........</td>
|
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว
|
จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์
|
ตัวอย่างการสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)
|
| <html> <head> <title> ....การสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)....</title> </head> <body> <table> <tr> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> </tr> <tr> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> </tr> </table> </body> </html> |
จากตัวอย่างจะสังเกตได้ว่ามีแถว 2 แถว ซึ่งจะเขียนโค้ด html ได้โดยเขียนแท็ก <tr>…. </tr> 2 ชุด และในแถวแต่ละแถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราก็สามารถเขียนโค้ดเพื่อสร้างคอลัมน์ โดยเขียนแท็ก <td>…</td> ไว้ใน <tr>… </tr> โดยใน 1 แถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราจึงต้องเขียนแท็ก <td>…</td> 3 ชุดไว้ในแท็ก <tr>… </tr> แต่ละชุด
ถ้าหากต้องการจัดการตาราง เราสามารถเพิ่มคำสั่งที่เป็น Attribute หรือเป็นส่วนขยายของแท็ก (TAG) ได้ ตามตัวอย่างต่อไปนี้
| <table bgcolor="color"> .... </table> | กำหนดสีพื้นในตารางตามรูปแบบการแสดงค่าสี |
| <table border="pixels"> .... </table> | กำหนดขนาดของขอบตาราง |
| <table width="pixels/%"> .... </table> | กำหนดความกว้างของตาราง เป็น Pixels หรือเป็นเปอร์เซนต์ความกว้างของการปรากฏบนจอภาพ |
| <tr align=" left | center | right "> .... </tr> | กำหนดตำแหน่งของข้อความ |
| <tr bgcolor="color"> .... </tr> | กำหนดสีของพื้นหลังในตาราง ตามรูปแบบการแสดงค่าสี |
| <th align="left | right | center | justify | char"> .... </th> | กำหนดตำแหน่งของข้อความในตารางตามแนวนอน |
| <th valign="top | middle | bottom | baseline"> .... </th> | กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง |
| <th bgcolor="color"> .... </th> | กำหนดสีพื้นของตารางตามรูปแบบการแสดงค่าส |
| <th height="pixels | %"> .... </th> | กำหนดความสูงของตาราง |
<th width="pixels | %"> .... </th>
| กำหนดความกว้างของตาราง |
<th rowspan="number"> .... </th>
| กำหนดการรวมช่องเซลล์ในแนวตั้ง |
<th colspan="number"> .... </th>
| กำหนดการรวมช่องเซลล์ในแนวนอน |
| <td align="left | right | center | justify | char"> .... </td> | กำหนดตำแหน่งของข้อความในตารางตามแนวนอน |
| <td valign="top | middle | bottom | baseline"> .... </td> | กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง |
| <td bgcolor="color"> .... </td> | กำหนดสีพื้นของตาราง |
| <td height="pixels | %"> .... </td> | กำหนดความสูงของตาราง |
| <td width="pixels | %"> .... </td> | กำหนดความกว้างของตาราง |
| <td rowspan="number"> .... </td> | กำหนดการรวมช่องเซลล์ในแนวตั้ง |
| <td colspan="number"> .... </td> | กำหนดการรวมช่องเซลล์ในแนวนอน |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น