HTMLTableElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Giao diện HTMLTableElement cung cấp các thuộc tính và phương thức đặc biệt để thao tác bố cục và cách trình bày của bảng trong tài liệu HTML, ngoài những gì giao diện đối tượng HTMLElement thông thường đã có sẵn thông qua kế thừa.

Thuộc tính thể hiện

Kế thừa các thuộc tính từ phần tử cha, HTMLElement.

HTMLTableElement.caption: Một HTMLTableCaptionElement đại diện cho phần tử <caption> đầu tiên là phần tử con của bảng, hoặc null nếu không tìm thấy. Khi được đặt, nếu đối tượng không đại diện cho một <caption>, sẽ ném một DOMException với tên HierarchyRequestError. Nếu cung cấp đối tượng hợp lệ, nó sẽ được chèn vào cây như phần tử con đầu tiên của bảng và phần tử <caption> đầu tiên là con của bảng sẽ bị xóa khỏi cây, nếu có.
HTMLTableElement.tHead: Một HTMLTableSectionElement đại diện cho phần tử <thead> đầu tiên là phần tử con của bảng, hoặc null nếu không tìm thấy. Khi được đặt, nếu đối tượng không đại diện cho một <thead>, sẽ ném một DOMException với tên HierarchyRequestError. Nếu cung cấp đối tượng hợp lệ, nó sẽ được chèn vào cây ngay trước phần tử đầu tiên không phải là <caption> hoặc <colgroup>, hoặc làm phần tử con cuối cùng nếu không có phần tử như vậy, và phần tử <thead> đầu tiên là con của bảng sẽ bị xóa khỏi cây, nếu có.
HTMLTableElement.tFoot: Một HTMLTableSectionElement đại diện cho phần tử <tfoot> đầu tiên là phần tử con của bảng, hoặc null nếu không tìm thấy. Khi được đặt, nếu đối tượng không đại diện cho một <tfoot>, sẽ ném một DOMException với tên HierarchyRequestError. Nếu cung cấp đối tượng hợp lệ, nó sẽ được chèn vào cây ngay trước phần tử đầu tiên không phải là <caption>, <colgroup>, hoặc <thead>, hoặc làm phần tử con cuối cùng nếu không có phần tử như vậy, và phần tử <tfoot> đầu tiên là con của bảng sẽ bị xóa khỏi cây, nếu có.
HTMLTableElement.rows Read only: Trả về một HTMLCollection sống chứa tất cả các hàng của bảng, tức là mọi <tr> là con của bảng, hoặc là con của các phần tử <thead>, <tbody>, và <tfoot>. Các hàng thuộc <thead> xuất hiện trước, theo thứ tự cây, và các hàng thuộc <tbody> xuất hiện sau cùng, cũng theo thứ tự cây. HTMLCollection này là sống và tự động cập nhật khi HTMLTableElement thay đổi.
HTMLTableElement.tBodies Read only: Trả về một HTMLCollection sống chứa tất cả các phần tử <tbody> của bảng. HTMLCollection này là sống và tự động cập nhật khi HTMLTableElement thay đổi.

Thuộc tính lỗi thời

Warning: Các thuộc tính sau đã lỗi thời. Bạn nên tránh sử dụng chúng.

HTMLTableElement.align Đã lỗi thời: Một chuỗi chứa giá trị liệt kê phản ánh thuộc tính align. Nó cho biết căn chỉnh nội dung của bảng so với ngữ cảnh xung quanh. Các giá trị có thể là "left", "right", và "center".
HTMLTableElement.bgColor Đã lỗi thời: Một chuỗi chứa màu nền của các ô. Nó phản ánh thuộc tính lỗi thời bgColor.
HTMLTableElement.border Đã lỗi thời: Một chuỗi chứa độ rộng theo pixel của đường viền của bảng. Nó phản ánh thuộc tính lỗi thời border.
HTMLTableElement.cellPadding Đã lỗi thời: Một chuỗi chứa độ rộng theo pixel của khoảng trống ngang và dọc giữa nội dung ô và đường viền ô. Nó phản ánh thuộc tính lỗi thời cellpadding.
HTMLTableElement.cellSpacing Đã lỗi thời: Một chuỗi chứa độ rộng theo pixel của khoảng cách ngang và dọc giữa các ô. Nó phản ánh thuộc tính lỗi thời cellspacing.
HTMLTableElement.frame Đã lỗi thời: Một chuỗi chứa kiểu của các đường viền ngoài của bảng. Nó phản ánh thuộc tính lỗi thời frame và có thể nhận một trong các giá trị sau: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", hoặc "border".
HTMLTableElement.rules Đã lỗi thời: Một chuỗi chứa kiểu của các đường viền bên trong của bảng. Nó phản ánh thuộc tính lỗi thời rules và có thể nhận một trong các giá trị sau: "none", "groups", "rows", "cols", hoặc "all".
HTMLTableElement.summary Đã lỗi thời: Một chuỗi chứa mô tả mục đích hoặc cấu trúc của bảng. Nó phản ánh thuộc tính lỗi thời summary.
HTMLTableElement.width Đã lỗi thời: Một chuỗi chứa chiều rộng mong muốn của toàn bộ bảng, tính bằng pixel hoặc phần trăm. Nó phản ánh thuộc tính lỗi thời width.

Phương thức thể hiện

Kế thừa các phương thức từ phần tử cha, HTMLElement.

HTMLTableElement.createTHead(): Trả về một HTMLTableSectionElement đại diện cho phần tử <thead> đầu tiên là phần tử con của bảng. Nếu không tìm thấy, một phần tử mới sẽ được tạo và chèn vào cây ngay trước phần tử đầu tiên không phải là <caption> hoặc <colgroup>, hoặc làm phần tử con cuối cùng nếu không có phần tử như vậy.
HTMLTableElement.deleteTHead(): Xóa phần tử <thead> đầu tiên là con của bảng.
HTMLTableElement.createTFoot(): Trả về một HTMLTableSectionElement đại diện cho phần tử <tfoot> đầu tiên là con của bảng. Nếu không tìm thấy, một phần tử mới sẽ được tạo và chèn vào cây làm phần tử con cuối cùng.
HTMLTableElement.deleteTFoot(): Xóa phần tử <tfoot> đầu tiên là con của bảng.
HTMLTableElement.createTBody(): Trả về một HTMLTableSectionElement đại diện cho một phần tử <tbody> mới là con của bảng. Nó được chèn vào cây sau phần tử <tbody> cuối cùng, hoặc làm phần tử con cuối cùng nếu không có phần tử như vậy.
HTMLTableElement.createCaption(): Trả về một HTMLElement đại diện cho phần tử <caption> đầu tiên là con của bảng. Nếu không tìm thấy, một phần tử mới sẽ được tạo và chèn vào cây làm phần tử con đầu tiên của phần tử <table>.
HTMLTableElement.deleteCaption(): Xóa phần tử <caption> đầu tiên là con của bảng.
HTMLTableElement.insertRow(): Trả về một HTMLTableRowElement đại diện cho một hàng mới của bảng. Nó chèn hàng này vào tập hợp các hàng ngay trước phần tử <tr> ở vị trí index đã cho. Nếu cần, một phần tử <tbody> sẽ được tạo. Nếu index là -1, hàng mới sẽ được thêm vào cuối tập hợp. Nếu index nhỏ hơn -1 hoặc lớn hơn số lượng hàng trong tập hợp, sẽ ném một DOMException với giá trị IndexSizeError.
HTMLTableElement.deleteRow(): Xóa hàng tương ứng với index được truyền vào. Nếu giá trị index là -1, hàng cuối cùng sẽ bị xóa; nếu nhỏ hơn -1 hoặc lớn hơn số lượng hàng trong tập hợp, sẽ ném một DOMException với giá trị IndexSizeError.

Ví dụ

Sử dụng giao diện bảng DOM

Giao diện HTMLTableElement cung cấp một số phương thức tiện lợi để tạo và thao tác bảng. Hai phương thức thường dùng là HTMLTableElement.insertRow và HTMLTableRowElement.insertCell.

Để thêm một hàng và một số ô vào một bảng hiện có:

html

<table id="table0">
  <tbody>
    <tr>
      <td>Row 0 Cell 0</td>
      <td>Row 0 Cell 1</td>
    </tr>
  </tbody>
</table>

const table = document.getElementById("table0");
const row = table.insertRow(-1);

for (let i = 0; i < 2; i++) {
  const cell = row.insertCell(-1);
  const text = `Row ${row.rowIndex} Cell ${i}`;
  cell.appendChild(document.createTextNode(text));
}

Đặc tả kỹ thuật

Thông số kỹ thuật
HTML # htmltableelement

Tương thích trình duyệt

Xem thêm

Phần tử HTML triển khai giao diện này: <table>.

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này