Phần tử HTML ____10 đại diện cho dữ liệu bảng-nghĩa là thông tin được trình bày trong bảng hai chiều bao gồm các hàng và cột của các ô chứa dữ liệu. Yếu tố này bao gồm các thuộc tính toàn cầu. Thuộc tính được liệt kê này cho biết cách bảng phải được căn chỉnh bên trong tài liệu chứa. Nó có thể có các giá trị sau: Đặt
0 HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
Thử nó
Thuộc tính
Thuộc tính không dùng nữa
1Deprecated DeprecatedSimple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
2: Bảng được hiển thị ở phía bên trái của tài liệu;Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
3: Bảng được hiển thị ở trung tâm của tài liệu;Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
4: Bảng được hiển thị ở phía bên phải của tài liệu.Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
5 và Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
6 thành Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
7 hoặc Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
8 thành Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
9 để đạt được hiệu ứng tương tự như thuộc tính căn chỉnh.Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
0Deprecated DeprecatedMà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 {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
1'. Một trong những từ khóa màu được xác định trước cũng có thể được sử dụng.Để đạt được hiệu ứng tương tự, hãy sử dụng thuộc tính CSS
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
2.table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
3Deprecated
DeprecatedThuộc tính số nguyên này xác định, tính theo pixel, kích thước của khung xung quanh bảng. Nếu được đặt thành 0, thuộc tính
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
4 được đặt thành void.Để đạt được hiệu ứng tương tự, hãy sử dụng thuộc tính tốc ký của CSS
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
3.table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
6Deprecated DeprecatedThuộc tính này xác định không gian giữa nội dung của một ô và đường viền của nó, được hiển thị hay không. Nếu chiều dài của cellpadding được xác định trong pixel, không gian có kích thước pixel này sẽ được áp dụng cho cả bốn mặt của nội dung của ô. Nếu độ dài được xác định bằng cách sử dụng giá trị phần trăm, nội dung sẽ được tập trung và tổng không gian dọc [trên cùng và dưới] sẽ biểu thị giá trị này. Điều tương tự cũng đúng với tổng không gian ngang [trái và phải].
Để đạt được hiệu ứng tương tự, hãy áp dụng thuộc tính
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
7 vào phần tử Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
0, với giá trị của nó được đặt thành sụp đổ và thuộc tính table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
9 cho các phần tử
3
2
1
0.
3
2
1
1Deprecated DeprecatedThuộc tính này xác định kích thước của không gian giữa hai ô trong một giá trị phần trăm hoặc pixel. Thuộc tính được áp dụng cả theo chiều ngang và chiều dọc, đến khoảng cách giữa phần trên của bảng và các ô của hàng đầu tiên, bên trái của bảng và cột đầu tiên, bên phải của bảng và cột cuối cùng và đáy của Bảng và hàng cuối cùng.
Để đạt được hiệu ứng tương tự, hãy áp dụng thuộc tính
3
2
1
2 vào phần tử Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
0.
3
2
1
2 không có bất kỳ ảnh hưởng nào nếu table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
7 được đặt thành sụp đổ.table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
4Deprecated
DeprecatedThuộc tính được liệt kê này xác định phía nào của khung xung quanh bảng phải được hiển thị.
Để đạt được hiệu ứng tương tự, hãy sử dụng các thuộc tính
3
2
1
7 và
3
2
1
8.
3
2
1
9Deprecated DeprecatedThuộc tính được liệt kê này xác định nơi các quy tắc, tức là các dòng, sẽ xuất hiện trong một bảng. Nó có thể có các giá trị sau:
0, chỉ ra rằng sẽ không có quy tắc nào được hiển thị; Đó là giá trị mặc định;HTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
1, sẽ khiến các quy tắc được hiển thị giữa các nhóm hàng [được xác định bởi các phần tửHTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
2,HTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
3 vàHTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
4] và giữa các nhóm cột [được xác định bởi các phần tửHTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
5 vàHTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
6];HTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
7, sẽ khiến các quy tắc được hiển thị giữa các hàng;HTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
8, sẽ khiến các quy tắc được hiển thị giữa các cột;HTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
9, sẽ khiến các quy tắc được hiển thị giữa các hàng và cột.HTMLTableSectionElement.prototype.sort = function [cb] { Array.from[this.rows] .sort[cb] .forEach[[e] => this.appendChild[this.removeChild[e]]]; }; document .querySelector["table"] .tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
Để đạt được hiệu ứng tương tự, hãy áp dụng thuộc tính
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
3 vào các phần tử HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
2, HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
3, HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
4, HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
5 hoặc HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
6 thích hợp.
Numbers
Letters
3
A
2
B
1
C
6Deprecated DeprecatedThuộc tính này xác định một văn bản thay thế tóm tắt nội dung của bảng. Sử dụng phần tử
Numbers
Letters
3
A
2
B
1
C
7 thay thế.
Numbers
Letters
3
A
2
B
1
C
8Deprecated DeprecatedThuộc tính này xác định chiều rộng của bảng. Sử dụng thuộc tính CSS
Numbers
Letters
3
A
2
B
1
C
8 thay thế.Ví dụ
Bảng đơn giản
John
Doe
Jane
Doe
Ví dụ đơn giản hơn nữa
Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
Phân loại bảng
Sắp xếp các hàng bảng
Không có phương thức gốc để sắp xếp các hàng [các phần tử
const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
0] của bảng HTML. Nhưng sử dụng const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
1, const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
2, const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
3 và const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
4, bạn có thể thực hiện chức năng const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
5 của riêng mình để sắp xếp const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
6 của các yếu tố const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
0.Trong ví dụ dưới đây, bạn có thể thấy một ví dụ như vậy. Chúng tôi đang gắn nó vào phần tử để nó sắp xếp các ô bảng theo thứ tự tăng giá trị và cập nhật màn hình cho phù hợp.
3
2
1
JavaScriptHTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
Kết quảSắp xếp các hàng bằng một cú nhấp chuột vào phần tử th
Ví dụ sau đây thêm một trình xử lý sự kiện vào mỗi yếu tố
const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
8 của mỗi Simple table with header
First name
Last name
John
Doe
Jane
Doe
Table with thead, tfoot, and tbody
Header content 1
Header content 2
Body content 1
Body content 2
Footer content 1
Footer content 2
Table with colgroup
Countries
Capitals
Population
Language
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
Table with colgroup and col
Lime
Lemon
Orange
Green
Yellow
Orange
Simple table with caption
Awesome caption
Awesome data
0 trong
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
0; Nó sắp xếp tất cả các hàng của ____ 43, dựa trên việc sắp xếp trên các ô
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
2 có trong các hàng.Lưu ý: Giải pháp này giả định rằng các yếu tố
0 được điền bởi văn bản thô không có phần tử hậu duệ. This solution assumes that the
3
2
1
3
2
1
0 elements are populated by raw text with no descendant elements.HTML
Numbers
Letters
3
A
2
B
1
C
JavaScriptconst allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
Kết quảHiển thị các bảng lớn trong không gian nhỏ
Một vấn đề phổ biến với các bảng trên web là chúng không hoạt động rất tốt trên các màn hình nhỏ khi lượng nội dung lớn và cách làm cho chúng có thể cuộn được không rõ ràng, đặc biệt là khi đánh dấu có thể đến từ CDN và không thể được sửa đổi để có một trình bao bọc.
Ví dụ này cung cấp một cách để hiển thị các bảng trong không gian nhỏ. Chúng tôi đã ẩn nội dung HTML vì nó rất lớn và không có gì đáng chú ý về nó. CSS hữu ích hơn để kiểm tra trong ví dụ này.
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
Khi nhìn vào các kiểu này, bạn sẽ nhận thấy rằng thuộc tính ____74 của bảng đã được đặt thành
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
5. Mặc dù điều này cho phép cuộn, bảng mất một số tính toàn vẹn của nó và các ô bảng cố gắng trở nên nhỏ nhất có thể. Để giảm thiểu vấn đề này, chúng tôi đã đặt
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
6 thành
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
7 trên HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
3. Tuy nhiên, chúng tôi không làm điều này cho HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
2 để tránh các tiêu đề dài buộc các cột phải rộng hơn chúng cần phải hiển thị dữ liệu.Để giữ các tiêu đề bảng trên trang trong khi cuộn xuống, chúng tôi đã đặt
table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
0 thành các yếu tố const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
8. Lưu ý rằng chúng tôi chưa đặt table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
7 thành table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
3, vì chúng tôi thực hiện tiêu đề không thể tách chính xác khỏi phần còn lại của bảng.not set table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
7 to table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
3, as if we do the header cannot be separated
correctly from the rest of the table.table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
Kết quả
Hiển thị các bảng lớn trong không gian nhỏ
Một vấn đề phổ biến với các bảng trên web là chúng không hoạt động rất tốt trên các màn hình nhỏ khi lượng nội dung lớn và cách làm cho chúng có thể cuộn được không rõ ràng, đặc biệt là khi đánh dấu có thể đến từ CDN và không thể được sửa đổi để có một trình bao bọc.
Ví dụ này cung cấp một cách để hiển thị các bảng trong không gian nhỏ. Chúng tôi đã ẩn nội dung HTML vì nó rất lớn và không có gì đáng chú ý về nó. CSS hữu ích hơn để kiểm tra trong ví dụ này.
Khi nhìn vào các kiểu này, bạn sẽ nhận thấy rằng thuộc tính ____74 của bảng đã được đặt thành
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
5. Mặc dù điều này cho phép cuộn, bảng mất một số tính toàn vẹn của nó và các ô bảng cố gắng trở nên nhỏ nhất có thể. Để giảm thiểu vấn đề này, chúng tôi đã đặt
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
6 thành
13 equals:
23 equals:
33 equals:
43 equals:
53 equals:
63 equals:
73 equals:
row 1: 1
row 1: 8
row 1: 27
row 1: 64
row 1: 125
row 1: 216
row 1: 343
row 2: 1
row 2: 8
row 2: 27
row 2: 64
row 2: 125
row 2: 216
row 2: 343
row 3: 1
row 3: 8
row 3: 27
row 3: 64
row 3: 125
row 3: 216
row 3: 343
row 4: 1
row 4: 8
row 4: 27
row 4: 64
row 4: 125
row 4: 216
row 4: 343
row 5: 1
row 5: 8
row 5: 27
row 5: 64
row 5: 125
row 5: 216
row 5: 343
row 6: 1
row 6: 8
row 6: 27
row 6: 64
row 6: 125
row 6: 216
row 6: 343
row 7: 1
row 7: 8
row 7: 27
row 7: 64
row 7: 125
row 7: 216
row 7: 343
row 8: 1
row 8: 8
row 8: 27
row 8: 64
row 8: 125
row 8: 216
row 8: 343
row 9: 1
row 9: 8
row 9: 27
row 9: 64
row 9: 125
row 9: 216
row 9: 343
row 10: 1
row 10: 8
row 10: 27
row 10: 64
row 10: 125
row 10: 216
row 10: 343
row 11: 1
row 11: 8
row 11: 27
row 11: 64
row 11: 125
row 11: 216
row 11: 343
row 12: 1
row 12: 8
row 12: 27
row 12: 64
row 12: 125
row 12: 216
row 12: 343
row 13: 1
row 13: 8
row 13: 27
row 13: 64
row 13: 125
row 13: 216
row 13: 343
row 14: 1
row 14: 8
row 14: 27
row 14: 64
row 14: 125
row 14: 216
row 14: 343
row 15: 1
row 15: 8
row 15: 27
row 15: 64
row 15: 125
row 15: 216
row 15: 343
row 16: 1
row 16: 8
row 16: 27
row 16: 64
row 16: 125
row 16: 216
row 16: 343
row 17: 1
row 17: 8
row 17: 27
row 17: 64
row 17: 125
row 17: 216
row 17: 343
row 18: 1
row 18: 8
row 18: 27
row 18: 64
row 18: 125
row 18: 216
row 18: 343
row 19: 1
row 19: 8
row 19: 27
row 19: 64
row 19: 125
row 19: 216
row 19: 343
row 20: 1
row 20: 8
row 20: 27
row 20: 64
row 20: 125
row 20: 216
row 20: 343
7 trên HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
3. Tuy nhiên, chúng tôi không làm điều này cho HTMLTableSectionElement.prototype.sort = function [cb] {
Array.from[this.rows]
.sort[cb]
.forEach[[e] => this.appendChild[this.removeChild[e]]];
};
document
.querySelector["table"]
.tBodies[0].sort[[a, b] => a.textContent.localeCompare[b.textContent]];
2 để tránh các tiêu đề dài buộc các cột phải rộng hơn chúng cần phải hiển thị dữ liệu.- Để giữ các tiêu đề bảng trên trang trong khi cuộn xuống, chúng tôi đã đặt
0 thành các yếu tốtable, th, td { border: 1px solid; } table { width: 100%; max-width: 400px; height: 240px; margin: 0 auto; display: block; overflow-x: auto; border-spacing: 0; } tbody { white-space: nowrap; } th, td { padding: 5px 10px; border-top-width: 0; border-left-width: 0; } th { position: sticky; top: 0; background: #fff; vertical-align: bottom; } th:last-child, td:last-child { border-right-width: 0; } tr:last-child td { border-bottom-width: 0; }
8. Lưu ý rằng chúng tôi chưa đặtconst allTables = document.querySelectorAll["table"]; for [const table of allTables] { const tBody = table.tBodies[0]; const rows = Array.from[tBody.rows]; const headerCells = table.tHead.rows[0].cells; for [const th of headerCells] { const cellIndex = th.cellIndex; th.addEventListener["click", [] => { rows.sort[[tr1, tr2] => { const tr1Text = tr1.cells[cellIndex].textContent; const tr2Text = tr2.cells[cellIndex].textContent; return tr1Text.localeCompare[tr2Text]; }]; tBody.append[...rows]; }]; } }
7 thànhtable { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; border: 1px solid black; }
3, vì chúng tôi thực hiện tiêu đề không thể tách chính xác khỏi phần còn lại của bảng.table, th, td { border: 1px solid; } table { width: 100%; max-width: 400px; height: 240px; margin: 0 auto; display: block; overflow-x: auto; border-spacing: 0; } tbody { white-space: nowrap; } th, td { padding: 5px 10px; border-top-width: 0; border-left-width: 0; } th { position: sticky; top: 0; background: #fff; vertical-align: bottom; } th:last-child, td:last-child { border-right-width: 0; } tr:last-child td { border-bottom-width: 0; }
- Mối quan tâm tiếp cận
Chú thích
Bằng cách cung cấp một yếu tố
Numbers
Letters
3
A
2
B
1
C
7 có giá trị mô tả rõ ràng và chính xác mục đích của bảng, nó giúp mọi người quyết định xem họ có cần đọc phần còn lại của nội dung bảng hay bỏ qua nó không.Điều này giúp mọi người điều hướng với sự trợ giúp của công nghệ hỗ trợ như người đọc màn hình, những người trải qua điều kiện tầm nhìn thấp và những người có mối quan tâm nhận thức.
Color names and values
Name
HEX
HSLa
RGBa
Teal
#51F6F6
hsla[180, 90%, 64%, 1]
rgba[81, 246, 246, 1]
Goldenrod
#F6BC57
hsla[38, 90%, 65%, 1]
rgba[246, 188, 87, 1]
Mdn thêm chú thích vào bảng của bạn với
- Chú thích & Tóm tắt • Bảng • Hướng dẫn truy cập web W3C WAI
- Các hàng và cột phạm vi
- Thuộc tính
5 trên các phần tử tiêu đề là dự phòng trong các bối cảnh đơn giản, bởi vì phạm vi được suy ra. Tuy nhiên, một số công nghệ hỗ trợ có thể không rút ra các suy luận chính xác, do đó chỉ định phạm vi tiêu đề có thể cải thiện trải nghiệm người dùng. Trong các bảng phức tạp, phạm vi có thể được chỉ định để cung cấp thông tin cần thiết về các ô liên quan đến tiêu đề.table, th, td { border: 1px solid; } table { width: 100%; max-width: 400px; height: 240px; margin: 0 auto; display: block; overflow-x: auto; border-spacing: 0; } tbody { white-space: nowrap; } th, td { padding: 5px 10px; border-top-width: 0; border-left-width: 0; } th { position: sticky; top: 0; background: #fff; vertical-align: bottom; } th:last-child, td:last-child { border-right-width: 0; } tr:last-child td { border-bottom-width: 0; }
- Thí dụ
Cung cấp khai báo table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
6 trên phần tử const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
8 sẽ giúp mô tả rằng ô ở đầu cột. Cung cấp một tuyên bố table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
8 trên phần tử const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
8 sẽ giúp mô tả rằng ô là lần đầu tiên liên tiếp.
table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
table,
th,
td {
border: 1px solid;
}
table {
width: 100%;
max-width: 400px;
height: 240px;
margin: 0 auto;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
border-top-width: 0;
border-left-width: 0;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical-align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
const allTables = document.querySelectorAll["table"];
for [const table of allTables] {
const tBody = table.tBodies[0];
const rows = Array.from[tBody.rows];
const headerCells = table.tHead.rows[0].cells;
for [const th of headerCells] {
const cellIndex = th.cellIndex;
th.addEventListener["click", [] => {
rows.sort[[tr1, tr2] => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare[tr2Text];
}];
tBody.append[...rows];
}];
}
}
Bảng MDN cho người dùng khiếm thị
Các bảng có hai tiêu đề • Bảng • Hướng dẫn truy cập web W3C WAI
Các bảng có tiêu đề không đều • Bảng • Hướng dẫn truy cập web W3C WAI
- Chú thích & Tóm tắt • Bảng • Hướng dẫn truy cập web W3C WAI
- Các hàng và cột phạm vi
- Thuộc tính
5 trên các phần tử tiêu đề là dự phòng trong các bối cảnh đơn giản, bởi vì phạm vi được suy ra. Tuy nhiên, một số công nghệ hỗ trợ có thể không rút ra các suy luận chính xác, do đó chỉ định phạm vi tiêu đề có thể cải thiện trải nghiệm người dùng. Trong các bảng phức tạp, phạm vi có thể được chỉ định để cung cấp thông tin cần thiết về các ô liên quan đến tiêu đề.table, th, td { border: 1px solid; } table { width: 100%; max-width: 400px; height: 240px; margin: 0 auto; display: block; overflow-x: auto; border-spacing: 0; } tbody { white-space: nowrap; } th, td { padding: 5px 10px; border-top-width: 0; border-left-width: 0; } th { position: sticky; top: 0; background: #fff; vertical-align: bottom; } th:last-child, td:last-child { border-right-width: 0; } tr:last-child td { border-bottom-width: 0; }
Thí dụ
Bảng MDN cho người dùng khiếm thị # the-table-element |
Các bảng có hai tiêu đề • Bảng • Hướng dẫn truy cập web W3C WAI
Các bảng có tiêu đề không đều • Bảng • Hướng dẫn truy cập web W3C WAI
H63: Sử dụng thuộc tính phạm vi để liên kết các ô tiêu đề và ô dữ liệu trong bảng dữ liệu | Kỹ thuật W3C cho WCAG 2.0
- Bảng phức tạp
- Công nghệ hỗ trợ như đầu đọc màn hình có thể gặp khó khăn trong các bảng phân tích cú pháp phức tạp đến mức các ô tiêu đề không thể được liên kết theo cách ngang hoặc dọc. Điều này thường được biểu thị bằng sự hiện diện của các thuộc tính
0 vàColor names and values Name HEX HSLa RGBa Teal #51F6F6 hsla[180, 90%, 64%, 1] rgba[81, 246, 246, 1] Goldenrod #F6BC57 hsla[38, 90%, 65%, 1] rgba[246, 188, 87, 1]
1.Color names and values Name HEX HSLa RGBa Teal #51F6F6 hsla[180, 90%, 64%, 1] rgba[81, 246, 246, 1] Goldenrod #F6BC57 hsla[38, 90%, 65%, 1] rgba[246, 188, 87, 1]
- Lý tưởng nhất, hãy xem xét các cách thay thế để trình bày nội dung của bảng, bao gồm chia nó thành một tập hợp các bảng nhỏ hơn, liên quan không phải dựa vào việc sử dụng các thuộc tính
0 vàColor names and values Name HEX HSLa RGBa Teal #51F6F6 hsla[180, 90%, 64%, 1] rgba[81, 246, 246, 1] Goldenrod #F6BC57 hsla[38, 90%, 65%, 1] rgba[246, 188, 87, 1]
1. Ngoài việc giúp những người sử dụng công nghệ hỗ trợ hiểu nội dung của bảng, điều này cũng có thể mang lại lợi ích cho những người có mối quan tâm nhận thức, những người có thể gặp khó khăn trong việc hiểu các hiệp hội mà bố cục bảng đang mô tả.Color names and values Name HEX HSLa RGBa Teal #51F6F6 hsla[180, 90%, 64%, 1] rgba[81, 246, 246, 1] Goldenrod #F6BC57 hsla[38, 90%, 65%, 1] rgba[246, 188, 87, 1]
- Nếu bảng không thể bị phá vỡ, hãy sử dụng kết hợp các thuộc tính
4 vàColor names and values Name HEX HSLa RGBa Teal #51F6F6 hsla[180, 90%, 64%, 1] rgba[81, 246, 246, 1] Goldenrod #F6BC57 hsla[38, 90%, 65%, 1] rgba[246, 188, 87, 1]
5 để liên kết lập trình từng ô bảng với [các] tiêu đề mà ô được liên kết với.Color names and values Name HEX HSLa RGBa Teal #51F6F6 hsla[180, 90%, 64%, 1] rgba[81, 246, 246, 1] Goldenrod #F6BC57 hsla[38, 90%, 65%, 1] rgba[246, 188, 87, 1]
- Các bảng có tiêu đề đa cấp • Bảng • Hướng dẫn truy cập web W3C WAI
- H43: Sử dụng các thuộc tính ID và tiêu đề để liên kết các ô dữ liệu với các ô tiêu đề trong bảng dữ liệu | Kỹ thuật cho W3C WCAG 2.0
- Lý tưởng nhất, hãy xem xét các cách thay thế để trình bày nội dung của bảng, bao gồm chia nó thành một tập hợp các bảng nhỏ hơn, liên quan không phải dựa vào việc sử dụng các thuộc tính