คำสั่งแสดงผลแบบรายการแบบมีสัญลักษณ์ตาราง

บทเรียนนี้นักเรียนจะได้เรียนรู้คำสั่ง List และการสร้างตารางในเว็บเพจ ถ้าเรามีข้อมูลเยอะและอยากให้ข้อมูลแสดงแบบลำดับรายการหรือแบ่งเป็นหัวข้อย่อย ๆ แบบเรียงลำดับหรือที่เรียกว่า Bullet เราจะใช้คำสั่ง List ช่วยในการจัดการข้อมูล และถ้าเว็บเพจของเรามีการนำเสนอข้อมูลจำนวนมาก เช่น การสรุปปริมาณสินค้าหรือยอดขายเราควรจะใช้รูปแบบตารางเข้ามาจัดการ เพื่อให้ดูง่ายและเป็นระเบียบมากขึ้น

การสร้างข้อมูลในรูปแบบรายการ (List)

การจัดการเนื้อหาของเว็บเพจเพื่อให้อ่านได้ง่าย และเป็นระเบียบมีความสำคัญมาก ซึ่งสามารถจัดการได้ 2 รูปแบบคือ

การสร้างรายการแบบไม่มีลำดับ (Unordered Lists)

เป็นการจัดรายการโดยมีสัญลักษณ์กำกับหน้ารายการ (Bullet) โดยใช้แท็ก <ul> และ <li> สามารถกำหนดชนิดของสัญลักษณ์ได้ด้วย Attribute ชื่อ "type" (เช่น circle, square, disc)

<ul>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
</ul>

การสร้างรายการแบบมีลำดับ (Ordered Lists)

เป็นการจัดรายการแบบมีตัวเลขหรือตัวอักษรเรียงลำดับ โดยใช้แท็ก <ol> และ <li> สามารถกำหนดชนิดลำดับได้ด้วย Attribute ชื่อ "type" (เช่น A, a, I, i, 1)

<ol type="A">
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
</ol>

การสร้างตาราง (Table)

ตารางประกอบไปด้วยแถว (Row) และคอลัมน์ (Column) ช่วยให้ข้อมูลที่มีความสัมพันธ์กันดูเป็นระเบียบ โดยแต่ละช่องจะเรียกว่า เซลล์ (Cell)

โครงสร้างและคำสั่งพื้นฐาน

• <table> : แท็กเริ่มต้นสร้างตาราง
• <tr> : สร้างแถว (Table Row)
• <th> : ส่วนหัวของตาราง (Table Header) แสดงผลเป็นตัวหนา
• <td> : ข้อมูลในเซลล์ (Table Data)

<table>
  <tr>
    <th>ชื่อนักเรียน</th>
    <th>เลขที่</th>
  </tr>
  <tr>
    <td>เด็กชาย ก</td>
    <td>3</td>
  </tr>
</table>

การปรับแต่งตารางเพิ่มเติม

เราสามารถเพิ่มคำอธิบายตารางด้วย <caption> หรือจัดกลุ่มคอลัมน์ด้วย <colgroup> และกำหนดเส้นขอบผ่าน Attribute border

<table border="1" bordercolor="#FF6600">
  <caption>รวมคะแนนรายวิชา</caption>
  <!-- โค้ดส่วนอื่นๆ -->
</table>

การรวมเซลล์ (Colspan & Rowspan)

ใช้ colspan เพื่อรวมคอลัมน์ในแนวนอน และ rowspan เพื่อรวมแถวในแนวตั้ง

<td colspan="2">รวม 2 คอลัมน์</td>
<td rowspan="2">รวม 2 แถว</td>