Hướng dẫn which of the following elements can be used in html to create a table? - Phần tử nào sau đây có thể được sử dụng trong html để tạo bảng?

Thử nó

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

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

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:

• <p>Simple table with headerp>
  <table>
    <tr>
      <th>First nameth>
      <th>Last nameth>
    tr>
    <tr>
      <td>Johntd>
      <td>Doetd>
    tr>
    <tr>
      <td>Janetd>
      <td>Doetd>
    tr>
  table>
  
  <p>Table with thead, tfoot, and tbodyp>
  <table>
    <thead>
      <tr>
        <th>Header content 1th>
        <th>Header content 2th>
      tr>
    thead>
    <tbody>
      <tr>
        <td>Body content 1td>
        <td>Body content 2td>
      tr>
    tbody>
    <tfoot>
      <tr>
        <td>Footer content 1td>
        <td>Footer content 2td>
      tr>
    tfoot>
  table>
  
  <p>Table with colgroupp>
  <table>
    <colgroup span="4">colgroup>
    <tr>
      <th>Countriesth>
      <th>Capitalsth>
      <th>Populationth>
      <th>Languageth>
    tr>
    <tr>
      <td>USAtd>
      <td>Washington, D.C.td>
      <td>309 milliontd>
      <td>Englishtd>
    tr>
    <tr>
      <td>Swedentd>
      <td>Stockholmtd>
      <td>9 milliontd>
      <td>Swedishtd>
    tr>
  table>
  
  <p>Table with colgroup and colp>
  <table>
    <colgroup>
      <col style="background-color: #0f0" />
      <col span="2" />
    colgroup>
    <tr>
      <th>Limeth>
      <th>Lemonth>
      <th>Orangeth>
    tr>
    <tr>
      <td>Greentd>
      <td>Yellowtd>
      <td>Orangetd>
    tr>
  table>
  
  <p>Simple table with captionp>
  <table>
    <caption>
      Awesome caption
    caption>
    <tr>
      <td>Awesome datatd>
    tr>
  table>
  

  2: Bảng được hiển thị ở phía bên trái của tài liệu;

• <p>Simple table with headerp>
  <table>
    <tr>
      <th>First nameth>
      <th>Last nameth>
    tr>
    <tr>
      <td>Johntd>
      <td>Doetd>
    tr>
    <tr>
      <td>Janetd>
      <td>Doetd>
    tr>
  table>
  
  <p>Table with thead, tfoot, and tbodyp>
  <table>
    <thead>
      <tr>
        <th>Header content 1th>
        <th>Header content 2th>
      tr>
    thead>
    <tbody>
      <tr>
        <td>Body content 1td>
        <td>Body content 2td>
      tr>
    tbody>
    <tfoot>
      <tr>
        <td>Footer content 1td>
        <td>Footer content 2td>
      tr>
    tfoot>
  table>
  
  <p>Table with colgroupp>
  <table>
    <colgroup span="4">colgroup>
    <tr>
      <th>Countriesth>
      <th>Capitalsth>
      <th>Populationth>
      <th>Languageth>
    tr>
    <tr>
      <td>USAtd>
      <td>Washington, D.C.td>
      <td>309 milliontd>
      <td>Englishtd>
    tr>
    <tr>
      <td>Swedentd>
      <td>Stockholmtd>
      <td>9 milliontd>
      <td>Swedishtd>
    tr>
  table>
  
  <p>Table with colgroup and colp>
  <table>
    <colgroup>
      <col style="background-color: #0f0" />
      <col span="2" />
    colgroup>
    <tr>
      <th>Limeth>
      <th>Lemonth>
      <th>Orangeth>
    tr>
    <tr>
      <td>Greentd>
      <td>Yellowtd>
      <td>Orangetd>
    tr>
  table>
  
  <p>Simple table with captionp>
  <table>
    <caption>
      Awesome caption
    caption>
    <tr>
      <td>Awesome datatd>
    tr>
  table>
  

  3: Bảng được hiển thị ở trung tâm của tài liệu;

• <p>Simple table with headerp>
  <table>
    <tr>
      <th>First nameth>
      <th>Last nameth>
    tr>
    <tr>
      <td>Johntd>
      <td>Doetd>
    tr>
    <tr>
      <td>Janetd>
      <td>Doetd>
    tr>
  table>
  
  <p>Table with thead, tfoot, and tbodyp>
  <table>
    <thead>
      <tr>
        <th>Header content 1th>
        <th>Header content 2th>
      tr>
    thead>
    <tbody>
      <tr>
        <td>Body content 1td>
        <td>Body content 2td>
      tr>
    tbody>
    <tfoot>
      <tr>
        <td>Footer content 1td>
        <td>Footer content 2td>
      tr>
    tfoot>
  table>
  
  <p>Table with colgroupp>
  <table>
    <colgroup span="4">colgroup>
    <tr>
      <th>Countriesth>
      <th>Capitalsth>
      <th>Populationth>
      <th>Languageth>
    tr>
    <tr>
      <td>USAtd>
      <td>Washington, D.C.td>
      <td>309 milliontd>
      <td>Englishtd>
    tr>
    <tr>
      <td>Swedentd>
      <td>Stockholmtd>
      <td>9 milliontd>
      <td>Swedishtd>
    tr>
  table>
  
  <p>Table with colgroup and colp>
  <table>
    <colgroup>
      <col style="background-color: #0f0" />
      <col span="2" />
    colgroup>
    <tr>
      <th>Limeth>
      <th>Lemonth>
      <th>Orangeth>
    tr>
    <tr>
      <td>Greentd>
      <td>Yellowtd>
      <td>Orangetd>
    tr>
  table>
  
  <p>Simple table with captionp>
  <table>
    <caption>
      Awesome caption
    caption>
    <tr>
      <td>Awesome datatd>
    tr>
  table>
  

  4: Bảng được hiển thị ở phía bên phải của tài liệu.

Đặt

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

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 {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

Để đạ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;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

Thuộ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;
}

Để đạ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;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

Thuộ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;
}

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

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

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

<p>Simple table with headerp>
<table>
  <tr>
    <th>First nameth>
    <th>Last nameth>
  tr>
  <tr>
    <td>Johntd>
    <td>Doetd>
  tr>
  <tr>
    <td>Janetd>
    <td>Doetd>
  tr>
table>

<p>Table with thead, tfoot, and tbodyp>
<table>
  <thead>
    <tr>
      <th>Header content 1th>
      <th>Header content 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Body content 1td>
      <td>Body content 2td>
    tr>
  tbody>
  <tfoot>
    <tr>
      <td>Footer content 1td>
      <td>Footer content 2td>
    tr>
  tfoot>
table>

<p>Table with colgroupp>
<table>
  <colgroup span="4">colgroup>
  <tr>
    <th>Countriesth>
    <th>Capitalsth>
    <th>Populationth>
    <th>Languageth>
  tr>
  <tr>
    <td>USAtd>
    <td>Washington, D.C.td>
    <td>309 milliontd>
    <td>Englishtd>
  tr>
  <tr>
    <td>Swedentd>
    <td>Stockholmtd>
    <td>9 milliontd>
    <td>Swedishtd>
  tr>
table>

<p>Table with colgroup and colp>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  colgroup>
  <tr>
    <th>Limeth>
    <th>Lemonth>
    <th>Orangeth>
  tr>
  <tr>
    <td>Greentd>
    <td>Yellowtd>
    <td>Orangetd>
  tr>
table>

<p>Simple table with captionp>
<table>
  <caption>
    Awesome caption
  caption>
  <tr>
    <td>Awesome datatd>
  tr>
table>

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}

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

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

<table>
  <tbody>
    <tr>
      <td>3td>
    tr>
    <tr>
      <td>2td>
    tr>
    <tr>
      <td>1td>
    tr>
  tbody>
table>

Thuộ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:

• 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));
  

  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.

Để đạ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;
}

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

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

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

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

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

<table>
  <thead>
    <tr>
      <th>Numbersth>
      <th>Lettersth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3td>
      <td>Atd>
    tr>
    <tr>
      <td>2td>
      <td>Btd>
    tr>
    <tr>
      <td>1td>
      <td>Ctd>
    tr>
  tbody>
table>

Thuộ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ử

<table>
  <thead>
    <tr>
      <th>Numbersth>
      <th>Lettersth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>3td>
      <td>Atd>
    tr>
    <tr>
      <td>2td>
      <td>Btd>
    tr>
    <tr>
      <td>1td>
      <td>Ctd>
    tr>
  tbody>
table>