หลักสูตร IT HTML พื้นฐาน 012_รายการและตาราง

รายการ

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

รายการ HTML มี 3 ประเภท:

1. รายการไม่มีลำดับ (Unordered list): สร้างโดยใช้องค์ประกอบ <ul> แต่ละรายการต้องแสดงด้วยองค์ประกอบ <li>
2. รายการมีลำดับ (Ordered list): สร้างโดยใช้องค์ประกอบ <ol> รายการต่างๆ ก็ใช้องค์ประกอบ <li> แสดงเช่นกัน แต่จะมีการเพิ่มหมายเลขโดยอัตโนมัติ
3. รายการคำจำกัดความ (Definition list): สร้างโดยใช้องค์ประกอบ <dl> ประกอบด้วยองค์ประกอบ <dt> (หัวข้อคำจำกัดความ) และ <dd> (คำอธิบายคำจำกัดความ)

รายการไม่มีลำดับ

รายการไม่มีลำดับเป็นประเภทรายการที่พบบ่อยที่สุด โดยจะเพิ่มจุดเล็กๆ (เรียกว่าเครื่องหมายรายการ) ไว้หน้าแต่ละรายการ ใช้ <ul> เป็นตัวบรรจุรายการ และใช้ <li> สำหรับอธิบายรายการเฉพาะ

ตัวอย่าง:

1
<ul>
2
  <li>รายการ 1</li>
3
  <li>รายการ 2</li>
4
  <li>รายการ 3</li>
5
</ul>

ผลลัพธ์:

รายการมีลำดับ

ต่างจากรายการไม่มีลำดับ แต่ละรายการของรายการมีลำดับจะมีการทำเครื่องหมายด้วยตัวเลข รายการมีลำดับใช้ <ol> เป็นตัวบรรจุรายการ และใช้ <li> เพื่ออธิบายรายการเฉพาะเช่นกัน

ตัวอย่าง:

1
<ol>
2
  <li>รายการแรก</li>
3
  <li>รายการที่สอง</li>
4
  <li>รายการที่สาม</li>
5
</ol>

ผลลัพธ์:

รายการคำจำกัดความ

รายการคำจำกัดความประกอบด้วยองค์ประกอบ <dl> (รายการคำจำกัดความ), <dt> (รายการคำจำกัดความ) และ <dd> (คำอธิบายคำจำกัดความ) รายการคำจำกัดความมักใช้สำหรับแสดงชุดศัพท์และคำจำกัดความของศัพท์นั้นๆ

ตัวอย่าง:

1
<dl>
2
  <dt>ศัพท์ 1</dt>
3
  <dd>คำอธิบาย 1</dd>
4
  <dt>ศัพท์ 2</dt>
5
  <dd>คำอธิบาย 2</dd>
6
</dl>

ผลลัพธ์:

[!สรุป]

• ภายในรายการสามารถใช้ย่อหน้า, การขึ้นบรรทัดใหม่, รูปภาพ, ลิงก์ และรายการอื่นๆ ได้

ตาราง

ตาราง HTML เป็นองค์ประกอบที่มีประสิทธิภาพสำหรับแสดงข้อมูลที่มีโครงสร้าง ตาราง HTML พื้นฐานแสดงด้วยองค์ประกอบ <table> ซึ่งประกอบด้วยองค์ประกอบย่อยหลักบางตัว เช่น <tr> (แถวของตาราง), <th> (เซลล์ส่วนหัว) และ <td> (เซลล์ข้อมูลของตาราง)

ตัวอย่าง:

1
<table>
2
  <tr>
3
    <th>ชื่อ</th>
4
    <th>อายุ</th>
5
    <th>เพศ</th>
6
  </tr>
7
  <tr>
8
    <td>สมชาย</td>
9
    <td>20</td>
10
    <td>ชาย</td>
11
  </tr>
12
  <tr>
13
    <td>สมหญิง</td>
14
    <td>21</td>
15
    <td>หญิง</td>
16
  </tr>
17
</table>

ผลลัพธ์:

องค์ประกอบของตาราง:

• <table>: แสดงถึงตารางทั้งหมด
• <thead>: กำหนดส่วนหัวของตาราง ซึ่งประกอบด้วยองค์ประกอบ <th> ที่ใช้แสดงหัวข้อคอลัมน์
• <tr>: แถวของตาราง ประกอบด้วยเซลล์ส่วนหัว <th>
• <th>: เซลล์ส่วนหัว ใช้สำหรับระบุหัวข้อคอลัมน์
• <tbody>: กำหนดส่วนเนื้อหาหลักของตาราง โดยแต่ละแถวประกอบด้วยองค์ประกอบ <td> ที่ใช้แสดงข้อมูลจริง
• <td>: เซลล์ข้อมูลของตาราง ประกอบด้วยข้อมูลจริง
• <tfoot>: กำหนดส่วนท้ายของตาราง โดยทั่วไปใช้สำหรับวางข้อมูลสรุป, ข้อมูลรวม หรือข้อมูลท้ายอื่นๆ ของตาราง
• <caption>: ใช้สำหรับเพิ่มหัวข้อให้กับตาราง HTML หัวข้อมักจะแสดงที่ด้านบนของตาราง
• <colgroup>: กำหนดกลุ่มคอลัมน์ของตาราง
• <col>: กำหนดคุณสมบัติสำหรับคอลัมน์ของตาราง

ตัวอย่าง:

1
<table border="1">
2
  <caption>นี่คือหัวข้อของตาราง</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>ชื่อ</th>
11
      <th>อายุ</th>
12
      <th>เมือง</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>สมชาย</td>
18
      <td>25</td>
19
      <td>กรุงเทพฯ</td>
20
    </tr>
21
    <tr>
22
      <td>สมหญิง</td>
23
      <td>30</td>
24
      <td>เชียงใหม่</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">จำนวนคนทั้งหมด: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

ผลลัพธ์:

คุณสมบัติของตาราง:

• border: ใช้สำหรับกำหนดเส้นขอบของตาราง ค่าเป็นตัวเลขที่แสดงความกว้างของเส้นขอบ
• cellpadding: ใช้สำหรับกำหนดระยะห่างระหว่างเซลล์ ค่าเป็นตัวเลขที่แสดงขนาดของระยะห่าง
• cellspacing: ใช้สำหรับกำหนดระยะห่างระหว่างเส้นขอบของเซลล์ ค่าเป็นตัวเลขที่แสดงขนาดของระยะห่าง
• width: ใช้สำหรับกำหนดความกว้างของตาราง ค่าเป็นตัวเลขที่แสดงความกว้าง
• height: ใช้สำหรับกำหนดความสูงของตาราง ค่าเป็นตัวเลขที่แสดงความสูง
• style: ใช้สำหรับกำหนดสไตล์ของตาราง

ตัวอย่าง:

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">นี่คือตารางที่สวยงาม</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">ชื่อ</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">อายุ</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">เมือง</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">สมชาย</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">กรุงเทพฯ</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">สมหญิง</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">เชียงใหม่</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">จำนวนคนทั้งหมด: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

ผลลัพธ์:

การรวมเซลล์ตาราง

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

ตัวอย่าง:

1
<table border="1">
2
  <tr>
3
    <td>เซลล์ 1</td>
4
    <td colspan="2">รวมสองคอลัมน์แนวนอน</td>
5
    <td>เซลล์ 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">รวมสองแถวแนวตั้ง</td>
9
    <td>เซลล์ 3</td>
10
    <td>เซลล์ 4</td>
11
    <td>เซลล์ 5</td>
12
  </tr>
13
  <tr>
14
    <td>เซลล์ 7</td>
15
    <td>เซลล์ 8</td>
16
    <td>เซลล์ 9</td>
17
  </tr>
18
</table>

ผลลัพธ์:

[!สรุป]

• ตารางจะไม่แสดงเส้นขอบโดยค่าเริ่มต้น
• <tr> เป็นตัวย่อของ table row แสดงถึงแถวของตาราง
• <td>: td เป็นตัวย่อของ table data แสดงถึงเซลล์ข้อมูลของตาราง
• <th>: th เป็นตัวย่อของ table header แสดงถึงเซลล์ส่วนหัวของตาราง
• เบราว์เซอร์ส่วนใหญ่จะแสดงส่วนหัวเป็นข้อความตัวหนาและจัดกึ่งกลาง
• ภายในตารางสามารถมีข้อความ, รูปภาพ, รายการ, ย่อหน้า, ฟอร์ม, เส้นแนวนอน, ตาราง ฯลฯ ได้