HTML ตัวอย่างตาราง
| จำนวน | ชื่อจริง | นามสกุล | จุด |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
การกำหนดตาราง HTML
ตัวอย่าง
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> ลองตัวเอง» ตัวอย่างอธิบาย:
ตารางที่กำหนดไว้ด้วย <table> แท็ก
ตารางจะแบ่งออกเป็นแถวของตารางกับ <tr> แท็ก
แถวของตารางจะแบ่งออกเป็นข้อมูลตารางกับ <td> แท็ก
แถวของตารางยังสามารถแบ่งออกเป็นหัวตารางด้วย <th> แท็ก
ข้อมูลตาราง <td> เป็นภาชนะบรรจุข้อมูลของตาราง
พวกเขาสามารถมีทุกประเภทขององค์ประกอบ HTML เช่นข้อความ, ภาพ, รายการ, ตารางอื่น ๆ ฯลฯ
ตาราง HTML ที่มีแอตทริบิวต์ชายแดน
ถ้าคุณไม่ได้ระบุชายแดนสำหรับโต๊ะก็จะปรากฏไม่มีพรมแดน
ชายแดนสามารถเพิ่มการใช้ border แอตทริบิวต์:
ตัวอย่าง
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> ลองตัวเอง» border แอตทริบิวต์อยู่ในทางของมันออกมาจากมาตรฐานของ HTML! มันจะดีกว่าที่จะใช้ CSS
หากต้องการเพิ่มเส้นขอบใช้ทรัพย์สิน CSS ชายแดน:
โปรดจำไว้ว่าการกำหนดเส้นเขตแดนทั้งตารางและเซลล์ตาราง
ตาราง HTML ที่มีพรมแดนยุบ
ถ้าคุณต้องการเส้นขอบจะยุบเป็นหนึ่งชายแดนเพิ่ม CSS border-collapse :
ตาราง HTML ที่มีมือถือ Padding
padding มือถือระบุช่องว่างระหว่างเนื้อหามือถือและพรมแดนของตน
ถ้าคุณไม่ได้ระบุช่องว่างภายในเซลล์ตารางจะปรากฏโดยไม่ต้องขยาย
ในการตั้งค่า padding ใช้ CSS padding ทรัพย์สิน:
ตัวอย่าง
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} ลองตัวเอง» HTML ตารางหัวเรื่อง
หัวตารางจะถูกกำหนดด้วย <th> แท็ก
โดยค่าเริ่มต้นเบราว์เซอร์ที่สำคัญทั้งหมดแสดงหัวตารางเป็นตัวหนาและเป็นศูนย์กลาง:
ตัวอย่าง
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> ลองตัวเอง» การจัดซ้ายหัวตารางให้ใช้ CSS text-align ทรัพย์สิน:
ตาราง HTML ที่มีการเว้นพื้นที่ชายแดน
ระยะห่างชายแดนระบุช่องว่างระหว่างเซลล์
ในการตั้งระยะห่างชายแดนสำหรับตารางให้ใช้ CSS border-spacing ทรัพย์สิน:
ถ้าตารางมีการยุบพรมแดนชายแดนระยะห่างจะไม่มีผล
เซลล์ตารางที่ครอบคลุมหลายคอลัมน์
ที่จะทำให้ช่วงเซลล์มากกว่าหนึ่งคอลัมน์ใช้ colspan แอตทริบิวต์:
ตัวอย่าง
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> ลองตัวเอง» เซลล์ตารางที่ครอบคลุมหลายแถว
ที่จะทำให้ช่วงเซลล์มากกว่าหนึ่งแถวใช้ rowspan แอตทริบิวต์:
ตัวอย่าง
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> ลองตัวเอง» ตาราง HTML ด้วยคำอธิบายภาพ
เพื่อเพิ่มคำอธิบายในตารางให้ใช้ <caption> แท็ก:
ตัวอย่าง
<table style="width:100%">
<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>$50</td>
</tr>
</table> ลองตัวเอง» <caption> แท็กจะต้องแทรกทันทีหลังจากที่ <table> แท็ก
A รูปแบบพิเศษสำหรับตารางหนึ่ง
เพื่อกำหนดรูปแบบพิเศษสำหรับตารางพิเศษเพิ่ม id แอตทริบิวต์ตาราง:
ตัวอย่าง
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>ตอนนี้คุณสามารถกำหนดรูปแบบพิเศษสำหรับตารางนี้:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} ลองตัวเอง» และเพิ่มรูปแบบมากขึ้น:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} ลองตัวเอง» บทสรุป
- ใช้ HTML <table> องค์ประกอบในการกำหนดตาราง
- ใช้ HTML <tr> องค์ประกอบในการกำหนดแถวของตาราง
- ใช้ HTML <td> องค์ประกอบในการกำหนดข้อมูลตาราง
- ใช้แบบ HTML <th> องค์ประกอบในการกำหนดตารางหัวเรื่อง
- ใช้ HTML <caption> องค์ประกอบในการกำหนดตารางคำบรรยายใต้ภาพ
- ใช้แบบ CSS border คุณสมบัติการกำหนดเส้นขอบ
- ใช้แบบ CSS border-collapse คุณสมบัติการยุบพรมแดนมือถือ
- ใช้แบบ CSS padding คุณสมบัติการเพิ่มขยายไปยังเซลล์
- ใช้แบบ CSS text-align คุณสมบัติการจัดตำแหน่งข้อความมือถือ
- ใช้แบบ CSS border-spacing คุณสมบัติการกำหนดระยะห่างระหว่างเซลล์
- ใช้ colspan แอตทริบิวต์ที่จะทำให้ช่วงเซลล์หลายคอลัมน์
- ใช้ rowspan แอตทริบิวต์ที่จะทำให้ช่วงเซลล์หลายแถว
- ใช้ id แอตทริบิวต์ไม่ซ้ำกันกำหนดตารางหนึ่ง
ทดสอบตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ใช้สิทธิ 5 » ออกกำลังกาย 6 »
แท็ก HTML ตาราง
| แท็ก | ลักษณะ |
|---|---|
| <table> | กำหนดตาราง |
| <th> | กำหนดเซลล์ส่วนหัวในตาราง |
| <tr> | กำหนดแถวในตาราง |
| <td> | กำหนดเซลล์ในตาราง |
| <caption> | กำหนดคำอธิบายภาพตาราง |
| <colgroup> | ระบุกลุ่มหนึ่งหรือมากกว่าหนึ่งคอลัมน์ในตารางการจัดรูปแบบ |
| <col> | ระบุคุณสมบัติคอลัมน์แต่ละคอลัมน์ภายใน <colgroup> องค์ประกอบ |
| <thead> | กลุ่มเนื้อหาส่วนหัวในตาราง |
| <tbody> | กลุ่มเนื้อหาร่างกายในตาราง |
| <tfoot> | กลุ่มเนื้อหาส่วนท้ายในตาราง |