HTML <tr> แบบซับซ้อน
คำนำออกและการใช้งาน
<tr>
กำหนดแถวในตาราง HTML
<tr>
องค์ประกอบ <th> หรือ <td> องค์ประกอบ
ดูเพิ่มเติมที่:
สอน HTMLHTML ตาราง
คู่มืออ้างอิง HTML DOMTableRow วัตถุ
สอน CSSตั้งรูปแบบตาราง
ตัวอย่าง
ตัวอย่าง 1
ตาราง HTML สามบรรทัดเรียบๆ; แถวหัวข้อและแถวข้อมูลสองแถว:
<table> <tr> <th>เดือน</th> <th>บัญชีเงินฝาก</th> </tr> <tr> <td>เดือนมกราคม</td> <td>¥3400</td> </tr> <tr> <td>เดือนกุมภาพันธ์</td> <td>¥4500</td> </tr> </table>
ตัวอย่าง 2
แนะนำวิธีการจัดตาราง: <tr>
สำหรับเนื้อหาในภายใน (ใช้ CSS):
<table style="width:100%"> <tr> <th>เดือน</th> <th>บัญชีเงินฝาก</th> </tr> <tr style="text-align:right"> <td>เดือนมกราคม</td> <td>¥3400</td> </tr> </table>
ตัวอย่าง 3
แนะนำวิธีการเพิ่มสีพื้นหลังในบรรทัดตาราง (ใช้ CSS):
<table> <tr style="background-color:#FF0000"> <th>เดือน</th> <th>บัญชีเงินฝาก</th> </tr> <tr> <td>เดือนมกราคม</td> <td>¥3400</td> </tr> </table>
ตัวอย่าง 4
แนะนำวิธีการจัดตารางตามตรงขาม: <tr>
สำหรับเนื้อหาในภายใน (ใช้ CSS):
<table style="height:200px"> <tr style="vertical-align:top"> <th>เดือน</th> <th>บัญชีเงินฝาก</th> </tr> <tr style="vertical-align:bottom"> <td>เดือนมกราคม</td> <td>¥3400</td> </tr> </table>
ตัวอย่าง 5
แนะนำวิธีการสร้างหัวข้อตาราง:
<table> <tr> <th>ชื่อ</th> <th>อีเมล</th> <th>โทรศัพท์</th> </tr> <tr> <td>Bill Gates</td> <td>bill.gates@example.com</td> <td>138-1234-5678</td> </tr> </table>
ตัวอย่าง 6
แนะนำวิธีการสร้างตารางที่มีหัวข้อ:
<table> <caption>เดือนบัญชีเงินฝาก</caption> <tr> <th>เดือน</th> <th>บัญชีเงินฝาก</th> </tr> <tr> <td>เดือนมกราคม</td> <td>¥3400</td> </tr> <tr> <td>เดือนกุมภาพันธ์</td> <td>¥4500</td> </tr> </table>
ตัวอย่าง 7
แนะนำวิธีการกำหนดหน่วยเรียงแบบแถวหรือคอลัมน์ของหน่วยเรียงตาราง:
<table> <tr> <th>ชื่อ</th> <th>อีเมล</th> <th colspan="2">โทรศัพท์</th> </tr> <tr> <td>Bill Gates</td> <td>bill.gates@example.com</td> <td>138-1234-5678</td> <td>186-2345-6789</td> </tr> </table>
ตัวแปรทั่วไป
<tr>
ตามตารางนี้ ตัวแปรทั่วไปใน HTML。
ตัวแปรเหตุการณ์
<tr>
ตามตารางนี้ ตัวแปรเหตุการณ์ใน HTML。
การตั้งค่า CSS โดยมาตราฐาน
มาตราฐานการแสดงผลโดยการใช้ตัวเลขตั้งแต่ <tr>
องค์ประกอบ:
tr { display: table-row; vertical-align: inherit; border-color: inherit; }
การสนับสนุนโดยเครื่องนอก
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |