Hướng dẫn get tbody of table javascript - lấy tbody của bảng javascript

Question

element is used in conjunction with the and elements to specify each part of a table (body, header, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

Một bàn có thể có bao nhiêu tbody?

Bạn có thể sử dụng nhiều hơn một mỗi bảng miễn là tất cả chúng liên tiếp.Điều này cho phép bạn chia các hàng trong các bảng lớn thành các phần, mỗi phần có thể được định dạng riêng nếu mong muốn.more than one

per table as long as they are all consecutive. This lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired.

Có cần thiết phải có TBOD trong mỗi bảng không?

Thẻ cuối t có thể luôn được bỏ qua một cách an toàn.Các thẻ bắt đầu cho tead và tfoot được yêu cầu khi các phần đầu bảng và chân có mặt tương ứng, nhưng các thẻ kết thúc tương ứng có thể luôn được bỏ qua một cách an toàn.. The start tags for THEAD and TFOOT are required when the table head and foot sections are present respectively, but the corresponding end tags may always be safely omitted.

Sự khác biệt giữa bảng và tbody là gì?

TBODS chứa phần thân hoặc nội dung chính của bảng HTML.Sử dụng nó cùng với các phần tử THEAD và TOFF để thêm cấu trúc và ý nghĩa ngữ nghĩa cho các bảng HTML.TBODS nên chứa dữ liệu chính được trình bày trong bảng trong khi TheAD chứa các tiêu đề cột và tfoot chứa dữ liệu tóm tắt. . Use it along with the thead and tfoot elements to add structure and semantic meaning to HTML tables. The tbody should contain the primary data presented in the table while the thead contains column headings and the tfoot contains summary data.

Stack Overflow cho các đội đang chuyển sang miền riêng của nó! Khi việc di chuyển hoàn tất, bạn sẽ truy cập các nhóm của mình tại StackoverFlowTeams.com và họ sẽ không còn xuất hiện ở thanh bên trái trên stackoverflow.com.stackoverflowteams.com, and they will no longer appear in the left sidebar on stackoverflow.com.

Nội dung chính Show

Định nghĩa và cách sử dụng
Hỗ trợ trình duyệt
Đặc tính
Phương pháp
Trả về phần tử từ bộ sưu tập với chỉ mục được chỉ định (bắt đầu từ 0).
Lưu ý: Trả về NULL nếu ID không tồn tại
Thêm ví dụ "hãy thử nó" dưới đây.
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Thuộc tính
Thuộc tính không dùng nữa
Ghi chú sử dụng
Ví dụ cơ bản
Nhiều cơ thể
Đầu tiên, các thuộc tính kiểu tổng thể của bảng được đặt, cấu hình độ dày, kiểu dáng và màu sắc của đường viền bên ngoài của bảng và sử dụng HTMLTableElement.tBodies8 để đảm bảo rằng các đường viền được chia sẻ giữa các ô liền kề thay vì mỗi tế bào có biên giới riêng ở giữa. HTMLTableElement.tBodies9 được sử dụng để thiết lập phông chữ ban đầu cho bảng.
Kết quả
Tbody có phải là một thẻ bảng không?
Một bàn có thể có bao nhiêu tbody?
Có cần thiết phải có TBOD trong mỗi bảng không?
Sự khác biệt giữa bảng và tbody là gì?

Kiểm tra email của bạn để cập nhật.

Đối tượng bảng

Thí dụ

Tìm hiểu có bao nhiêu yếu tố trong một bảng:

var x = document.getEuityById ("mytable"). tbodies.length;

Kết quả của x sẽ là:

2

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Bộ sưu tập Tbodies trả về một tập hợp tất cả các yếu tố trong một bảng.

Lưu ý: Các phần tử trong bộ sưu tập được sắp xếp khi chúng xuất hiện trong mã nguồn. The elements in the collection are sorted as they appear in the source code.

Hỗ trợ trình duyệt

Bộ sưu tập
Tbodes	Đúng	Đúng	Đúng	Đúng	Đúng

Cú pháp

Đặc tính

Tài sản	Sự mô tả
chiều dài	Trả về số lượng các yếu tố trong bộ sưu tập. Lưu ý: thuộc tính này chỉ đọc This property is read-only

Phương pháp

Phương pháp	Sự mô tả
chiều dài	Trả về số lượng các yếu tố trong bộ sưu tập. Lưu ý: thuộc tính này chỉ đọc Returns null if the index number is out of range
Phương pháp	Trả về số lượng các yếu tố trong bộ sưu tập. Lưu ý: thuộc tính này chỉ đọc Returns null if the index number is out of range
Phương pháp	Phương pháp [mục lục] Returns null if the id does not exist

Trả về phần tử từ bộ sưu tập với chỉ mục được chỉ định (bắt đầu từ 0).

Lưu ý: Trả về null nếu số chỉ mục nằm ngoài phạm vi	Mục (INDEX)
Được đặt tên (ID)	Trả về phần tử từ bộ sưu tập với ID được chỉ định.

Lưu ý: Trả về NULL nếu ID không tồn tại

Thí dụ

[index]

Tìm hiểu có bao nhiêu yếu tố trong một bảng:

var x = document.getEuityById ("mytable"). tbodies.length;

Hãy tự mình thử »

Thí dụ

item(index)

Tìm hiểu có bao nhiêu yếu tố trong một bảng:

var x = document.getEuityById ("mytable"). tbodies.length;

Hãy tự mình thử »

Thí dụ

namedItem(id)

Tìm hiểu có bao nhiêu yếu tố trong một bảng:

var x = document.getEuityById ("mytable"). tbodies.length;

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Đối tượng bảng

Tài sản chỉ đọc HTMLTableElement.tBodies trả về một HTMLCollection của các cơ quan trong một ____10.HTMLTableElement.tBodies read-only property returns a live HTMLCollection of the bodies in a

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

0.

Mặc dù thuộc tính chỉ đọc, đối tượng trả về là trực tiếp và cho phép sửa đổi nội dung của nó.

Bộ sưu tập được trả lại bao gồm các yếu tố

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 ngầm. Ví dụ:

<table>
  <tr>
    <td>cell onetd>
  tr>
table>

HTML DOM được tạo từ HTML ở trên sẽ có phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 mặc dù các thẻ không được bao gồm trong HTML nguồn.

Giá trị

Ví dụ

Đoạn này có số lượng cơ thể trong một bàn.

Thông số kỹ thuật

Sự chỉ rõ
HTML Standard # Dom-Table-tbodies-Dev # dom-table-tbodies-dev

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 HTML gói gọn một tập hợp các hàng bảng (các phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

4), chỉ ra rằng chúng bao gồm phần thân của bảng (____10).
<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>
1 HTML element encapsulates a set of table rows (

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

4 elements), indicating that they comprise the body of the table (

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

0).

Thử nó

Phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1, cùng với các phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 và

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

8 liên quan của nó, cung cấp thông tin ngữ nghĩa hữu ích có thể được sử dụng khi kết xuất cho màn hình hoặc máy in.

Danh mục nội dung	Không có.
Nội dung cho phép	Không hoặc nhiều yếu tố `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 4.
Thiếu Thẻ	Thẻ bắt đầu của phần tử `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 1 có thể bị bỏ qua nếu điều đầu tiên bên trong phần tử `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 1 là phần tử `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 4 và nếu phần tử không được đi trước ngay lập tức bởi phần tử `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 1, `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 7 hoặc `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 8 có thẻ cuối đã bị bỏ qua. .
Cha mẹ được phép	Trong phần tử cha mẹ ____10 yêu cầu, phần tử `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 1 có thể được thêm vào sau một phần tử `th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; }` 2, `th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; }` 3 và một phần tử `<table> <thead> <tr> <th>Student IDth> <th>Nameth> <th>Majorth> tr> thead> <tbody> <tr> <td>3741255td> <td>Jones, Marthatd> <td>Computer Sciencetd> tr> <tr> <td>3971244td> <td>Nim, Victortd> <td>Russian Literaturetd> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> <td>Astrophysicstd> tr> tbody> table>` 7.
Vai trò aria ngầm	`th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; }` 5
Vai trò ARIA cho phép	Không tí nào
Giao diện DOM	`th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; }` 6

Thuộc tính

Yếu tố này bao gồm các thuộc tính toàn cầu.

Thuộc tính không dùng nữa

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

7Deprecated Deprecated

Thuộc tính được liệt kê này chỉ định cách xử lý ngang của từng nội dung ô. Các giá trị có thể là:

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

8, căn chỉnh nội dung ở bên trái của ô

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

9, tập trung vào nội dung trong ô

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

0, căn chỉnh nội dung ở bên phải của ô

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

1, chèn không gian vào nội dung văn bản để nội dung được chứng minh trong ô

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

2, sắp xếp nội dung văn bản trên một ký tự đặc biệt với phần bù tối thiểu, được xác định bởi các thuộc tính

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

2 và

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

4.

Nếu thuộc tính này không được đặt, giá trị

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

8 được giả định.

Vì thuộc tính này không được dùng để sử dụng thuộc tính CSS

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6 thay thế.

Lưu ý: Thuộc tính

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6 tương đương cho
thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; }
8 chưa được triển khai trong bất kỳ trình duyệt nào. Xem phần Tương thích trình duyệt của ____ 46 cho giá trị
<table> <thead> <tr> <th>Student IDth> <th>Nameth> tr> thead> <tbody> <tr> <th colspan="2">Computer Scienceth> tr> <tr> <td>3741255td> <td>Jones, Marthatd> tr> <tr> <td>4077830td> <td>Pierce, Benjamintd> tr> <tr> <td>5151701td> <td>Kirk, Jamestd> tr> tbody> <tbody> <tr> <th colspan="2">Russian Literatureth> tr> <tr> <td>3971244td> <td>Nim, Victortd> tr> tbody> <tbody> <tr> <th colspan="2">Astrophysicsth> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> tr> <tr> <td>8892377td> <td>Toyota, Hirokotd> tr> tbody> table>
0. The equivalent

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6 property for the

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

8 is not implemented in any browsers yet. See the

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6's browser compatibility section for the

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

0 value.

<table> <thead> <tr> <th>Student IDth> <th>Nameth> tr> thead> <tbody> <tr> <th colspan="2">Computer Scienceth> tr> <tr> <td>3741255td> <td>Jones, Marthatd> tr> <tr> <td>4077830td> <td>Pierce, Benjamintd> tr> <tr> <td>5151701td> <td>Kirk, Jamestd> tr> tbody> <tbody> <tr> <th colspan="2">Russian Literatureth> tr> <tr> <td>3971244td> <td>Nim, Victortd> tr> tbody> <tbody> <tr> <th colspan="2">Astrophysicsth> tr> <tr> <td>4100332td> <td>Petrov, Alexandratd> tr> <tr> <td>8892377td> <td>Toyota, Hirokotd> tr> tbody> table>
1Deprecated Deprecated

Màu nền của bảng. Đây là mã RGB thập lục phân 6 chữ số, được đặt trước bởi một '

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

2'. Một trong những từ khóa màu được xác định trước cũng có thể được sử dụng.

Vì thuộc tính này không được dùng để sử dụng thuộc tính CSS

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

3 thay thế.

thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; }
2Deprecated Deprecated

Thuộc tính này được sử dụng để đặt ký tự để căn chỉnh các ô trong một cột bật. Các giá trị tiêu biểu cho điều này bao gồm một khoảng thời gian (

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

5) khi cố gắng sắp xếp các số hoặc giá trị tiền tệ. Nếu

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

7 không được đặt thành

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

2, thuộc tính này sẽ bị bỏ qua.

thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; }
4Deprecated Deprecated

Thuộc tính này được sử dụng để chỉ ra số lượng ký tự để bù dữ liệu cột từ các ký tự căn chỉnh được chỉ định bởi thuộc tính

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

2.

table { border: 2px solid #555; border-collapse: collapse; font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; } th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; } thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; }
0Deprecated Deprecated

Thuộc tính này chỉ định sự liên kết dọc của văn bản trong mỗi hàng ô của tiêu đề bảng. Các giá trị có thể cho thuộc tính này là:

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

1, sẽ đặt văn bản gần dưới cùng của ô càng tốt, nhưng căn chỉnh nó trên đường cơ sở của các ký tự thay vì dưới cùng của chúng. Nếu các ký tự là tất cả kích thước, thì điều này có tác dụng tương tự như

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

2.

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

2, sẽ đặt văn bản gần dưới cùng của ô càng tốt;

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

4, sẽ tập trung văn bản trong ô;

và

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

5, sẽ đặt văn bản gần với đỉnh của ô càng tốt.

Vì thuộc tính này không được dùng để sử dụng thuộc tính CSS

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6 thay thế.

Ghi chú sử dụng

Nếu bảng bao gồm một khối

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 (để xác định ngữ nghĩa một hàng các tiêu đề cột), khối

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 phải đến sau nó.

Nếu các phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

4 được chỉ định bên ngoài phần tử ____11 hiện có, vì trẻ em trực tiếp của ____10, các phần tử này sẽ được gói gọn bởi một phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 riêng biệt được tạo bởi trình duyệt.

Khi in một tài liệu, các phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 và

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

8 chỉ định thông tin có thể giống nhau hoặc ít nhất là rất giống nhau trên mỗi trang của bảng nhân, trong khi nội dung của phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 thường sẽ khác nhau từ trang này sang trang khác.

Khi một bảng được trình bày trong bối cảnh màn hình (như cửa sổ) không đủ lớn để hiển thị toàn bộ bảng, tác nhân người dùng có thể để người dùng cuộn nội dung của

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7,

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1,

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

8 và

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

2 khác cho cùng một bảng cha mẹ.

Bạn có thể sử dụng nhiều hơn một

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 mỗi bảng miễn là tất cả chúng liên tiếp. Điều này cho phép bạn chia các hàng trong các bảng lớn thành các phần, mỗi phần có thể được định dạng riêng nếu mong muốn. Nếu không được đánh dấu là các yếu tố liên tiếp, các trình duyệt sẽ sửa lỗi tác giả này, đảm bảo bất kỳ phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 và

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

8 nào được hiển thị như các yếu tố đầu tiên và cuối cùng của bảng.

Ví dụ

Dưới đây là một số ví dụ cho thấy việc sử dụng yếu tố

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1. Để biết thêm ví dụ về yếu tố này, hãy xem các ví dụ cho

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

0.

Ví dụ cơ bản

Trong ví dụ tương đối đơn giản này, chúng tôi tạo một bảng chứa thông tin về một nhóm sinh viên có

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 và

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1, với một số hàng trong cơ thể.

HTML

HTML của bảng được hiển thị ở đây. Lưu ý rằng tất cả các tế bào cơ thể bao gồm thông tin về sinh viên được chứa trong một yếu tố

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 duy nhất.

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

CSS

Các CSS để tạo kiểu bảng của chúng tôi được hiển thị tiếp theo.

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

Đầu tiên, các thuộc tính kiểu tổng thể của bảng được đặt, cấu hình độ dày, kiểu dáng và màu sắc của đường viền bên ngoài của bảng và sử dụng HTMLTableElement.tBodies8 để đảm bảo rằng các đường viền được chia sẻ giữa các ô liền kề thay vì mỗi tế bào có biên giới riêng ở giữa. HTMLTableElement.tBodies9 được sử dụng để thiết lập phông chữ ban đầu cho bảng.

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

Sau đó, phong cách được đặt cho phần lớn các ô trong bảng, bao gồm tất cả các ô dữ liệu nhưng cả các phong cách được chia sẻ giữa các ô HTMLCollection0 và HTMLCollection1 của chúng tôi. Các tế bào được cho một đường viền màu xám nhạt là một pixel dày, đệm được điều chỉnh và tất cả các ô được liên kết bên trái bằng cách sử dụng

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

Cuối cùng, các ô tiêu đề có trong phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 được đưa ra kiểu dáng bổ sung. Họ sử dụng một

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

3 tối hơn, kích thước phông chữ lớn hơn và đường viền đáy dày hơn, tối hơn so với các đường viền tế bào khác.

Kết quả

Bảng kết quả trông như thế này:

Nhiều cơ thể

Bạn có thể tạo các nhóm hàng trong một bảng bằng cách sử dụng nhiều phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1. Mỗi hàng có thể có hàng tiêu đề riêng hoặc hàng; Tuy nhiên, chỉ có thể có một

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 mỗi bảng! Do đó, bạn cần sử dụng

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

4 chứa đầy các yếu tố HTMLCollection1 để tạo các tiêu đề trong mỗi

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1. Hãy xem làm thế nào nó được thực hiện.

Chúng ta hãy lấy ví dụ trước, thêm một số sinh viên vào danh sách và cập nhật bảng để thay vì liệt kê các chuyên ngành của mỗi học sinh trên mỗi hàng, các sinh viên được nhóm theo nhóm, với các hàng tiêu đề cho mỗi chuyên ngành.

Kết quả

Bảng kết quả trông như thế này:

HTML

HTML của bảng được hiển thị ở đây. Lưu ý rằng tất cả các tế bào cơ thể bao gồm thông tin về sinh viên được chứa trong một yếu tố

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1 duy nhất.

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

CSS

Các CSS để tạo kiểu bảng của chúng tôi được hiển thị tiếp theo.

CSS

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

Các CSS để tạo kiểu bảng của chúng tôi được hiển thị tiếp theo.

tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}

Đầu tiên, các thuộc tính kiểu tổng thể của bảng được đặt, cấu hình độ dày, kiểu dáng và màu sắc của đường viền bên ngoài của bảng và sử dụng HTMLTableElement.tBodies8 để đảm bảo rằng các đường viền được chia sẻ giữa các ô liền kề thay vì mỗi tế bào có biên giới riêng ở giữa. HTMLTableElement.tBodies9 được sử dụng để thiết lập phông chữ ban đầu cho bảng.

Sau đó, phong cách được đặt cho phần lớn các ô trong bảng, bao gồm tất cả các ô dữ liệu nhưng cả các phong cách được chia sẻ giữa các ô HTMLCollection0 và HTMLCollection1 của chúng tôi. Các tế bào được cho một đường viền màu xám nhạt là một pixel dày, đệm được điều chỉnh và tất cả các ô được liên kết bên trái bằng cách sử dụng

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6

Cuối cùng, các ô tiêu đề có trong phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

7 được đưa ra kiểu dáng bổ sung. Họ sử dụng một

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Scienceth>
    tr>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
    tr>
    <tr>
      <td>4077830td>
      <td>Pierce, Benjamintd>
    tr>
    <tr>
      <td>5151701td>
      <td>Kirk, Jamestd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literatureth>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
    tr>
  tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysicsth>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
    tr>
    <tr>
      <td>8892377td>
      <td>Toyota, Hirokotd>
    tr>
  tbody>
table>

3 tối hơn, kích thước phông chữ lớn hơn và đường viền đáy dày hơn, tối hơn so với các đường viền tế bào khác.
# the-tbody-element

Kết quả

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Các thuộc tính CSS và lớp giả có thể đặc biệt hữu ích để tạo kiểu cho phần tử

<table>
  <thead>
    <tr>
      <th>Student IDth>
      <th>Nameth>
      <th>Majorth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3741255td>
      <td>Jones, Marthatd>
      <td>Computer Sciencetd>
    tr>
    <tr>
      <td>3971244td>
      <td>Nim, Victortd>
      <td>Russian Literaturetd>
    tr>
    <tr>
      <td>4100332td>
      <td>Petrov, Alexandratd>
      <td>Astrophysicstd>
    tr>
  tbody>
table>

1:

lớp giả ____108 để đặt căn chỉnh trên các ô của cột;

thuộc tính

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

6 để sắp xếp tất cả các nội dung ô trên cùng một ký tự, như '.'.

Tbody có phải là một thẻ bảng không?

Thẻ được sử dụng để nhóm nội dung cơ thể trong bảng HTML. Phần tử được sử dụng cùng với các phần tử để chỉ định từng phần của bảng (phần thân, tiêu đề, chân trang). Các trình duyệt có thể sử dụng các yếu tố này để cho phép cuộn thân bàn độc lập với tiêu đề và chân trang.. The

programming javascript Dom create table Tbody id

Hướng dẫn get tbody of table javascript - lấy tbody của bảng javascript

Thí dụ

Định nghĩa và cách sử dụng

Hỗ trợ trình duyệt

Cú pháp

Đặc tính

Phương pháp

Trả về phần tử từ bộ sưu tập với chỉ mục được chỉ định (bắt đầu từ 0).

Lưu ý: Trả về NULL nếu ID không tồn tại

Thí dụ

Thí dụ

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Giá trị

Ví dụ

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Thử nó

Thuộc tính

Thuộc tính không dùng nữa

Ghi chú sử dụng

Ví dụ

Ví dụ cơ bản

HTML

CSS

Kết quả

Nhiều cơ thể

Kết quả

HTML

CSS

Kết quả

Xem thêm

Tbody có phải là một thẻ bảng không?

Một bàn có thể có bao nhiêu tbody?

Có cần thiết phải có TBOD trong mỗi bảng không?

Sự khác biệt giữa bảng và tbody là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội