ตาราง HTML
- หน้าก่อน รูปภาพ HTML
- หน้าต่อไป รายการ HTML
คุณสามารถสร้างตารางด้วย HTML
ตัวอย่าง
- ตาราง
- ตัวอย่างนี้แสดงวิธีที่จะสร้างตารางในเอกสาร HTML
- ขอบเขตของตาราง
- ตัวอย่างนี้แสดงการใช้ตารางของหลายชนิดของขอบเขต
ตาราง
ตารางจะถูกกำหนดด้วยแท็ก <table> แต่ละตารางมีบรรทัดหลายบรรทัด (กำหนดด้วยแท็ก <tr>) และแต่ละบรรทัญถูกแบ่งออกเป็นเซลล์หลายเซลล์ (กำหนดด้วยแท็ก <td>) ตัวอักษร td หมายถึงข้อมูลของตาราง (table data) หรือเนื้อหาของเซลล์ข้อมูล. เซลล์ข้อมูลสามารถมีข้อความ ภาพ รายการ ย่อหน้า ฟอร์ม ระยะเวลา ตาราง และอื่นๆ
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
แสดงในเบราว์เซอร์ตามนี้:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
ตารางและคุณสมบัติขอบเขต
ถ้าไม่มีการกำหนดคุณสมบัติขอบเขต ตารางจะไม่แสดงขอบเขตของตน. บางครั้งนี้เป็นสิ่งที่มีประโยชน์ แต่ส่วนใหญ่เราอยากให้แสดงขอบเขตของตาราง
ใช้คุณสมบัติของขอบเขตเพื่อแสดงตารางที่มีขอบเขต
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
ข้อหัวของตาราง
ข้อหัวของตารางใช้ <th> แทน
ส่วนใหญ่ของเบราว์เซอร์จะแสดงข้อหัวเนื้อที่หนาและศูนย์กลาง:
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
แสดงในเบราว์เซอร์ตามนี้:
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
เซลล์ว่างในตาราง
ในบางเบราว์เซอร์ ตารางหน้าที่ไม่มีสิ่งของที่แสดงออกมา อาจไม่แสดงขอบเขตของเซลล์ที่ว่าง (ไม่มีสิ่งของ) ได้
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table>
เบราว์เซอร์อาจแสดงตามนี้:
注意：ขอบเขตของเซลล์ว่างนี้ไม่ได้แสดงขึ้นมา。เพื่อป้องกันเหตุการณ์นี้ ให้เพิ่มช่องว่างในเซลล์ว่าง เพื่อแสดงขอบเขตขึ้นมา
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table>
แสดงในเบราว์เซอร์ตามนี้:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
ตัวอย่างเพิ่มเติม
- ตารางที่ไม่มีขอบเขต
- ตัวอย่างตารางที่ไม่มีขอบ
- หัวข้อตารางในตาราง
- ตัวอย่างนี้แสดงวิธีการแสดงหัวข้อตาราง
- เซลล์ว่าง
- ตัวอย่างนี้แสดงวิธีการใช้ ' ' ในการจัดการเซลล์ที่ไม่มีเนื้อหา
- ตารางที่มีหัวข้อ
- ตัวอย่างตารางที่มีหัวข้อ (caption)
- เซลล์ข้างหลังหรือข้างขนานของตาราง
- ตัวอย่างนี้แสดงวิธีการกำหนดเซลล์ข้างหลังหรือข้างขนานของตาราง
- แท็กภายในตาราง
- ตัวอย่างนี้แสดงวิธีการแสดงตัวงานในช่องที่แตกต่างกัน
- ช่องว่างระหว่างเซลล์ (Cell padding)
- ตัวอย่างนี้แสดงวิธีการใช้ 'Cell padding' ในการสร้างช่องว่างระหว่างเนื้อหาของเซลล์และขอบเซลล์
- ระยะห่างระหว่างเซลล์ (Cell spacing)
- ตัวอย่างนี้แสดงวิธีการใช้ 'Cell spacing' เพื่อเพิ่มระยะห่างระหว่างเซลล์
- เพิ่มสีพื้นหลังหรือภาพพื้นหลังในตาราง
- ตัวอย่างนี้แสดงวิธีการเพิ่มสีพื้นหลังหรือภาพพื้นหลังในตาราง
- เพิ่มสีพื้นหลังหรือภาพพื้นหลังในเซลล์ตาราง
- ตัวอย่างนี้แสดงวิธีการเพิ่มสีพื้นหลังหรือภาพพื้นหลังในเซลล์ตาราง
- จัดลำดับเนื้อหาในเซลล์ตาราง
- ตัวอย่างนี้แสดงวิธีการใช้ 'align' ในการจัดลำดับเนื้อหาของเซลล์เพื่อที่จะสร้างตารางที่ดูงดี
- คุณสมบัติ frame
- ตัวอย่างนี้แสดงวิธีการใช้ 'frame' นั้นเพื่อควบคุมขอบเบื้องโดยรอบตาราง
แท็กแบบตาราง
| ตาราง | รายละเอียด |
|---|---|
| <table> | กำหนดตาราง |
| <caption> | กำหนดส่วนของหัวข้อตาราง |
| <th> | กำหนดส่วนของหัวตาราง |
| <tr> | กำหนดส่วนของแถวตาราง |
| <td> | กำหนดส่วนของแถวของตาราง |
| <thead> | กำหนดส่วนของหัวตาราง |
| <tbody> | กำหนดส่วนของเนื้อหาตาราง |
| <tfoot> | กำหนดส่วนของฟุตเตอร์ตาราง |
| <col> | กำหนดคุณสมบัติสำหรับตารางของฤดูกาล |
| <colgroup> | กำหนดกลุ่มตารางของฤดูกาล |
- หน้าก่อน รูปภาพ HTML
- หน้าต่อไป รายการ HTML
