ตาราง (Table) | ||
ยินดีรับ ผู้สนับสนุน เว็บไซต์ด้านการศึกษา
กลุ่มเว็บไซต์นี้ เริ่มพัฒนา พ.ศ.2542 โดยบุคลากรทางการศึกษาด้านคอมพิวเตอร์ โทร. 081-9927223 (ผมเป็นคนลำปางหนา) ปล. ขอไม่รับ work at home / อาหารเสริม |
ตารางธรรมดา [ tr ใช้สำหรับคุมบรรทัด ] - [ td ใช้สำหรับคุม cell ] - [ bgcolor ใช้กำหนดสีพื้น ] |
|
ตัวอย่างคำสั่ง | ตัวอย่างผลลัพท์ | ||||||
<table> <td bgcolor=#ff0000>abc</td> </table> (กำหนดตาราง 1 cell ให้มีพื้นสีแดง) |
| ||||||
<table> <td bgcolor=#ff0000>wow <img src=/pic/logota.gif> wow</td> </table> |
| ||||||
<table> <td bgcolor=#0000ff>abc</td> <td bgcolor=#00ff00>def</td> </table> (กำหนดตาราง 2 cell ให้แต่ละ cell มีสีต่างกัน) |
| ||||||
<table> (เริ่มกำหนดตาราง) <tr bgcolor=#ff0000> (เริ่มต้นบรรทัดที่ 1 และให้สีบรรทัดนี้เป็นสีแดง) <td> (เริ่ม cell ที่ 1 ในบรรทัดที่ 1) abc (เริ่ม cell ที่ 1 ในบรรทัดที่ 1) </td> (ปิด cell ที่ 1 ในบรรทัดที่ 1) <td> (เริ่ม cell ที่ 2 ในบรรทัดที่ 1) def (เริ่ม cell ที่ 2 ในบรรทัดที่ 1) </td> (ปิด cell ที่ 2 ในบรรทัดที่ 1) </tr> (ปิดบรรทัดที่ 1) </table> (ปิดตาราง) |
| ||||||
<table> <tr bgcolor=#ff0000><td>abc</td><td>def</td></tr> <tr bgcolor=#ffff00><td>abc</td><td>def</td></tr> <tr bgcolor=#ff00ff><td>abc</td><td>def</td></tr> </table> |
|
สี และขอบ ของตาราง [ border ใช้กำหนดความกว้างของขอบ ] - [ cellspacing ใช้กำหนดความกว้างของขอบตาราง ] [ cellpadding ใช้กำหนดความกว้างของขอบถึงตัวอักษร ] |
ตัวอย่างคำสั่ง | ตัวอย่างผลลัพท์ | ||||||
<table bgcolor=#0000ff border=1><td>abc</td></table> |
| ||||||
<center> <table bgcolor=#ff00ff border=5> <td>abc<br><img src=/pic/logota.gif></td> </table> </center> |
| ||||||
<center> <table bgcolor=#ff00ff border=1> <td>abc</td> <td bgcolor=#ff0000>abc</td> <td>abc</td> </table> </center> |
| ||||||
<center> <table cellspacing=5 border=1> <td>abc</td> <td bgcolor=#ff0000>abc</td> <td>abc</td> </table> </center> |
| ||||||
<center> <table cellpadding=5 border=1> <td>abc</td> <td bgcolor=#ff0000>abc</td> <td>abc</td> </table> </center> |
| ||||||
<center> <table> <tr bgcolor=#ffff00> <td>abc</td> <td bgcolor=#0000ff>abc</td> <td>abc</td></tr> <tr> <td>abc</td> <td bgcolor=#ff0000>abc</td> <td>abc</td></tr> </table> </center> |
|
ความกว้าง ของตาราง [ width ใช้กำหนดความกว้างตาราง ] - [ align ใช้กำหนดด้านที่จะให้ชิด ] - [ valign ใช้กำหนดด้านที่จะให้ชิดในแนวขวาง ] |
ตัวอย่างคำสั่ง | ตัวอย่างผลลัพท์ | |||||
<table bgcolor=#0000ff border=1 width=100%> <td>abc</td> </table> |
| |||||
<table bgcolor=#00ffff border=1 width=100%> <td align=left width=20%>a</td> <td align=center width=30%>b</td> <td align=right width=50%>c</td> </table> |
| |||||
<table bgcolor=#00ffff border=1 width=90%> <td width=10%>a<br>b<br>c</td> <td valign=top width=10%>a</td> <td valign=middle align=center width=30%>b</td> <td valign=bottom width=50%>c</td> <td>d</td> </table> ถ้าไม่ผิดร้ายแรง ก็จะปล่อยให้ผ่านไปได้เช่น การกำหนด % ในตัวอย่างนี้ |
|
แบบฝึกหัด |
ให้เขียน homepage โดยทำตามคำสั่งแต่ละข้อต่อไปนี้ ข้อ 1 : ทำตารางบรรทัดเดียว มี cell เดียว และให้มีคำว่า test ใน cell นั้น ข้อ 2 : ทำตารางแบบใดก็ได้ ให้มีสีอย่างน้อย 4 สี ในตาราง ข้อ 3 : ทำตาราง 3 บรรทัด บรรทัดละ 4 cell และในทุก cell ให้มีทั้งภาพ และตัวอักษร ข้อ 4 : ทำตารางที่กำหนดความกว้างของทุก cell ให้คงที่ แต่ตัวตารางให้กว้าง 80% ข้อ 5 : ทำตารางที่ใช้ทุกคำสั่ง ทั้งหมดในแต่ละตาราง และให้มีทั้งหมด 3 ตาราง ซึ่งเขียนแตกต่างกัน |