ตาราง


โครงสร้างของตาราง (Table)
ในการสร้างตารางนั้นจะใช้คำสั่ง
<TABLE> เป็นคำสั่งเปิด และ </TABLE> เป็นคำสั่งปิด
<TR> ... </TR> ใช้ในการกำหนดแถวของตาราง
<TD> ... </TD> ใช้ในการใส่ข้อมูลในตารางแต่ละคอลัมน์

ตัวอย่าง 1

Source

<TABLE>
<tr><td>ข้อความ</td><td>ข้อความ</td><td> ข้อความ</td><td>ข้อความ</td>
<tr><td>ข้อความ</td><td>ข้อความ</td><td> ข้อความ</td><td>ข้อความ</td>
</TABLE>

View

ข้อความ ข้อความ ข้อความ ข้อความ
ข้อความ ข้อความ ข้อความ ข้อความ



จะเห็นว่า จำนวนของคำสั่ง <TD>...</TD> จะเป็นตัวบอกจำนวนคอลัมน์ที่เกิดขึ้นในแต่ละบรรทัดและจำนวนของคำสั่ง <TR>...</TD> จะเป็นตัวบอกจำนวนบรรทัดหรือแถวที่เกิดขึ้นในแต่ละตาราง ดังตัวอย่างที่ 2

ตัวอย่าง 2

Source

<TABLE>
<tr><td>คอลัมน์ 1/1 </td><td>คอลัมน์ 2/1</td><td> คอลัมน์ 3/1</td><td>คอลัมน์ 4/1</td>
<tr><td>คอลัมน์ 1/2</td><td>คอลัมน์ 2/2</td><td> คอลัมน์ 3/2</td><td>คอลัมน์4/2</td>
</TABLE>

View

คอลัมน์ 1/1 คอลัมน์ 2/1 คอลัมน์ 3/1 คอลัมน์ 4/1
คอลัมน์ 1/2 คอลัมน์ 2/2 คอลัมน์ 3/2 คอลัมน์ 4/2



จำนวน <TD>..</TD> ในแต่ละแถวไม่จำเป็นต้อง เท่ากันเสมอไป ในกรณีที่จำนวนคอลัมน์ในแถวหนึ่งมากกว่าในอีกหนึ่งแถว จะเกิดเป็นช่องว่างขึ้นมา ในส่วนที่ขาดหายไป ดังตัวอย่างที่ 3

ตัวอย่าง 3

Source

<TABLE>
<tr><td>คอลัมน์ 1/1 </td><td>คอลัมน์ 2/1</td><td> คอลัมน์ 3/1</td><td>คอลัมน์ 4/1</td>
<tr><td>คอลัมน์ 1/2</td><td>คอลัมน์ 2/2</td><td> คอลัมน์ 3/2</td><td></td>
</TABLE>

View

คอลัมน์ 1/1 คอลัมน์ 2/1 คอลัมน์ 3/1 คอลัมน์ 4/1
คอลัมน์ 1/2 คอลัมน์ 2/2 คอลัมน์ 3/2



หากจำนวนคอลัมน์ในแถวที่1 น้อยกว่าแถวที่ 2 ก็จะเกิดผลเช่นเดียวกันคือ จะเกิดช่องว่างขึ้นมาแทนส่วนที่หายไป ดังตัวอย่างที่ 4

ตัวอย่าง 4

Source

<TABLE>
<tr><td>คอลัมน์ 1/1 </td><td>คอลัมน์ 2/1</td><td> คอลัมน์ 3/1</td><td></td>
<tr><td>คอลัมน์ 1/2</td><td>คอลัมน์ 2/2</td><td> คอลัมน์ 3/2</td><td>คอลัมน์4/2</td>
</TABLE>

View

คอลัมน์ 1/1 คอลัมน์ 2/1 คอลัมน์ 3/1
คอลัมน์ 1/2 คอลัมน์ 2/2 คอลัมน์ 3/2 คอลัมน์ 4/2




การใส่เส้นกรอบให้ตาราง (Table Border)

จากตัวอย่างด้านบน ตารางที่ใช้คำสั่ง <Table>..</Table> จะไม่แสดงเส้นกรอบให้ หากต้องการให้ตารางแสดงเส้นกรอบออกมา เราสามารถทำได้โดยการใส่แอตทริบิวต์ Border ลงในคำสั่งเปิด จาก <Table> เป็น <Table Border >

ตัวอย่าง 5

Source

<Center>
<TABLE BORDER>
<tr><td>คอลัมน์ 1/1 </td><td>คอลัมน์ 2/1</td><td> คอลัมน์ 3/1</td><td>คอลัมน์ 4/1</td>
<tr><td>คอลัมน์ 1/2</td><td>คอลัมน์ 2/2</td><td> คอลัมน์ 3/2</td> <td></td>
</TABLE>

View

คอลัมน์ 1/1 คอลัมน์ 2/1 คอลัมน์ 3/1 คอลัมน์ 4/1
คอลัมน์ 1/2 คอลัมน์ 2/2 คอลัมน์ 3/2



ในกรณีที่ต้องการให้มีการเว้นช่องว่างในตาราง ให้บรรจุคำสั่งย่อย <TD> </TD> ลงไป จะทำให้เกิดช่องว่าง ดังตัวอย่างที่6

ตัวอย่าง 6

Source

<Center>
<TABLE BORDER>
<tr><td>คอลัมน์ 1/1 </td> <td> </td> <td> คอลัมน์ 3/1</td><td>คอลัมน์ 4/1</td>
<tr><td>คอลัมน์ 1/2</td><td>คอลัมน์ 2/2</td><td> คอลัมน์ 3/2</td><td></td>
</TABLE>

View

คอลัมน์ 1/1 คอลัมน์ 3/1 คอลัมน์ 4/1
คอลัมน์ 1/2 คอลัมน์ 2/2 คอลัมน์ 3/2



การเพิ่มความหนาให้กับเส้นกรอบ (Table Border=n)
ในการเพิ่มความหนาให้กับเส้นกรอบของตาราง สามารถทำได้โดยการระบุความหนาลงไปในคำสั่ง <Table Border> เป็น <Table Border=n> โดยที่ n เป็นขนาดความหนาของเส้นกรอบตาราง หากตัวเลขยิ่งมาก กรอบก็จะหนาขึ้น ตัวเลขยิ่งน้อย กรอบก็จะบางลง ดังตัวอย่างที่7

ตัวอย่าง 7

Source

<Center>
<TABLE BORDER=10>
<tr><td>ลัดวงจร</td><td>ได้ไหม</td><td> เป็นไข้เธอ</td><td>เพื่ออะไร</td>
<tr><td>จ๊ะจ๋าหน่อยนะจ๊ะ</td><td>คิดถึง</td><td> ได้ยินไหม</td><td>ของขวัญ</td>
</TABLE>
View

ลัดวงจร ได้ไหม เป็นไข้เธอเพื่ออะไร
จ๊ะจ๋าหน่อยนะจ๊ะคิดถึง ได้ยินไหมของขวัญ