คัมภีร์พื้นฐานลมปราณ HTML คำสั่งจัดการเกี่ยวกับการสร้างตาราง 1. เราสามารถสร้างตารางโดยใช้คำสั่ง <Table>...<Tr>...<Td> ........</td>...</tr>...</Table> โดยที่ <Tr>.....</tr>.ใช้จัดการในส่วนแถวของตาราง <Td>....</td> ใช้จัดการในส่วนของคอลัมน์หรือแนวตั้งของตาราง ตัวอย่าง <Table> <Tr><Td>แถวที่ 1คอลัมน์ที่ 1</td><Td>แถวที่ 1คอลัมน์ที่ 2</td></tr> <Tr><Td>แถวที่ 2คอลัมน์ที่ 1</td><Td>แถวที่ 2คอลัมน์ที่ 2</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ แถวที่ 1คอลัมน์ที่ 1 แถวที่ 1คอลัมน์ที่ 2 แถวที่ 2คอลัมน์ที่ 1 แถวที่ 2คอลัมน์ที่ 2 ซึ่งเราจะมองไม่เห็นกรอบของตาราง ซึ่งจะใช้ประโยชน์ได้ในส่วนของเว็บเพจที่ต้องการแบ่งหน้าจอเป็นหลาย ๆ ส่วน แต่หากต้องการตารางที่มีเส้นกรอบ ก็สามารถกำหนดได้โดยใช้ Attirbute Border โดยเพิ่มเข้าไปในแท็กคำสั่งของ <Table>.......</Table> โดยมีรูปแบบ <Table Border>.......</Table> จากตารางข้างบนเมื่อแก้ไขใหม่จะได้ดังนี้ <Table Border> <Tr><Td>แถวที่ 1คอลัมน์ที่ 1</td><Td>แถวที่ 1คอลัมน์ที่ 2</td></tr> <Tr><Td>แถวที่ 2คอลัมน์ที่ 1</td><Td>แถวที่ 2คอลัมน์ที่ 2</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ แถวที่ 1คอลัมน์ที่ 1 แถวที่ 1คอลัมน์ที่ 2 แถวที่ 2คอลัมน์ที่ 1 แถวที่ 2คอลัมน์ที่ 2 2. เราสามารถสร้างหัวตารางได้โดยใช้คำสั่ง <Th>....</Th> ซึ่งการใช้งานเหมือนการใช้คำสั่ง <Td> ทุกอย่าง แต่การแสดงผลที่ได้จะได้ ตัวอักษรตัวหนาจัดวางไว้กึ่งกลางคอลัมน์เหมือนเป็นหัวตาราง ตัวอย่าง <Table Border> <Tr><Th>อันดับ</Th><Th>ชื่อ</Th><Th>คุณสมบัติ</Th><Th>หมายเหตุ</Th></tr> <Tr><Td>1</td><Td>น้องปิ๊ก</td><Td> เฮ้อ ! ...</td></tr> <Tr><Td>2</td><Td>น้องโค๊ช</td><Td>ลืมไม่ลง</td><Td>เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ</td></tr> <Tr><Td>3</td><Td>น้องแก้ว</td><Td>น่ารักมาก</td><Td>ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า</td></tr> <Tr><Td>4</td><Td>น้องต้อง</td><Td>ดีแล้วล่ะ</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ อันดับ ชื่อ คุณสมบัติ หมายเหตุ 1 น้องปิ๊ก เฮ้อ ! ... 2 น้องโค๊ช ลืมไม่ลง เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ 3 น้องแก้ว น่ารักมาก ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า 4 น้องต้อง ดีแล้วล่ะ 3. เราสามารถกำหนดขนาดความหนาของเส้นกรอบตารางใน Attirbute Border ในแท็กคำสั่งของ <Table>.......</Table> โดยเพิ่มค่าความหนาเข้าไปโดยมีรูปแบบ <Table Border=n> โดยที่ n เท่ากับตัวเลขกำหนดความหนาของเส้นขอบดังตัวอย่าง ตัวอย่าง <Table Border=15> <Tr><Th>อันดับ</Th><Th>ชื่อ</Th><Th>คุณสมบัติ</Th><Th>หมายเหตุ</Th></tr> <Tr><Td>1</td><Td>น้องปิ๊ก</td><Td> เฮ้อ ! ...</td></tr> <Tr><Td>2</td><Td>น้องโค๊ช</td><Td>ลืมไม่ลง</td><Td>เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ</td></tr> <Tr><Td>3</td><Td>น้องแก้ว</td><Td>น่ารักมาก</td><Td>ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า</td></tr> <Tr><Td>4</td><Td>น้องต้อง</td><Td>ดีแล้วล่ะ</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ อันดับ ชื่อ คุณสมบัติ หมายเหตุ 1 น้องปิ๊ก เฮ้อ ! ... 2 น้องโค๊ช ลืมไม่ลง เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ 3 น้องแก้ว น่ารักมาก ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า 4 น้องต้อง ดีแล้วล่ะ 4. เราสามารถจัดข้อความในตารางให้อยู่ในแนวต่าง ๆ ได้ โดยใช้ร่วมกับคำสั่ง ALIGN เพื่อจัดตำแหน่งทางแนวนอนได้ 3 ระดับ ดังนี้ 1.1 แนวด้านซ้ายใช้ LEFT 1.2 แนวกึ่งกลางใช้ CENTER 1.3 แนวด้านขวาใช้ RIGHT ส่วนการจัดตำแหน่งทางแนวตั้งได้ ทำได้ 3 ระดับ โดยใช้กับคำสั่ง VALIGN 1.1 ตำแหน่งด้านบนใช้ TOP 1.2 ตำแหน่งด้านกลาง ใช้ MIDDLE 1.3 ตำแหน่งด้านล่าง ใช้ BOTTOM ตัวอย่าง <Td Align=Right>ชื่อ</td> <Td Valign=Top>คุณสมบัติ.</td> ตัวอย่างตาราง 5. เราสามารถพื้นที่แสดงข้อความและขนาดของเส้นตารางได้ โดยใช้คำสั่ง WIDTH=ขนาด ใช้ปรับความกว้างให้กับตาราง HEIGHT=ขนาด ใช้ปรับความสูงให้กับตาราง CELLPADDING เป็นการกำหนดพื้นที่แสดงข้อความ ค่าปกติเป็น 0 ขนาดจะเท่ากับจำนวนตัวอักษรที่แสดง(มีผลทั้งตาราง) CELLSPACING เป็นการกำหนดขนาดของเส้นตาราง ค่าปกติเท่ากัย 0 ต้องใช้ Attribute BORDER คู่กันไปด้วย (มีผลทั้งตาราง) COLSPAN เป็นการปรับขนาดพื้นที่แสดงข้อความของคอลัมน์ (มีผลเฉพาะคอลัมน์ของเซลล์ที่กำหนด) ROWSPAN เป็นการปรับขนาดพื้นที่แสดงข้อความของแถว (มีผลเฉพาะแถวของเซลล์ที่กำหนด) ตัวอย่าง ตัวอย่าง การปรับความกว้างและความสูงของทั้งตาราง <Table Border=12 Width=50% Height=50% > <Tr><Th>อันดับ</Th><Th>ชื่อ</Th><Th>คุณสมบัติ</Th><Th>หมายเหตุ</Th></tr> <Tr><Td>1</td><Td>น้องปิ๊ก</td><Td> เฮ้อ ! ...</td></tr> <Tr><Td>2</td><Td>น้องโค๊ช</td><Td>ลืมไม่ลง</td><Td>เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ</td></tr> <Tr><Td>3</td><Td>น้องแก้ว</td><Td>น่ารักมาก</td><Td>ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า</td></tr> <Tr><Td>4</td><Td>น้องต้อง</td><Td>ดีแล้วล่ะ</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ อันดับ ชื่อ คุณสมบัติ หมายเหตุ 1 น้องปิ๊ก เฮ้อ ! ... 2 น้องโค๊ช ลืมไม่ลง เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ 3 น้องแก้ว น่ารักมาก ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า 4 น้องต้อง ดีแล้วล่ะ การปรับพื้นที่ในตาราง และ ปรับขนาดเส้นตาราง <Table Border=12 CELLPADDING=10 CELLSPACING=10> <Tr><Th>อันดับ</Th><Th>ชื่อ</Th><Th>คุณสมบัติ</Th><Th>หมายเหตุ</Th></tr> <Tr><Td>1</td><Td>น้องปิ๊ก</td><Td> เฮ้อ ! ...</td></tr> <Tr><Td>2</td><Td>น้องโค๊ช</td><Td>ลืมไม่ลง</td><Td>เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ</td></tr> <Tr><Td>3</td><Td>น้องแก้ว</td><Td>น่ารักมาก</td><Td>ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า</td></tr> <Tr><Td>4</td><Td>น้องต้อง</td><Td>ดีแล้วล่ะ</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ อันดับ ชื่อ คุณสมบัติ หมายเหตุ 1 น้องปิ๊ก เฮ้อ ! ... 2 น้องโค๊ช ลืมไม่ลง เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ 3 น้องแก้ว น่ารักมาก ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า 4 น้องต้อง ดีแล้วล่ะ การปรับขนาดตารางเฉพาะเซลล์ <Table Border=12 > <Tr><Th>อันดับ</Th><Th>ชื่อ</Th><Th>คุณสมบัติ</Th><Th COLSPAN=10>หมายเหตุ</Th></tr> <Tr><Td>1</td><Td>น้องปิ๊ก</td><Td> เฮ้อ ! ...</td></tr> <Tr><Td>2</td><Td COLSPAN=10>น้องโค๊ช</td><Td>ลืมไม่ลง</td><Td>เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ</td></tr> <Tr><Td>3</td><Td ROWSPAN=15>น้องแก้ว</td><Td COLSPAN=10>น่ารักมาก</td><Td>ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า</td></tr> <Tr><Td>4</td><Td>น้องต้อง</td><Td>ดีแล้วล่ะ</td></tr> </Table> ซึ่งจะแสดงผลหน้าจอดังนี้ อันดับ ชื่อ คุณสมบัติ หมายเหตุ 1 น้องปิ๊ก เฮ้อ ! ... 2 น้องโค๊ช ลืมไม่ลง เธอคงคิดว่าเราลืมเธอได้ง่าย ๆ 3 น้องแก้ว น่ารักมาก ทุกสิ่งทุกอย่างมันเป็นลิขิตฟ้า 4 น้องต้อง ดีแล้วล่ะ และเราสามารถซ้อนตารางลงในตารางได้ โดยใช้คำสั่ง <Table>...<Tr>...<Td> ........</td>...</tr>...</Table> ซ้อนลงในตารางที่มีอยู่ และสามารถใส่รูปภาพเข้าไปในตารางได้โดยเพิ่มแท็กคำสั่ง <IMG SRC="ไฟล์รูปภาพ" ALT= "ข้อความ"> ลงในตาราง พื้นฐาน HTML ตอนที่ 5 ขอพลังจงอยู่กับท่าน :+: ขอพลังที่สร้างสรรค์จงอยู่กับท่านตลอดไป :+: ขอพลังจงอยู่กับท่าน