คำสั่ง HTML 🤔 การสร้างรายการ (List) และการสร้างตาราง (Table) ในเว็บเพจ

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

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

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

คำสั่งแต่ละรูปแบบมีข้อดีอย่างไร และแต่ละรูปแบบมีการใช้งานที่แตกต่างกันอย่างไรบ้าง เราไปดูกันเลย

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

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

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

รูปแบบ

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

ตัวอย่างโค้ด

See the Pen การสร้างรายการแบบไม่มีลำดับ(Unordered Lists) by supaporn (@asria) on CodePen.

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

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

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

รูปแบบ

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

ตัวอย่างโค้ด

See the Pen การสร้างรายการแบบมีลำดับ (Ordered List) by supaporn (@asria) on CodePen.

คำสั่ง HTML การสร้างตาราง (Table)

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

คำสั่ง HTML สำหรับการสร้างตาราง มี Tags ที่สำหคัญในการใช้ทำตารางอยู่หลายอย่าง ซึ่งแต่ละแบบก็จะทำหน้าที่แตกต่างกันออกไป และ Tag บางอย่างเราอาจจำเป็นต้องใช้ในการจัดรูปแบบให้กับตารางของเราด้วย

• <table> กำหนดคำสั่งในการสร้างตาราง (Table)
• <th> กำหนดส่วนหัวของตาราง (Table Headers)
• <tr> กำหนดแถวของตาราง (Table Rows)
• <td> กำหนดเซลล์หรือคอลัมน์ของตาราง (Table Cells หรือ Table Data)
• <caption> กำหนดชื่อหรือคำอธิบายตาราง (Table caption)
• <colgroup>กำหนดกลุ่มของคอลั่มในตาราง (Table columns group) สำหรับการจัดรูปแบบ
• <col> กำหนดคุณสมบัติให้กับแต่ละคอลัมน์ภายในกลุ่มของคอลัมน์ (Table columns)
• <thead> กำหนดกลุ่มของเนื้อหาส่วนหัวของตาราง (Table head group)
• <tbody> กำหนดกลุ่มของเนื้อหาของตาราง (Table body group)
• <tfoot> กำหนดกลุ่มของเนื้อหาส่วนท้ายตาราง (Table foot group)

เรามาดูทีละคำสั่งกันเลยว่าการใช้งานแต่ละแบบมีการทำงานอย่างไรบ้าง

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

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

รูปแบบ

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Company A</td>
    <td>Mr. A</td>
    <td>Thailand</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen การสร้างตาราง(Table) by supaporn (@asria) on CodePen.

จากตัวอย่างโค้ดด้านบน เป็นการสร้างข้อมูลตารางที่มีจำนวนแถวเท่ากับ 3 แถว และจำนวนคอลัมน์เท่ากับ 3 คอมลัมน์ ซึ่งจะเป็นการสร้างข้อมูลตารางแบบทั่วไปที่ไม่ได้มีการปรับรูปแบบสไตล์อื่นๆ เลย ส่วนการใช้งาน Tag จะใช้แท็ก table, th, tr และ td ซึ่งสามารถเลื่อนดูในหัวข้อด้านล่างต่อไปได้เลย

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

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

รูปแบบ

 <table>
  <tr>
    <th>สินค้า</th>
    <th>จังหวัด</th>
    <th>ยอดขาย</th>
  </tr>
  <tr>
    <td>ยาสีฟัน</td>
    <td>กรุงเทพฯ</td>
    <td>500,000</td>
  </tr>
  <tr>
    <td>สบู่</td>
    <td>นครราชสีมา</td>
    <td>420,000</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen การเพิ่มหัวข้อตาราง (Table Headers) by ASRIA (@asria) on CodePen.

การเพิ่มแถวตาราง (Table Rows)

การเพิ่มแถวในตารางหรือเรียกอีกอย่างว่าเป็นการเพิ่มแถวในแนวนอนก็ได้ แต่ละแถวของตารางจะเขียนคำสั่งที่เริ่มต้นด้วย Tag <tr> และลงท้ายด้วย </tr>

รูปแบบ

<table>
  <tr>
    <td>Emil</td>
    <td>Telephone</td>
  </tr>
  <tr>
    <td>admin@gmail.com</td>
    <td>081-000-5555</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen การเพิ่มแถวตาราง (Table Rows) by ASRIA (@asria) on CodePen.

จากตัวอย่างด้านบน จะเห็นว่ามี Tag <tr> ทั้งหมดสองชุด เท่ากับว่ามีแถวทั้งหมด 2 แถวนั่นเอง

การเพิ่มคอลัมน์ (Table Cells หรือ Table Data)

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

รูปแบบ

<table>
  <tr>
    <td>Emil</td>
    <td>Telephone</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen การเพิ่มคอลัมน์ (Table Cells หรือ Table Data) by ASRIA (@asria) on CodePen.

จากตัวอย่างด้านบน จะเห็นว่ามี <td> ที่อยู่ด้านใน Tag <tr> มีทั้งหมดสองชุด เท่ากับว่ามีคอลัมน์ในตารางนี้จะทั้งหมด 2 คอลัมน์นั่นเอง

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

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

รูปแบบ

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>เดือน</th>
    <th>รายจ่าย</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>12,000 บาท</td>
  </tr>
  <tr>
    <td>กุมภาพันธ์</td>
    <td>1,150 บาท</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen การกำหนดชื่อหรือคำอธิบายตาราง (Table caption) by ASRIA (@asria) on CodePen.

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

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

รูปแบบ

<table>
  <colgroup>
    <col span="2" style="background-color:green">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>หัวข้อ</th>
    <th>จำนวน</th>
    <th>ราคา</th>
  </tr>
  <tr>
    <td>หนังสือสังคมศึกษา</td>
    <td>1</td>
    <td>120 บาท</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen กำหนดกลุ่มของคอลั่มในตาราง สำหรับการจัดรูปแบบ (Table columns group) by ASRIA (@asria) on CodePen.

จากตัวอย่างด้านบน จะเห็นได้ว่ามีการจัด Group ของสองคอลัมน์แรกให้มีรูปแบบข้อมูล Background สีเทา และให้คอลัมน์ที่สามมี Background สีแดงนั่นเอง

กำหนดคุณสมบัติให้กับคอลัมน์ (Table columns)

กำหนดคุณสมบัติให้กับคอลัมน์จะเป็นการใช้คุณสมบัติร่วมกับ กำหนดกลุ่มของคอลัมน์ในตาราง (Table columns group) ดังนั้นรูปแบบและตัวอย่างโค้ดก็จะเหมือนกันเลย

รูปแบบ

<table>
  <colgroup>
    <col span="2" style="background-color:green">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>หัวข้อ</th>
    <th>จำนวน</th>
    <th>ราคา</th>
  </tr>
  <tr>
    <td>หนังสือสังคมศึกษา</td>
    <td>1</td>
    <td>120 บาท</td>
  </tr>
</table>

ตัวอย่างโค้ด

See the Pen กำหนดกลุ่มของคอลั่มในตาราง สำหรับการจัดรูปแบบ (Table columns group) by ASRIA (@asria) on CodePen.

กำหนดกลุ่มของเนื้อหาของตาราง (Table with the group of content)

เป็นการกำหนดกลุ่มของเนื้อหาแต่ละส่วนให้กับตาราง เช่น ส่วนหัว ส่วนเนื้อหา และส่วนท้ายของตาราง โดยส่วนหัวจะถูกกำหนดโดยแท็ก <thead> และ </thead> ส่วนเนื้อหาจะถูกกำหนดโดยแท็ก <tbody> และ </tbody> และส่วนท้ายของเนื้อหาจะถูกกำหนดโดยแท็ก <tfoot> และ </tfoot>

รูปแบบ

<table>
  <thead>
    <tr>
      <th>เดือน</th>
      <th>รายจ่าย</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>มกราคม</td>
      <td>100 บาท</td>
    </tr>
    <tr>
      <td>กุมภาพันธ์</td>
      <td>80 บาท</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>รวมรายจ่าย</td>
      <td>180 บาท</td>
    </tr>
  </tfoot>
</table>

ตัวอย่างโค้ด

See the Pen กำหนดกลุ่มของเนื้อหาส่วนหัวของตาราง (Table group header) by ASRIA (@asria) on CodePen.

จากตัวอย่างโค้ดด้านบนจะเห็นได้ว่า <thead> จะครอบส่วนที่เป็นหัวข้อในแถวแรก, <tbody> จะครอบส่วนของเนื้อหาว่ามีเนื้อหาอะไรบ้างหรือกี่รายการ ส่วน <tfoot> จะเป็นส่วนท้ายสุดที่บ่บอกว่านี่คือข้อมูลในส่วนท้ายสุดนั่นเอง

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

การกำหนดเส้นขอบของตารางนั้นเพื่อความสวยงามของเว็บเพจ ดูง่ายขึ้น การกำหนดเส้นขอบของตารางสามารถทำได้โดยการกำหนด Attribute ที่ชื่อ “border” ในการกำหนดขนาดของเส้นขอบ และการกำหนด Attribute ที่ชื่อ “bordercolor” ในการกำหนดสีของเส้นขอบ โดยมีรูปแบบการใช้งานคำสั่งดังนี้

รูปแบบ

<table border="ค่าตัวเลขขนาดเส้นขอบ" bordercolor="#รหัสสี">

ตัวอย่างโค้ด

See the Pen
การกำหนดเส้นขอบของตาราง by supaporn (@asria)
on CodePen.

จากตัวอย่างด้านบน จะเป็นการเพิ่มเส้นขอบของตารางให้ border เท่ากับ 1 และกำหนดให้สีของเส้นขอบเป็นสีแดงโดยการเพิ่ม bordercolor ให้เป็นสีแดง

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

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

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

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

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

ตัวอย่างโค้ด

See the Pen
คำสั่งรวมเซลล์ในแนวคอลัมน์(Column) by supaporn (@asria)
on CodePen.

สรุป

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

ใครที่ยังไม่ได้บทความก่อนหน้าของเรา อย่าลืมกลับไปอ่านด้วยน๊าาา รวมคำสั่ง HTML ในการใส่รูปภาพลงในเว็บเพจและการสร้างลิงค์เว็บไซต์