Bảng html nhiều hàng tiêu đề

Question

. Phần tử Table Row. Phần tử HTML

Thẻ nào thêm tiêu đề hàng mới vào bảng HTML?

Thẻ

Tôi không tin rằng điều này có thể vượt trội với EditableTable. Và vì nhiều tiêu đề cũng không phải là HTML hợp lệ, tôi nghĩ cách tốt nhất của bạn là tắt hàng đầu tiên và sử dụng CSS để làm cho nó trông giống như một tiêu đề.

Nội dung chính Show

Adding a caption to your table with
học tích cực. Thêm chú thích
Adding structure with , , and
học tích cực. Thêm cấu trúc bảng
bàn làm tổ
Bàn dành cho người khiếm thị
Sử dụng tiêu đề cột và hàng
thuộc tính phạm vi
Thuộc tính id và tiêu đề
học tích cực. chơi với phạm vi và tiêu đề
Bản tóm tắt
Một bảng HTML có thể có nhiều hàng tiêu đề không?
Một bảng có thể có nhiều tiêu đề không?
Thẻ HTML để tạo nhiều hàng trong một bảng phải là gì?
Thẻ nào thêm tiêu đề hàng mới vào bảng HTML?

Bạn có thể sử dụng. lớp giả đầu tiên chỉ ảnh hưởng đến hàng đầu tiên của bảng cho phần bố cục, sau đó bên trong tiện ích EditableTable, bạn có thể làm cho nó thay vì có đầu vào, bạn sẽ hiển thị Biểu thức với các giá trị của mình

Trong bài viết thứ hai của mô-đun này, chúng ta xem xét một số tính năng nâng cao hơn của bảng HTML — chẳng hạn như chú thích/tóm tắt và nhóm các hàng của bạn thành các phần đầu bảng, nội dung và chân trang — cũng như xem xét khả năng truy cập bảng dành cho người dùng khiếm thị

điều kiện tiên quyết. Khái niệm cơ bản về HTML (xem Giới thiệu về HTML). Khách quan. Để tìm hiểu về các tính năng bảng HTML nâng cao hơn và khả năng truy cập của bảng

Adding a caption to your table with

Bạn có thể đặt chú thích cho bảng của mình bằng cách đặt chú thích đó bên trong phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

0 và lồng chú thích đó bên trong phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

1. Bạn nên đặt nó ngay bên dưới thẻ mở đầu

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

1

<table>
  <caption>
    Dinosaurs in the Jurassic period
  caption>

  …
table>

Như bạn có thể suy ra từ ví dụ ngắn gọn ở trên, chú thích có nghĩa là chứa mô tả về nội dung của bảng. Điều này hữu ích cho tất cả những người đọc muốn biết nhanh liệu bảng có hữu ích với họ khi họ quét trang hay không, nhưng đặc biệt đối với người dùng khiếm thị. Thay vì yêu cầu trình đọc màn hình đọc to nội dung của nhiều ô chỉ để tìm hiểu nội dung của bảng, người dùng có thể dựa vào chú thích và sau đó quyết định có đọc bảng chi tiết hơn hay không

Chú thích được đặt ngay bên dưới thẻ

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

1

Ghi chú. Thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

2 cũng có thể được sử dụng trên phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

1 để cung cấp mô tả — phần này cũng được trình đọc màn hình đọc ra. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

0 vì

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

2 không được dùng nữa và người dùng sáng mắt không thể đọc được (phần tử này không xuất hiện trên trang)

học tích cực. Thêm chú thích

Hãy thử làm điều này, xem lại một ví dụ mà chúng ta đã gặp lần đầu trong bài viết trước

Mở thời khóa biểu ở trường của giáo viên ngôn ngữ của bạn từ cuối Thông tin cơ bản về bảng HTML hoặc tạo một bản sao cục bộ của thời khóa biểu cố định của chúng tôi. tệp html
Thêm chú thích phù hợp cho bảng
Lưu mã của bạn và mở nó trong trình duyệt để xem nó trông như thế nào

Ghi chú. Bạn có thể tìm thấy phiên bản của chúng tôi trên GitHub — xem thời gian biểu-chú thích. html (cũng xem trực tiếp)

Adding structure with , , and

Khi các bảng của bạn có cấu trúc phức tạp hơn một chút, sẽ rất hữu ích nếu bạn cung cấp thêm định nghĩa về cấu trúc cho chúng. Một cách rõ ràng để làm điều này là sử dụng

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

6,

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

7 và

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

8, cho phép bạn đánh dấu phần đầu trang, chân trang và nội dung cho bảng

Những phần tử này không làm cho bảng dễ truy cập hơn đối với người dùng trình đọc màn hình và không dẫn đến bất kỳ cải thiện hình ảnh nào của riêng chúng. Tuy nhiên, chúng rất hữu ích cho việc tạo kiểu dáng và bố cục — đóng vai trò là móc hữu ích để thêm CSS vào bảng của bạn. Để cung cấp cho bạn một số ví dụ thú vị, trong trường hợp bảng dài, bạn có thể làm cho đầu trang và chân trang của bảng lặp lại trên mọi trang được in và bạn có thể làm cho phần thân của bảng hiển thị trên một trang và có sẵn nội dung bằng cách cuộn lên và xuống

Để sử dụng chúng

Phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

6 phải bọc một phần của bảng là tiêu đề — đây thường là hàng đầu tiên chứa tiêu đề cột, nhưng điều này không nhất thiết phải luôn luôn như vậy. Nếu bạn đang sử dụng phần tử

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My spending recordtitle>
    <style>
      html {
        font-family: sans-serif;
      }

      table {
        border-collapse: collapse;
        border: 4px solid rgb(200, 200, 200);
        letter-spacing: 1px;
        font-size: 0.8rem;
      }

      td,
      th {
        border: 2px solid rgb(190, 190, 190);
        padding: 10px 20px;
      }

      th {
        background-color: rgb(235, 235, 235);
      }

      td {
        text-align: center;
      }

      tr:nth-child(even) td {
        background-color: rgb(250, 250, 250);
      }

      tr:nth-child(odd) td {
        background-color: rgb(245, 245, 245);
      }

      caption {
        padding: 10px;
      }

      tbody {
        font-size: 90%;
        font-style: italic;
      }

      tfoot {
        font-weight: bold;
      }
    style>
  head>
  <body>
    <table>
      <caption>
        How I chose to spend my money
      caption>
      <thead>
        <tr>
          <th>Purchaseth>
          <th>Locationth>
          <th>Dateth>
          <th>Evaluationth>
          <th>Cost (€)th>
        tr>
      thead>
      <tfoot>
        <tr>
          <td colspan="4">SUMtd>
          <td>118td>
        tr>
      tfoot>
      <tbody>
        <tr>
          <td>Haircuttd>
          <td>Hairdressertd>
          <td>12/09td>
          <td>Great ideatd>
          <td>30td>
        tr>
        <tr>
          <td>Lasagnatd>
          <td>Restauranttd>
          <td>12/09td>
          <td>Regretstd>
          <td>18td>
        tr>
        <tr>
          <td>Shoestd>
          <td>Shoeshoptd>
          <td>13/09td>
          <td>Big regretstd>
          <td>65td>
        tr>
        <tr>
          <td>Toothpastetd>
          <td>Supermarkettd>
          <td>13/09td>
          <td>Goodtd>
          <td>5td>
        tr>
      tbody>
    table>
  body>
html>

0/

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My spending recordtitle>
    <style>
      html {
        font-family: sans-serif;
      }

      table {
        border-collapse: collapse;
        border: 4px solid rgb(200, 200, 200);
        letter-spacing: 1px;
        font-size: 0.8rem;
      }

      td,
      th {
        border: 2px solid rgb(190, 190, 190);
        padding: 10px 20px;
      }

      th {
        background-color: rgb(235, 235, 235);
      }

      td {
        text-align: center;
      }

      tr:nth-child(even) td {
        background-color: rgb(250, 250, 250);
      }

      tr:nth-child(odd) td {
        background-color: rgb(245, 245, 245);
      }

      caption {
        padding: 10px;
      }

      tbody {
        font-size: 90%;
        font-style: italic;
      }

      tfoot {
        font-weight: bold;
      }
    style>
  head>
  <body>
    <table>
      <caption>
        How I chose to spend my money
      caption>
      <thead>
        <tr>
          <th>Purchaseth>
          <th>Locationth>
          <th>Dateth>
          <th>Evaluationth>
          <th>Cost (€)th>
        tr>
      thead>
      <tfoot>
        <tr>
          <td colspan="4">SUMtd>
          <td>118td>
        tr>
      tfoot>
      <tbody>
        <tr>
          <td>Haircuttd>
          <td>Hairdressertd>
          <td>12/09td>
          <td>Great ideatd>
          <td>30td>
        tr>
        <tr>
          <td>Lasagnatd>
          <td>Restauranttd>
          <td>12/09td>
          <td>Regretstd>
          <td>18td>
        tr>
        <tr>
          <td>Shoestd>
          <td>Shoeshoptd>
          <td>13/09td>
          <td>Big regretstd>
          <td>65td>
        tr>
        <tr>
          <td>Toothpastetd>
          <td>Supermarkettd>
          <td>13/09td>
          <td>Goodtd>
          <td>5td>
        tr>
      tbody>
    table>
  body>
html>

1, tiêu đề bảng sẽ nằm ngay bên dưới phần tử đó.

Phần tử
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```
7 cần bao bọc một phần của bảng là chân trang - ví dụ: đây có thể là hàng cuối cùng với các mục trong các hàng trước được cộng lại. Bạn có thể bao gồm chân trang của bảng ngay ở cuối bảng như bạn muốn hoặc ngay bên dưới tiêu đề bảng (trình duyệt sẽ vẫn hiển thị nó ở cuối bảng)
Phần tử
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```
8 cần bọc các phần khác của nội dung bảng không có trong đầu trang hoặc chân trang của bảng. Nó sẽ xuất hiện bên dưới tiêu đề bảng hoặc đôi khi là chân trang, tùy thuộc vào cách bạn quyết định cấu trúc nó

Ghi chú.

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

8 luôn được bao gồm trong mọi bảng, mặc nhiên nếu bạn không chỉ định nó trong mã của mình. Để kiểm tra điều này, hãy mở một trong những ví dụ trước của bạn không bao gồm

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

8 và xem mã HTML trong công cụ dành cho nhà phát triển trình duyệt của bạn — bạn sẽ thấy rằng trình duyệt đã thêm thẻ này cho bạn. Bạn có thể thắc mắc tại sao bạn phải bận tâm bao gồm cả nó — bạn nên làm thế, bởi vì nó cho phép bạn kiểm soát nhiều hơn đối với cấu trúc và kiểu dáng bảng của mình

học tích cực. Thêm cấu trúc bảng

Hãy đưa những yếu tố mới này vào hoạt động

Trước hết, tạo một bản sao hồ sơ chi tiêu tại địa phương. html và bảng tối thiểu. css trong một thư mục mới
Hãy thử mở nó trong một trình duyệt — Bạn sẽ thấy nó trông ổn, nhưng nó có thể được cải thiện. Hàng "SUM" chứa tổng số tiền đã chi dường như nằm sai vị trí và có một số chi tiết bị thiếu trong mã

Đặt hàng tiêu đề rõ ràng bên trong phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

6, hàng "SUM" bên trong phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

7 và phần còn lại của nội dung bên trong phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

8

Lưu và làm mới, bạn sẽ thấy rằng việc thêm phần tử
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```
7 đã khiến hàng "SUM" đi xuống cuối bảng
Tiếp theo, thêm thuộc tính
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```
70 để làm cho ô "SUM" trải dài trên bốn cột đầu tiên, để số thực xuất hiện ở cuối cột "Chi phí"
Hãy thêm một số kiểu dáng bổ sung đơn giản vào bảng, để cho bạn biết mức độ hữu ích của các phần tử này đối với việc áp dụng CSS. Bên trong phần đầu của tài liệu HTML của bạn, bạn sẽ thấy một phần tử
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```
71 trống. Bên trong phần tử này, thêm các dòng mã CSS sau
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```

Lưu và làm mới, và xem kết quả. Nếu các phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

8 và

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

7 không có sẵn, bạn sẽ phải viết các bộ chọn/quy tắc phức tạp hơn nhiều để áp dụng cùng kiểu

Ghi chú. Chúng tôi không mong đợi bạn hiểu đầy đủ về CSS ngay bây giờ. Bạn sẽ tìm hiểu thêm về điều này khi xem qua các mô-đun CSS của chúng tôi (Giới thiệu về CSS là một nơi tốt để bắt đầu; chúng tôi cũng có một bài viết cụ thể về bảng tạo kiểu)

Bảng đã hoàn thành của bạn sẽ trông giống như sau

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My spending recordtitle>
    <style>
      html {
        font-family: sans-serif;
      }

      table {
        border-collapse: collapse;
        border: 4px solid rgb(200, 200, 200);
        letter-spacing: 1px;
        font-size: 0.8rem;
      }

      td,
      th {
        border: 2px solid rgb(190, 190, 190);
        padding: 10px 20px;
      }

      th {
        background-color: rgb(235, 235, 235);
      }

      td {
        text-align: center;
      }

      tr:nth-child(even) td {
        background-color: rgb(250, 250, 250);
      }

      tr:nth-child(odd) td {
        background-color: rgb(245, 245, 245);
      }

      caption {
        padding: 10px;
      }

      tbody {
        font-size: 90%;
        font-style: italic;
      }

      tfoot {
        font-weight: bold;
      }
    style>
  head>
  <body>
    <table>
      <caption>
        How I chose to spend my money
      caption>
      <thead>
        <tr>
          <th>Purchaseth>
          <th>Locationth>
          <th>Dateth>
          <th>Evaluationth>
          <th>Cost (€)th>
        tr>
      thead>
      <tfoot>
        <tr>
          <td colspan="4">SUMtd>
          <td>118td>
        tr>
      tfoot>
      <tbody>
        <tr>
          <td>Haircuttd>
          <td>Hairdressertd>
          <td>12/09td>
          <td>Great ideatd>
          <td>30td>
        tr>
        <tr>
          <td>Lasagnatd>
          <td>Restauranttd>
          <td>12/09td>
          <td>Regretstd>
          <td>18td>
        tr>
        <tr>
          <td>Shoestd>
          <td>Shoeshoptd>
          <td>13/09td>
          <td>Big regretstd>
          <td>65td>
        tr>
        <tr>
          <td>Toothpastetd>
          <td>Supermarkettd>
          <td>13/09td>
          <td>Goodtd>
          <td>5td>
        tr>
      tbody>
    table>
  body>
html>

Ghi chú. Bạn cũng có thể tìm thấy nó trên GitHub dưới dạng đã hoàn thành hồ sơ chi tiêu. html (cũng xem trực tiếp)

bàn làm tổ

Có thể lồng một bảng vào bên trong một bảng khác, miễn là bạn bao gồm cấu trúc hoàn chỉnh, bao gồm cả phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

1. Điều này thường không thực sự được khuyến khích vì nó làm cho phần đánh dấu trở nên khó hiểu hơn và khó truy cập hơn đối với người dùng trình đọc màn hình và trong nhiều trường hợp, bạn cũng có thể chỉ cần chèn thêm các ô/hàng/cột vào bảng hiện có. Tuy nhiên, đôi khi cần thiết, chẳng hạn nếu bạn muốn nhập nội dung dễ dàng từ các nguồn khác

Đánh dấu sau đây cho thấy một bảng lồng nhau đơn giản

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

7

Đầu ra trông giống như thế này

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

4

Bàn dành cho người khiếm thị

Hãy tóm tắt ngắn gọn về cách chúng tôi sử dụng bảng dữ liệu. Một bảng có thể là một công cụ hữu ích, giúp chúng ta truy cập nhanh vào dữ liệu và cho phép chúng ta tra cứu các giá trị khác nhau. Ví dụ: chỉ cần nhìn lướt qua bảng bên dưới để biết có bao nhiêu chiếc nhẫn đã được bán ở Gent trong tháng 8 năm 2016. Để hiểu thông tin của bảng, chúng tôi tạo liên kết trực quan giữa dữ liệu trong bảng này với các tiêu đề cột và/hoặc hàng của nó

Mặt hàng đã bán Tháng 8 năm 2016Quần áoPhụ kiệnQuầnVáyVáyVòng tayNhẫnBỉAntwerp5622437223Gent4618506115Brussels5127386928Hà LanAmsterdam8934698538Utrecht8012433619

Nhưng nếu bạn không thể tạo ra những liên tưởng trực quan đó thì sao? . Điều này không có vấn đề gì khi bạn đang đọc văn bản thuần túy nhưng việc diễn giải một bảng có thể là một thách thức khá lớn đối với người mù. Tuy nhiên, với cách đánh dấu phù hợp, chúng ta có thể thay thế các liên kết trực quan bằng các liên kết có lập trình

Ghi chú. Có khoảng 253 triệu người sống chung với bệnh Khiếm thị theo số liệu của WHO năm 2017

Phần này của bài viết cung cấp thêm các kỹ thuật để tạo các bảng dễ truy cập nhất có thể

Sử dụng tiêu đề cột và hàng

Trình đọc màn hình sẽ xác định tất cả các tiêu đề và sử dụng chúng để tạo liên kết có lập trình giữa các tiêu đề đó và các ô mà chúng liên quan. Sự kết hợp giữa tiêu đề cột và hàng sẽ xác định và diễn giải dữ liệu trong từng ô để người dùng trình đọc màn hình có thể diễn giải bảng tương tự như cách người dùng sáng mắt thực hiện

We already covered headers in our previous article — see Adding headers with

elements.

thuộc tính phạm vi

Một chủ đề mới cho bài viết này là thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

75, thuộc tính này có thể được thêm vào phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

76 để cho người đọc màn hình biết chính xác tiêu đề là tiêu đề cho những ô nào — ví dụ: đó là tiêu đề cho hàng hay cột.

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

7

Và mỗi hàng có thể có một tiêu đề được xác định như thế này (nếu chúng tôi đã thêm tiêu đề hàng cũng như tiêu đề cột)

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

8

trình đọc màn hình sẽ nhận ra đánh dấu có cấu trúc như thế này và cho phép người dùng của họ đọc to toàn bộ cột hoặc hàng cùng một lúc, chẳng hạn

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

75 có thêm hai giá trị có thể —

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

78 và

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

79. Chúng được sử dụng cho các tiêu đề nằm trên đầu của nhiều cột hoặc hàng. Nếu bạn nhìn lại bảng "Các mặt hàng đã bán vào tháng 8 năm 2016" ở đầu phần này của bài viết, bạn sẽ thấy ô "Quần áo" nằm phía trên ô "Quần tây", "Váy" và "Đầm". Tất cả các ô này phải được đánh dấu là tiêu đề (

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

76), nhưng "Quần áo" là tiêu đề nằm trên cùng và xác định ba tiêu đề phụ khác. Do đó, "Quần áo" sẽ có thuộc tính là

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

41, trong khi những thứ khác sẽ có thuộc tính là

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

42

Thuộc tính id và tiêu đề

Một cách khác để sử dụng thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

75 là sử dụng thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

44 và

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

45 để tạo liên kết giữa tiêu đề và ô. Cách chúng được sử dụng như sau

Bạn thêm một

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

44 duy nhất vào mỗi phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

76

Bạn thêm một thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

45 vào mỗi phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

49. Mỗi thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

45 phải chứa một danh sách các

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

44 của tất cả các phần tử

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

76 đóng vai trò là tiêu đề cho ô đó, được phân tách bằng dấu cách

Điều này cung cấp cho bảng HTML của bạn một định nghĩa rõ ràng về vị trí của từng ô trong bảng, được xác định bởi (các) tiêu đề cho mỗi cột và hàng mà nó là một phần của nó, giống như một bảng tính. Để nó hoạt động tốt, bảng thực sự cần cả tiêu đề cột và hàng

Quay trở lại ví dụ về chi phí chi tiêu của chúng tôi, hai đoạn trước có thể được viết lại như thế này

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

5

Ghi chú. Phương pháp này tạo ra các liên kết rất chính xác giữa các tiêu đề và các ô dữ liệu nhưng nó sử dụng nhiều đánh dấu hơn và không để lại bất kỳ lỗi nào. Cách tiếp cận

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

75 thường là đủ cho hầu hết các bảng

học tích cực. chơi với phạm vi và tiêu đề

Đối với bài tập cuối cùng này, trước tiên chúng tôi muốn bạn tạo các bản sao cục bộ của các mặt hàng đã bán. html và bảng tối thiểu. css, trong một thư mục mới
Bây giờ hãy thử thêm các thuộc tính
```
tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```
75 phù hợp để làm cho bảng này phù hợp hơn

Cuối cùng, hãy thử tạo một bản sao khác của các tệp ban đầu và lần này làm cho bảng dễ truy cập hơn bằng cách sử dụng các thuộc tính

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

44 và

tbody {
  font-size: 95%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}

45

Ghi chú. Bạn có thể kiểm tra công việc của mình dựa trên các ví dụ đã hoàn thành của chúng tôi — xem phạm vi các mặt hàng đã bán. html (xem trực tiếp phần này) và tiêu đề các mặt hàng đã bán. html (cũng xem trực tiếp này)

Bản tóm tắt

Có một vài điều khác mà bạn có thể tìm hiểu về bảng trong HTML, nhưng đây là tất cả những gì bạn cần biết bây giờ. Tiếp theo, bạn có thể tự kiểm tra với bảng đánh giá HTML của chúng tôi. Chúc vui vẻ

Nếu bạn đã học CSS và hoàn thành tốt bài đánh giá, bạn có thể tiếp tục và tìm hiểu về cách tạo kiểu bảng HTML — xem Bảng tạo kiểu

Một bảng HTML có thể có nhiều hàng tiêu đề không?

Bảng HTML có thể có tiêu đề cho từng cột hoặc hàng hoặc cho nhiều cột/hàng .

Một bảng có thể có nhiều tiêu đề không?

Các bảng có nhiều tiêu đề cũng có thể cần có chú thích để xác định bảng và tóm tắt để mô tả bố cục của bảng , xem Chú thích & Tóm tắt.

Thẻ HTML để tạo nhiều hàng trong một bảng phải là gì?

xác định ô tiêu đề trong bảng HTML. Một bảng HTML có hai loại ô. Các ô tiêu đề - chứa thông tin tiêu đề (được tạo bằng phần tử

programming html

Bảng html nhiều hàng tiêu đề

Adding a caption to your table with

học tích cực. Thêm chú thích

Adding structure with , , and

học tích cực. Thêm cấu trúc bảng

bàn làm tổ

Bàn dành cho người khiếm thị

Sử dụng tiêu đề cột và hàng

thuộc tính phạm vi

Thuộc tính id và tiêu đề

học tích cực. chơi với phạm vi và tiêu đề

Bản tóm tắt

Một bảng HTML có thể có nhiều hàng tiêu đề không?

Một bảng có thể có nhiều tiêu đề không?

Thẻ HTML để tạo nhiều hàng trong một bảng phải là gì?

Thẻ nào thêm tiêu đề hàng mới vào bảng HTML?

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