HTML <table>แท็ก
ตัวอย่าง
ตาราง HTML อย่างง่าย ประกอบด้วยสองคอลัมน์และสองแถว:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<table>กำหนดตาราง HTML
ตาราง HTML ประกอบด้วยองค์ประกอบหนึ่ง<table>องค์ประกอบและองค์ประกอบ<tr> ,
<th>และ<td>อย่างน้อยหนึ่งรายการ
องค์ประกอบ <tr> กำหนดแถวของตาราง องค์ประกอบ <th> กำหนดส่วนหัวของตาราง และองค์ประกอบ <td> กำหนดเซลล์ของตาราง
ตาราง HTML อาจรวมองค์ประกอบ<caption> , <colgroup> , <thead> , <tfoot>และ<tbody>
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
คุณสมบัติสากล
แท็ ก<table>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<table>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีเพิ่มเส้นขอบที่ยุบลงในตาราง (ด้วย CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
ตัวอย่าง
วิธีจัดแนวตารางให้ถูกต้อง (ด้วย CSS):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
ตัวอย่าง
วิธีจัดกึ่งกลางตาราง (ด้วย CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
ตัวอย่าง
วิธีเพิ่มสีพื้นหลังให้กับตาราง (ด้วย CSS):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
ตัวอย่าง
วิธีเพิ่มช่องว่างภายในตาราง (ด้วย CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
ตัวอย่าง
วิธีกำหนดความกว้างของตาราง (ด้วย CSS):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
ตัวอย่าง
วิธีสร้างส่วนหัวของตาราง:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
ตัวอย่าง
วิธีสร้างตารางพร้อมคำบรรยาย:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
ตัวอย่าง
วิธีกำหนดเซลล์ตารางที่มีมากกว่าหนึ่งแถวหรือหนึ่งคอลัมน์:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: ตาราง HTML
การอ้างอิง HTML DOM: Table Object
กวดวิชา CSS: ตารางการจัดสไตล์
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<table>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}