HTML <th> แบบบันทึก

  • หน้าก่อนหน้า <tfoot>
  • หน้าต่อไป <thead>

定义和用法

<th> 标签定义 HTML 表格中的标题单元格。

HTML 表格有两种单元格：

  • 标题单元格 - 包含标题信息（使用 <th> 元素创建）
  • 数据单元格 - 包含数据（使用 <td> 元素创建）

默认情况下，<th> 元素中的文本是粗体且居中的。

默认情况下，<td> 元素中的文本是普通的并且左对齐的。

另请参阅：

HTML 教程：ตาราง HTML

HTML DOM 参考手册：TableHeader 对象

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

如何对齐 <th> เนื้อหา (ใช้ CSS)

<table style="width:100%">
  <tr>
    <th style="text-align:left">月份</th>
    <th style="text-align:left">储蓄</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>กุมภาพันธ์</td>
    <td>￥4500</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

例子 3

如何将背景颜色添加到表格标题单元格（使用 CSS）：

<table>
  <tr>
    <th style="background-color:#FF0000">月份</th>
    <th style="background-color:#00FF00">储蓄</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
 </table>

ทดลองด้วยตัวเอง

例子 4

如何设置表格标题单元格的高度（使用 CSS）：

<table>
  <tr>
    <th style="height:100px">เดือน</th>
    <th style="height:100px">เงินมัดเก็บ</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 5

วิธีการกำหนดว่าหัวตารางไม่ควรแบ่งบรรจบ (ใช้ CSS)

<table>
  <tr>
    <th>เดือน</th>
    <th style="white-space:nowrap">เงินที่มัดเก็บสำหรับรถยนต์ใหม่</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 6

วิธีการปรับเปรียบเรียงตัวอักษรตั้งแต่ด้านบน <th> เนื้อหา (ใช้ CSS)

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">เดือน</th>
    <th style="vertical-align:bottom">เงินมัดเก็บ</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 7

วิธีการกำหนดความกว้างของหัวตารางตาราง (ใช้ CSS)

<table style="width:100%">
  <tr>
    <th style="width:70%">เดือน</th>
    <th style="width:30%">เงินมัดเก็บ</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 8

วิธีการสร้างหัวตาราง

<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>

ทดลองด้วยตัวเอง

ตัวอย่าง 9

วิธีการสร้างตารางที่มีหัว

<table>
  <caption>เงินมัดเก็บทุกเดือน</caption>
  <tr>
    <th>เดือน</th>
    <th>เงินมัดเก็บ</th>
  </tr>
  <tr>
    <td>มกราคม</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>กุมภาพันธ์</td>
    <td>￥4500</td>
  </tr>
</table>

ทดลองด้วยตัวเอง

ตัวอย่าง 10

วิธีการกำหนดเซลล์ตารางที่ข้ามบรรจบบรรดาแถวหรือคอลัมน์

<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>

ทดลองด้วยตัวเอง

รายละเอียด

รายละเอียด ค่า คำอธิบาย
abbr ข้อความ กำหนดเวอร์ชันที่ย่อของข้อความในหัวตาราง
colspan ตัวเลข กำหนดว่าหัวตารางควรข้ามบรรจบบรรดาคอลัมน์
headers header_id กำหนดหัวตารางหนึ่งหรือหลายหัวที่เกี่ยวข้องกับเซลล์
rowspan ตัวเลข กำหนดว่าหัวตารางควรข้ามบรรจบบรรดาแถว
scope
  • col
  • colgroup
  • row
  • rowgroup
 หัวข้อแถวหรือหัวข้อบวกกันของหลายคอลัมน์หรือบวกกันของหลายแถว

การตั้งค่า Global

<th> ตามตารางแสดงตัวอย่าง การตั้งค่า Global ใน HTML。

属性 Event

<th> ตามตารางแสดงตัวอย่าง 属性 Event ใน HTML。

การตั้งค่า CSS ปกติ

โปรแกรมน่าใช้นำมาจากบราวเซอร์ที่ส่วนใหญ่จะแสดงค่าในรูปแบบเริ่มต้นดังนี้ <th> องค์ประกอบ：

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

การสนับสนุนโดยเครื่องนอน

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <tfoot>
  • หน้าต่อไป <thead>