แบบฝึกหัด เรื่องการสร้างตาราง HTML

แบบฝึกหัด
เรื่อง การสร้างตาราง

1.      แท็ก <TR> และ <TD> แตกต่างกันอย่างไร

2.      การกำหนดชื่อของตาราง และกำหนดส่วนหัวในตาราง มีรูปแบบ    คำสั่งอย่างไร

3.      ให้เขียนคำสั่งที่ใช้กำหนดรูปแบบเส้นขอบตารางมาอย่างน้อย 2 รูปแบบ

4.      ถ้าต้องการกำหนดสีพื้นหลังตารางเป็นสีฟ้า และเส้นขอบสีแดง จะต้องกำหนดอย่างไร

5.      <TABLE ALIGN = “CENTER” BORDERCOLOR = “RED”> หมายความว่าอย่างไร

6.      การใส่รูปภาพในตารางมีรูปแบบคำสั่งอย่างไร

7.      COLSPAN ต่างจาก ROWSPAN อย่างไร

8.      การกำหนดระยะห่างระหว่างช่องในตาราง และระหว่างบรรทัดของตาราง มีรูปแบบคำสั่งคือ



*************************************************************************************





เฉลยแบบฝึกหัด
เรื่อง การสร้างตาราง

1. แท็ก <TR> และ <TD> แตกต่างกันอย่างไร
TR คือ แท็กที่ใช้ในการสร้างแถว หรือแนวนอนหรือบรรทัด เป็นการแทรกแถว
TD คือ แท็กที่ใช้ในการสร้างคอลัมน์ หรือแนวตั้ง เป็นการแทรกคอลัมน์
2. การกำหนดชื่อของตาราง และกำหนดส่วนหัวในตาราง มีรูปแบบคำสั่งอย่างไร
<CAPTION> ……………….. </CAPTION> : ชื่อของตาราง
<TH>…………………………..</TH> : ชื่อส่วนหัวในตาราง
3. ให้เขียนคำสั่งที่ใช้กำหนดรูปแบบเส้นขอบตารางมาอย่างน้อย 2 รูปแบบ
<TABLE BORDER = “2” BORDERCOLOR = “RED” FRAME = “VOID”>
-ไม่มีเส้นขอบ
<TABLE BORDER = “2” BORDERCOLOR = “RED” FRAME = “BORDER”>
-มีเส้นขอบครบสี่ด้าน
<TABLE BORDER = “2” BORDERCOLOR = “RED” FRAME = “ABOVE”>
-ขีดเส้นเฉพาะขอบด้านบน
<TABLE BORDER = “2” BORDERCOLOR = “RED” FRAME = “BELOW”>
-ขีดเส้นเฉพาะขอบด้านล่าง
<TABLE BORDER = “2” BORDERCOLOR = “RED” FRAME = “RHS”>
-ขีดเส้นเฉพาะขอบด้านขวา
<TABLE BORDER = “2” BORDERCOLOR = “RED” FRAME = “LHS”>
-ขีดเส้นเฉพาะขอบด้านซ้าย
4. ถ้าต้องการกำหนดสีพื้นหลังตารางเป็นสีฟ้า และเส้นขอบสีแดง จะต้องกำหนดอย่างไร
<TABLE BGCOLOR = “CYAN” BORDER = “1” BORDERCOLOR =#FF0000>
5. <TABLE ALIGN = “CENTER” BORDERCOLOR = “RED”> หมายความว่าอย่างไร
การกำหนดตำแหน่งของตาราง ที่ตำแหน่งตรงกลาง
6. การใส่รูปภาพในตารางมีรูปแบบคำสั่งอย่างไร
<TD><IMG SRC = “ชื่อและนามสกุลของรูปภาพ”></TD>

7. COLSPAN ต่างจาก ROWSPAN อย่างไร
COLSPAN เป็นการผสานคอลัมน์ (ระบุจำนวนคอลัมน์ตามต้องการ)
ROWSPAN เป็นการผสานแถว (ระบุจำนวนแถวตามต้องการ)
8. การกำหนดระยะห่างระหว่างช่องในตาราง และระหว่างบรรทัดของตาราง มีรูปแบบคำสั่งคือ
<TABLE CELLSPACEING=”8”>…………………..</TABLE>
<TABLE CELLPADDING=”10”>…...</TABLE>