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

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

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

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

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

การสร้างข้อมูลรายการแบบไม่มีลำดับ หรือ Unordered List เป็นการจัดรายการโดยมีสัญลักษณ์กำกับหน้ารายการ จะใช้กรณีที่ต้องการจัดการรายการเป็นข้อๆ แต่ไม่ต้องการจัดเรียงรายการให้มีตัวเลขเรียงลำดับ จะมีประเภทของสัญลักษณ์ที่ใช้กำกับหน้ารายการ โดยการกำหนดชนิดของสัญลักษณ์ได้ด้วย Attribute ชื่อ “type” ที่เรากำหนด แต่ถ้าไม่มีการกำหนดประเภทให้กับรายการ สัญลักษณ์ที่จะแสดงตั้งต้นเป็นวงกลมทึบ

รูปแบบจะเริ่มต้นด้วย <ul> และปิดท้ายด้วย </ul> ส่วนข้อมูลของเนื้อหาแต่ละรายการจะใส่ด้านในประกอบด้วย <li> และปิดด้วย </li>

ตัวอย่าง

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

<ul type="circle">
     <li>รายการที่ 1</li>
     <li>รายการที่ 2</li>
     <li>รายการที่ 3</li>
</ul>

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

การสร้างข้อมูลรายการแบบมีลำดับ (Ordered List) สามารถกำหนดชนิดของตัวจัดลำดับได้ด้วย Attribute ชื่อ “type” แต่ถ้าไม่ได้กำหนดรูปแบบการแสดงผลจะเป็นตัวเลขให้ทันที

รูปแบบจะเริ่มต้นด้วย <ol> และปิดท้ายด้วย </ol> ส่วนข้อมูลของเนื้อหาแต่ละรายการจะใส่ด้านในคือ <li> และปิดด้วย </li>

ตัวอย่าง

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

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

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

โครงสร้างและคำสั่งในการสร้างตาราง (Table)

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

ตัวอย่าง

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

การเพิ่มหัวข้อตาราง (Table Headers)

เป็นการกำหนดส่วนหัวให้กับตาราง จะถูกกำหนดโดยแท็ก <th> และ </th> โดยเมื่อรันบนเบราว์เซอร์จะแสดงผลลัพธ์เป็นตัวหนา

ตัวอย่าง

<table>
     <tr>
          <th>ชื่อนักเรียน</th>
          <th>รายวิชา</th>
          <th>คะแนน</th>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>วิทยาการคำนวณ</td>
          <td>87</td>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>คอมพิวเตอร์ 6</td>
          <td>75</td>
     </tr>
</table>

การกำหนดชื่อหรือคำอธิบายตาราง (Table caption)

การกำหนดชื่อหรือคำอธิบายตาราง เป็นการเพิ่มคำอธิบายภายในตารางว่าเป็นตารางเกี่ยวกับอะไร สามารถทำได้โดยใส่แท็ก <caption> ที่ต่อจาก <table> ค่าเริ่มต้นหากใส่ Tag แล้ว คำอธิบายของตารางจะจัดให้อยู่กึ่งกลางเหนือตารางเสมอ อย่างไรก็ตามเราสามารถใช้ CSS ในการการจัดข้อความและคำอธิบายได้

ตัวอย่าง

<table>
     <caption>รวมคะแนนรายวิชา</caption>
     <tr>
          <th>ชื่อนักเรียน</th>
          <th>รายวิชา</th>
          <th>คะแนน</th>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>วิทยาการคำนวณ</td>
          <td>87</td>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>คอมพิวเตอร์ 6</td>
          <td>75</td>
     </tr>
</table>

กำหนดกลุ่มของคอลัมน์ในตาราง (Table columns group) สำหรับการจัดรูปแบบ

การระบุกลุ่มของคอลัมน์ตั้งแต่หนึ่งคอลัมน์ขึ้นไปในตารางสำหรับการจัดรูปแบบข้อมูลของตาราง

ตัวอย่าง

<table>
     <caption>รวมคะแนนรายวิชา</caption>
     <colgroup>
          <col span="2" style="background-color:gray">
          <col style="background-color:red">
     </colgroup>
     <tr>
          <th>ชื่อนักเรียน</th>
          <th>รายวิชา</th>
          <th>คะแนน</th>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>วิทยาการคำนวณ</td>
          <td>87</td>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>คอมพิวเตอร์ 6</td>
          <td>75</td>
     </tr>
</table>

การกำหนดเส้นขอบของตาราง (Table Borders)

การกำหนดเส้นขอบของตารางสามารถทำได้โดยการกำหนด Attribute ที่ชื่อ “border” ในการกำหนดขนาดของเส้นขอบ และการกำหนด Attribute ที่ชื่อ “bordercolor” ในการกำหนดสีของเส้นขอบ

ตัวอย่าง

<table>
     <table border="1" bordercolor="#FF6600">
     <colgroup>
          <col span="2" style="background-color:gray">
          <col style="background-color:red">
     </colgroup>
     <tr>
          <th>ชื่อนักเรียน</th>
          <th>รายวิชา</th>
          <th>คะแนน</th>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>วิทยาการคำนวณ</td>
          <td>87</td>
     </tr>
     <tr>
          <td>เด็กชาย ก</td>
          <td>คอมพิวเตอร์ 6</td>
          <td>75</td>
     </tr>
</table>

การรวมเซลล์ของแถวและคอลัมน์ (Table Colspan & Rowspan)

รูปแบบคำสั่งในการรวมเซลล์ของคอลัมน์จะใช้คำสั่ง colspan ดังรูปแบบด้านล่าง

<tr><td colspan="จำนวนคอลัมน์ที่จะรวม"></td></tr>

รูปแบบคำสั่งในการรวมเซลล์ของแถวจะใช้คำสั่ง rowspan ดังรูปแบบด้านล่าง

<tr><td rowspan="จำนวนแถวที่จะรวม"></td></tr>

ตัวอย่าง

<table border="1" bordercolor="#FF6600">
     <tr>
          <td rowspan="2">ห้อง</td>
          <td colspan="2">จำนวนนักเรียน</td>
     </tr>
     <tr>
          <td>ชาย</td>
          <td>หญิง</td>
     </tr>
     <tr>
          <td>ม.3/1</td>
          <td>19</td>
          <td>16</td>
     </tr>
     <tr>
          <td>ม.3/2</td>
          <td>16</td>
          <td>24</td>
     </tr>
 </table>