แท็กที่เกี่ยวกับตาราง

ในบทความนี้ เราจะอธิบายเกี่ยวกับแท็กที่เกี่ยวข้องกับตาราง

นี่คือคำอธิบายวิธีการอธิบายตารางและคำบรรยายใต้ภาพใน HTML พร้อมตัวอย่าง

YouTube Video

แท็กที่เกี่ยวกับตาราง

แท็ก <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• แท็ก <table> ใช้เพื่อสร้างตารางที่จัดเรียงและแสดงข้อมูลในแถวและคอลัมน์

  แท็ก <table> จัดเรียงข้อมูลเชิงภาพและสร้างตารางที่มีแถวและคอลัมน์หลายๆ แถว แถวถูกกำหนดด้วยแท็ก <tr> ส่วนเซลล์หัวเรื่องถูกกำหนดด้วยแท็ก <th> และเซลล์ข้อมูลถูกกำหนดด้วยแท็ก <td>

• คุณสามารถปรับแต่งสไตล์และการจัดวางของตารางได้โดยใช้ CSS

แท็ก <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• แท็ก <tr> ใช้เพื่อกำหนดแถวในตาราง

  แท็ก <tr> ใช้เพื่อสร้างแต่ละแถวของตาราง ซึ่งประกอบด้วยเซลล์ (<td> หรือ <th>)

• แต่ละแถวสามารถมีหลายเซลล์ ซึ่งเป็นโครงสร้างรวมของตาราง

แท็ก <th> และ <td>

1<th>Header 1</th>
2<td>Data 1</td>

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

แอตทริบิวต์ colspan และ rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan และ rowspan เป็นแอตทริบิวต์ที่ใช้เมื่อต้องการให้เซลล์ในตารางครอบคลุมหลายคอลัมน์หรือแถว

• คุณสมบัติ colspan ช่วยให้เซลล์ครอบคลุมหลายคอลัมน์ได้
• แอตทริบิวต์ rowspan อนุญาตให้เซลล์ครอบคลุมหลายแถว

แท็ก <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• แท็ก <thead> ใช้ในการกำหนดส่วนหัวของตาราง ปกติแล้วจะบรรจุส่วนหัวของคอลัมน์

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

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

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

• แท็ก <tfoot> ใช้กำหนดส่วนท้ายของตาราง ซึ่งรวมถึงยอดรวมและหมายเหตุ

  แท็ก <tfoot> อยู่ที่ปลายตารางและใช้แสดงยอดรวมหรือคำอธิบายอื่น ๆ มันมีประโยชน์อย่างยิ่งในการสรุปหรือแสดงยอดรวมสำหรับชุดข้อมูลขนาดใหญ่

แท็ก <caption> และ <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• แท็ก <caption> เพิ่มคำบรรยาย (หัวข้อ) เพื่อทำให้เนื้อหาของตารางชัดเจนยิ่งขึ้น มันมักจะวางที่ส่วนบนของตารางและทำหน้าที่สรุปเนื้อหาทั้งหมดของตาราง

• แท็ก <colgroup> ใช้จัดกลุ่มคอลัมน์ภายในตารางและใช้ในการประยุกต์ใช้สไตล์หรือเลย์เอาต์ คุณสามารถกำหนดสีพื้นหลังหรือความกว้างสำหรับคอลัมน์เฉพาะได้โดยรวมแท็ก <col>

ตัวอย่างตาราง

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• แท็ก <table> ใช้สำหรับสร้างตารางที่แสดงข้อมูลในแถวและคอลัมน์

• แท็ก <thead> ใช้สำหรับจัดกลุ่มแถวส่วนหัวของตาราง โดยปกติจะประกอบด้วยแท็ก <th> ซึ่งใช้สำหรับเป็นส่วนหัว

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

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

• แท็ก <colgroup> ใช้ในการจัดกลุ่มคอลัมน์ในตารางและสามารถใช้กำหนดสไตล์ทั้งหมดให้กับคอลัมน์

• แท็ก <caption> ใช้เพิ่มคำอธิบายหรือหัวเรื่องให้กับตาราง เพื่อช่วยให้ผู้ใช้เข้าใจเนื้อหาของตารางได้ง่ายขึ้น

• คุณสมบัติ colspan ช่วยให้เซลล์ครอบคลุมหลายคอลัมน์ได้

• แอตทริบิวต์ rowspan อนุญาตให้เซลล์ครอบคลุมหลายแถว

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video