|
จากบทความในบทที่ผ่าน
ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว
แต่การจัดตำแหน่งนั้นก็ยังไม่สารมารถกำหนดเจาะจงได้ละเอียดนัก
เพราะ สามารถระบุได้เฉพาะชิดซ้าย ชิดขวา และตรงกลางเท่านั้น
ในบทความนี้เราจะมาจัดตำแหน่งของข้อความ โดยการใช้ตารางในการควบคุมตำแหน่งของข้อมูลที่เราต้องการแสดงผล
การสร้างตารางนั้น เราสามารถนำมาช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจของเราได้
ว่าข้อมูลไหนต้องการแสดง ณ ตำแหน่งใดในเว็บเพจ โดยเราสามารถนำข้อมูลต่าง
ๆ มาจัดแสดงในเซลล์ต่าง ๆ ของตารางได้ ทำให้สะดวกในการออกแบบการจัดว่างข้อมูล
และทำให้การจัดว่างข้อมูลมีระเบียบเรียบร้อยอีกด้วย
ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา
html ดังนี้
1.
การสร้างตาราง <table>
</table>
2.
การสร้างแถวภายในตาราง <tr>
</tr>
แท็กนี้ต้องอยู่ภายในแท็ก
<table> </table>
3.
การสร้างคอลัมน์ภายในแถวแต่ละแถว <td>
</td> แท็กนี้ต้องอยู่ภายในแท็ก
<tr>
</tr>
 รูปแบบโครงสร้างของตาราง |
<table>
<tr>
<td>...ข้อมูล....</td>
</tr>
</table>
|
| จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ
การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์ |
| |
| ตัวอย่างการสร้างตารางแบบ
2 x 3 (2 แถว 3 คอลัมน์) |
|
|
<html>
<head><title> ....การสร้างตารางแบบ
2 x 3 (2 แถว 3 คอลัมน์)....</title></head>
<body>
<table>
<!--เริ่มต้นแถวที่
1 ->
<tr>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
</tr>
<!--เริ่มต้นแถวที่
2 ->
<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>
แต่ละชุด
|
| |
|
สำหรับบทความนี้ก็ขอจบเีีพียงเท่านี้ก่อนนะค่ะ แต่เรื่องของการจัดการกับตารางยังไม่หมดเพียงแค่นี้ค่ะ
เพราะเรายังสามารถปรับแต่งตารางได้อีกมากมายค่ะ ไม่ว่าจะเป็นการใส่สี
การจัดตำแหน่งต่าง ๆ ติดตามรายละเอียดได้ในบทความตอนต่อไปค่ะ
|
| |
 |
|
ภาษา
HTML
