ทำแบบทดสอบก่อนเรียน
การออกแบบเว็บไซต์
ภาษา html
การจัดรูปแบบเอกสาร
การจัดรูปแบบตัวอักษร
การใส่รูปภาพลงในเว็บเพจ
การสร้างตาราง
การเชื่อมโยงเว็บเพจ
การใส่ไฟล์มัลติมีเดีย
แบบทดสอบหลังเรียน


6. การสร้างตารางซ้อนตาราง
    เราสามารถสร้างตารางขึ้นภายในตารางอื่นนักษณะตารางที่ซ้อนๆ กันได้ ซึ่งตารางที่ซ้อนๆ กันนี้จะช่วยให้เราจัดเว็บเพจเพื่อนำเสนอข้อมูลได้ง่ายยิ่งขึ้น ตัวอย่างเช่น

 6.1  วิธีการสร้างตารางซ้อนตาราง
         การสร้างตารางซ้อนตารางจะกะทำได้โดยการสร้างตารางหลักด้วยคำสั่ง <table> และคำสั่งอื่นๆ
ที่เกี่ยวกับตารางได้เช่นเดียวกับการสร้างตารางปกติ แล้วสร้างตารางอีกตารางไว้ละหว่างแท็ก <td>
ของตารางหลัก

1) สร้างตารางหลัก

รูปปก รายละเอียด
   

<!DOCTYPE html>
<html>
<head>
   <title>Nesting Table</title>
</head>
<body>
 <table border="1" width="500" height="150"
              cellspacing="5" cellpadding="150">
        <tr bgcolor="pink">
               <th width="100">รูปปก</th>
               <th>รายละเอียด</th>
        </tr>
        <tr>
                <tr>&nbsp;</td/>
                <td>&nbsp;</td>
         </tr>
</table>
</body>

2) ใส่ข้อมูลและตารางย่อย

<!DOCTYPE html>
<html>
<head>
  <title>Nesting Table</title>
</head>
<body>
  <table border="1" width="500" height="150"  cellspacing="5" cellpadding="5">
         <tr bgcolor="pink">
                 <th width="100">รูปปก</th>
                 <th>รายละเอียด</th>
         </tr>
         <tr>
                 <td><img src="book.jpg" width="100"></td>
                 <td>

<table border="1" width="350" height="100" cellpadding="5"  align="center">
        <tr>
                <td bgcolor="yellow"><b>ชื่อหนังสือ</b></td>
                <td>โปรแกรมประมวลผลคำ</td>
        </tr>
        <tr>     
                 <td bgcolor="yellow"><b>ชื่อหนังสือ</b></td>
                 <td>220หน้า</td>
        </tr>
         <tr>
                  <td bgcolor="yellow"><b>ราคาปก</b></td>
                  <td>95บาท</td>
         </tr>
</table>

          </td>

</tr>
</table>
</body>
</html>

ผลที่ได้บนเบราว์เซอร์