Cách đặt số hàng trong bảng HTML

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách lấy số lượng hàng trong Bảng HTML bằng JavaScript và jQuery

Bài viết này sẽ giải thích cách lấy tổng số lượng hàng trong Bảng HTML và cách lấy tổng số lượng của tất cả các hàng ngoại trừ hàng Đầu tiên (Tiêu đề) trong Bảng HTML bằng cách sử dụng JavaScript và jQuery

 

 

Nhận số lượng (số lượng) hàng trong bảng HTML bằng JavaScript

Đánh dấu HTML sau đây bao gồm Bảng HTML và Nút để đếm (số) hàng trong Bảng HTML bằng JavaScript

Khi Nút được nhấp, hàm JavaScript CountRows được thực thi. Bên trong hàm JavaScript CountRows, trước tiên, Bảng HTML được tham chiếu bằng JavaScript và sau đó một vòng lặp được thực thi trên các hàng của Bảng HTML (phần tử TR)

Tổng số lượng hàng

Tổng số hàng trong Bảng HTML được tính bằng cách đếm tất cả các phần tử TR HTML

Đếm số lượng của tất cả các hàng ngoại trừ hàng Đầu tiên (Tiêu đề)

Số đếm của tất cả các hàng ngoại trừ hàng Đầu tiên (Tiêu đề) trong Bảng HTML được xác định bằng cách chỉ chọn những phần tử HTML TR có chứa phần tử HTML TD (Ô) và bỏ qua tất cả các phần tử HTML TR có chứa HTML TH (Ô tiêu đề)

Mô hình bảng HTML cho phép tác giả sắp xếp dữ liệu -- văn bản, văn bản được định dạng sẵn, hình ảnh, liên kết, biểu mẫu, trường biểu mẫu, các bảng khác, v.v. -- vào hàng và cột của ô

Mỗi bảng có thể có chú thích liên quan (xem phần tử) cung cấp mô tả ngắn về mục đích của bảng. Một mô tả dài hơn cũng có thể được cung cấp (thông qua thuộc tính) vì lợi ích của những người sử dụng tác nhân người dùng dựa trên lời nói hoặc chữ nổi

có thể được nhóm thành các phần đầu, chân và thân, (thông qua các phần tử , và tương ứng). Các nhóm hàng truyền tải thông tin cấu trúc bổ sung và có thể được hiển thị bởi tác nhân người dùng theo cách nhấn mạnh cấu trúc này. Tác nhân người dùng có thể khai thác phần đầu/cơ thể/chân để hỗ trợ cuộn các phần cơ thể độc lập với phần đầu và chân. Khi in bảng dài, thông tin đầu và chân có thể được lặp lại trên mỗi trang chứa dữ liệu bảng

Các tác giả cũng có thể cung cấp thông tin cấu trúc bổ sung có thể được khai thác bởi các tác nhân người dùng. Hơn nữa, tác giả có thể khai báo các thuộc tính cột khi bắt đầu định nghĩa bảng (thông qua các phần tử và) theo cách cho phép tác nhân người dùng hiển thị bảng tăng dần thay vì phải đợi tất cả dữ liệu bảng đến trước khi hiển thị

có thể chứa thông tin "tiêu đề" (xem phần tử) hoặc "dữ liệu" (xem phần tử). Các ô có thể trải rộng trên nhiều hàng và cột. Mô hình bảng HTML 4 cho phép tác giả gắn nhãn cho từng ô để có thể dễ dàng truyền đạt thông tin tiêu đề về ô cho người dùng hơn. Các cơ chế này không chỉ hỗ trợ rất nhiều cho người dùng bị khiếm thị mà còn giúp các trình duyệt không dây đa phương thức có khả năng hiển thị hạn chế (e. g. , máy nhắn tin và điện thoại hỗ trợ web) để xử lý các bảng

Không nên sử dụng bảng hoàn toàn như một phương tiện để bố trí nội dung tài liệu vì điều này có thể gây ra sự cố khi hiển thị trên phương tiện không trực quan. Ngoài ra, khi được sử dụng với đồ họa, các bảng này có thể buộc người dùng phải cuộn theo chiều ngang để xem bảng được thiết kế trên hệ thống có màn hình lớn hơn. Để giảm thiểu những vấn đề này, tác giả nên sử dụng biểu định kiểu để kiểm soát bố cục thay vì bảng

Đây là một bảng đơn giản minh họa một số tính năng của mô hình bảng HTML. Định nghĩa bảng sau

A test table with merged cells
Average
    Red
eyes heightweight Males1.90.00340% Females1.70.00243%

có thể được hiển thị giống như thế này trên thiết bị tty

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/

hoặc như thế này bởi một tác nhân người dùng đồ họa

Cách đặt số hàng trong bảng HTML

11. 2 Yếu tố để xây dựng bảng

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu

Định nghĩa thuộc tính

tóm tắt = Thuộc tính này cung cấp bản tóm tắt về mục đích và cấu trúc của bảng để tác nhân người dùng hiển thị cho phương tiện không trực quan như lời nói và chữ nổi. căn = trái. trung tâm. right Thuộc tính này xác định vị trí của bảng đối với tài liệu. giá trị được phép
  • bên trái. Bảng nằm bên trái tài liệu
  • trung tâm. Bảng nằm ở giữa tài liệu
  • đúng. Bảng nằm bên phải tài liệu
chiều rộng = Thuộc tính này chỉ định chiều rộng mong muốn của toàn bộ bảng và dành cho các tác nhân người dùng trực quan. Khi giá trị là giá trị phần trăm, giá trị tương ứng với không gian ngang có sẵn của tác nhân người dùng. Trong trường hợp không có bất kỳ đặc tả chiều rộng nào, chiều rộng của bảng được xác định bởi tác nhân người dùng

Các thuộc tính được xác định ở nơi khác

Phần tử chứa tất cả các phần tử khác chỉ định chú thích, hàng, nội dung và định dạng

Danh sách thông tin sau đây mô tả những thao tác mà tác nhân người dùng có thể thực hiện khi hiển thị bảng

  • Cung cấp bảng cho người dùng. Các tác giả nên cung cấp một bản tóm tắt về nội dung và cấu trúc của bảng để những người sử dụng tác nhân người dùng không trực quan có thể hiểu rõ hơn về nó
  • Kết xuất chú thích, nếu chú thích được xác định
  • Kết xuất tiêu đề bảng, nếu một tiêu đề được chỉ định. Kết xuất chân trang của bảng, nếu được chỉ định. Tác nhân người dùng phải biết nơi hiển thị đầu trang và chân trang. Chẳng hạn, nếu phương tiện đầu ra được phân trang, tác nhân người dùng có thể đặt tiêu đề ở đầu mỗi trang và chân trang ở cuối trang. Tương tự, nếu tác nhân người dùng cung cấp cơ chế để cuộn các hàng, tiêu đề có thể xuất hiện ở trên cùng của vùng được cuộn và chân trang ở dưới cùng
  • Tính toán trong bảng. Lưu ý rằng số lượng hàng trong một bảng bằng số lượng phần tử được chứa bởi phần tử
  • Nhóm các cột theo bất kỳ thông số kỹ thuật nào
  • Hiển thị các ô, theo từng hàng và được nhóm trong các cột thích hợp, giữa đầu trang và chân trang. Tác nhân người dùng trực quan phải theo thuộc tính HTML và đặc điểm kỹ thuật biểu định kiểu

Mô hình bảng HTML đã được thiết kế sao cho, với sự hỗ trợ của tác giả, các tác nhân người dùng có thể hiển thị các bảng tăng dần (i. e. , khi các hàng trong bảng đến) thay vì phải đợi tất cả dữ liệu trước khi bắt đầu kết xuất

Để tác nhân người dùng định dạng bảng trong một lần, tác giả phải thông báo cho tác nhân người dùng

Chính xác hơn, tác nhân người dùng có thể hiển thị bảng trong một lần khi độ rộng cột được chỉ định bằng cách sử dụng kết hợp các phần tử và. Nếu bất kỳ cột nào được chỉ định theo tỷ lệ phần trăm hoặc tương đối (xem phần trên), tác giả cũng phải chỉ định chiều rộng của chính bảng đó

bảng hướng

Hướng của bảng là hướng kế thừa (mặc định là từ trái sang phải) hoặc hướng được chỉ định bởi thuộc tính cho phần tử

Đối với bảng từ trái sang phải, cột 0 ở bên trái và hàng 0 ở trên cùng. Đối với bảng từ phải sang trái, cột 0 ở bên phải và hàng 0 ở trên cùng

Khi một tác nhân người dùng phân bổ các ô bổ sung cho một hàng (xem phần trên ), các ô của hàng bổ sung sẽ được thêm vào bên phải của bảng đối với các bảng từ trái sang phải và ở bên trái đối với các bảng từ phải sang trái

Lưu ý rằng đó là phần tử duy nhất đảo ngược thứ tự trực quan của các cột;

Khi được đặt cho phần tử, thuộc tính cũng ảnh hưởng đến hướng của văn bản trong các ô của bảng (vì thuộc tính được kế thừa bởi các phần tử cấp khối)

Để chỉ định bảng từ phải sang trái, hãy đặt thuộc tính như sau

...the rest of the table...


Có thể thay đổi hướng của văn bản trong các ô riêng lẻ bằng cách đặt thuộc tính trong phần tử xác định ô. Vui lòng tham khảo phần trên để biết thêm thông tin về các vấn đề hướng văn bản

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu

Định nghĩa thuộc tính

căn = hàng đầu. đáy. bên trái. right Đối với các tác nhân người dùng trực quan, thuộc tính này chỉ định vị trí của chú thích đối với bảng. Những giá trị khả thi
  • đứng đầu. Chú thích ở đầu bảng. Đây là giá trị mặc định
  • đáy. Chú thích ở cuối bảng
  • bên trái. Chú thích ở bên trái của bảng
  • đúng. Chú thích ở bên phải của bảng

Các thuộc tính được xác định ở nơi khác

Khi có mặt, văn bản của phần tử sẽ mô tả bản chất của bảng. Phần tử chỉ được phép ngay sau thẻ bắt đầu. Một phần tử chỉ có thể chứa một phần tử

Tác nhân người dùng trực quan cho phép những người có thị giác nhanh chóng nắm bắt cấu trúc của bảng từ các tiêu đề cũng như chú thích. Hậu quả của điều này là chú thích thường sẽ không đầy đủ như một bản tóm tắt về mục đích và cấu trúc của bảng từ quan điểm của những người dựa vào các tác nhân người dùng không trực quan

Do đó, các tác giả nên cẩn thận cung cấp thông tin bổ sung tóm tắt mục đích và cấu trúc của bảng bằng cách sử dụng thuộc tính của phần tử. Điều này đặc biệt quan trọng đối với các bảng không có chú thích. Các ví dụ dưới đây minh họa việc sử dụng thuộc tính

Các tác nhân người dùng trực quan nên tránh cắt bớt bất kỳ phần nào của bảng bao gồm cả chú thích, trừ khi một phương tiện được cung cấp để truy cập tất cả các phần, e. g. , bằng cách cuộn ngang hoặc dọc. Chúng tôi khuyên rằng văn bản chú thích nên được bao bọc với cùng chiều rộng với bảng. (Xem thêm phần về. )

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. không bắt buộc

TBODY    O O (TR)+           -- table body -->

thẻ bắt đầu. tùy chọn, thẻ kết thúc. không bắt buộc

Các thuộc tính được xác định ở nơi khác

Các hàng của bảng có thể được nhóm thành phần đầu bảng, chân bảng và một hoặc nhiều phần thân bảng, sử dụng các phần tử , và tương ứng. Bộ phận này cho phép các tác nhân người dùng hỗ trợ cuộn các phần thân của bảng một cách độc lập với đầu và chân của bảng. Khi bảng dài được in, thông tin đầu và chân bảng có thể được lặp lại trên mỗi trang chứa dữ liệu bảng

Đầu bảng và chân bảng phải chứa thông tin về các cột của bảng. Phần thân của bảng phải chứa các hàng dữ liệu của bảng

Khi có mặt, mỗi , và chứa một nhóm hàng. Mỗi nhóm hàng phải chứa ít nhất một hàng, được xác định bởi phần tử

Ví dụ này minh họa thứ tự và cấu trúc của đầu, chân và thân bàn

...header information......footer information......first row of block one data......second row of block one data......first row of block two data......second row of block two data......third row of block two data...

      


      


      
      


      
      
      


phải xuất hiện trước trong một định nghĩa để tác nhân người dùng có thể hiển thị chân trước khi nhận tất cả (có thể là nhiều) hàng dữ liệu. Phần sau đây tóm tắt những thẻ nào được yêu cầu và những thẻ nào có thể bị bỏ qua

  • Thẻ bắt đầu luôn được yêu cầu trừ khi bảng chỉ chứa một phần thân bảng và không có phần đầu hoặc phần chân của bảng. Thẻ kết thúc có thể luôn được bỏ qua một cách an toàn
  • Các thẻ bắt đầu cho và được yêu cầu khi có mặt phần đầu và phần chân tương ứng, nhưng các thẻ kết thúc tương ứng luôn có thể được bỏ qua một cách an toàn

Trình phân tích cú pháp tác nhân người dùng phù hợp phải tuân theo các quy tắc này vì lý do tương thích ngược

Bảng của ví dụ trước có thể được rút ngắn bằng cách loại bỏ một số thẻ kết thúc, như trong

...header information......footer information......first row of block one data......second row of block one data......first row of block two data......second row of block two data......third row of block two data...

      

      

      
      

      
      
      

Các phần , , và phải chứa cùng số cột

Các nhóm cột cho phép tác giả tạo các phân chia cấu trúc trong một bảng. Tác giả có thể làm nổi bật cấu trúc này thông qua biểu định kiểu hoặc thuộc tính HTML (e. g. , thuộc tính cho phần tử). Để biết ví dụ về cách trình bày trực quan của các nhóm cột, vui lòng tham khảo

Một bảng có thể chứa một nhóm cột ngầm định (không có phần tử nào phân định các cột) hoặc bất kỳ số lượng nhóm cột rõ ràng nào (mỗi nhóm được phân định bằng một thể hiện của phần tử)

Phần tử cho phép tác giả chia sẻ các thuộc tính giữa một số cột mà không bao hàm bất kỳ nhóm cấu trúc nào. "Span" của phần tử là số cột sẽ chia sẻ các thuộc tính của phần tử

Phần tử COLGROUP

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. không bắt buộc

Định nghĩa thuộc tính

span = Thuộc tính này, phải là số nguyên > 0, chỉ định số lượng cột trong một nhóm cột. Các giá trị có nghĩa như sau
  • Trong trường hợp không có thuộc tính, mỗi thuộc tính xác định một nhóm cột chứa một cột
  • Nếu thuộc tính được đặt thành N > 0, phần tử hiện tại sẽ xác định một nhóm cột chứa N cột

Tác nhân người dùng phải bỏ qua thuộc tính này nếu phần tử chứa một hoặc nhiều phần tử

chiều rộng =

Thuộc tính này chỉ định chiều rộng mặc định cho mỗi cột trong nhóm cột hiện tại. Ngoài các giá trị tương đối, tỷ lệ phần trăm và pixel tiêu chuẩn, thuộc tính này cho phép biểu mẫu đặc biệt "0*" (dấu hoa thị bằng 0), nghĩa là chiều rộng của mỗi cột trong nhóm phải là chiều rộng tối thiểu cần thiết để chứa nội dung của cột. Điều này ngụ ý rằng toàn bộ nội dung của một cột phải được biết trước khi chiều rộng của nó có thể được tính toán chính xác. Các tác giả nên lưu ý rằng việc chỉ định "0*" sẽ ngăn tác nhân người dùng trực quan hiển thị bảng dần dần

Thuộc tính này được ghi đè cho bất kỳ cột nào trong nhóm cột được chỉ định thông qua một phần tử

Các thuộc tính được xác định ở nơi khác

Phần tử tạo một nhóm cột rõ ràng. Số cột trong nhóm cột có thể được chỉ định theo hai cách loại trừ lẫn nhau

  1. Thuộc tính của phần tử (giá trị mặc định 1) chỉ định số lượng cột trong nhóm
  2. Mỗi phần tử trong đại diện cho một hoặc nhiều cột trong nhóm

Ưu điểm của việc sử dụng thuộc tính là các tác giả có thể nhóm thông tin về độ rộng cột lại với nhau. Do đó, nếu một bảng chứa bốn mươi cột, tất cả đều có chiều rộng 20 pixel, thì sẽ dễ viết hơn

   
   

hơn

________số 8_______

Khi cần chọn ra một cột (e. g. , để biết thông tin về kiểu dáng, để chỉ định thông tin về chiều rộng, v.v. ) trong một nhóm, tác giả phải xác định cột đó bằng một phần tử. Vì vậy, để áp dụng thông tin kiểu dáng đặc biệt cho cột cuối cùng của bảng trước, chúng tôi chỉ ra nó như sau

   
      
      
   

Thuộc tính của phần tử được kế thừa bởi tất cả 40 cột. Phần tử đầu tiên đề cập đến 39 cột đầu tiên (không có gì đặc biệt với chúng) và phần tử thứ hai gán một giá trị cho cột thứ bốn mươi để các biểu định kiểu có thể tham chiếu đến nó

Bảng trong ví dụ sau chứa hai nhóm cột. Nhóm cột đầu tiên chứa 10 cột và nhóm thứ hai chứa 5 cột. Chiều rộng mặc định cho mỗi cột trong nhóm cột đầu tiên là 50 pixel. Chiều rộng của mỗi cột trong nhóm cột thứ hai sẽ là chiều rộng tối thiểu cần thiết cho cột đó

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
0

phần tử COL

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. cấm

Định nghĩa thuộc tính

span = Thuộc tính này, có giá trị phải là số nguyên > 0, chỉ định số lượng cột "được kéo dài" bởi phần tử; . Giá trị mặc định cho thuộc tính này là 1 (i. e. , phần tử đề cập đến một cột duy nhất). Nếu thuộc tính được đặt thành N > 1, phần tử hiện tại chia sẻ thuộc tính của nó với N-1 cột tiếp theo. chiều rộng = Thuộc tính này chỉ định chiều rộng mặc định cho mỗi cột được kéo dài bởi phần tử hiện tại. Nó có ý nghĩa giống như thuộc tính cho phần tử và ghi đè lên nó

Các thuộc tính được xác định ở nơi khác

Phần tử cho phép tác giả nhóm các đặc tả thuộc tính cho các cột trong bảng lại với nhau. Không nhóm các cột lại với nhau theo cấu trúc -- đó là vai trò của phần tử. các phần tử trống và chỉ đóng vai trò hỗ trợ cho các thuộc tính. Chúng có thể xuất hiện bên trong hoặc bên ngoài một nhóm cột rõ ràng (i. e. , yếu tố)

Thuộc tính for đề cập đến chiều rộng của mỗi cột trong khoảng của phần tử

Tính số cột trong bảng

Có hai cách để xác định số cột trong bảng (theo thứ tự ưu tiên)

  1. Nếu phần tử chứa bất kỳ hoặc phần tử nào, tác nhân người dùng nên tính toán số lượng cột bằng cách tính tổng như sau
    • Đối với mỗi phần tử, lấy giá trị thuộc tính của nó (giá trị mặc định 1)
    • Đối với mỗi phần tử chứa ít nhất một phần tử, bỏ qua thuộc tính cho phần tử. Với mỗi phần tử, thực hiện phép tính của bước 1
    • Đối với mỗi phần tử trống, lấy giá trị thuộc tính của nó (giá trị mặc định 1)
  2. Mặt khác, nếu phần tử không chứa hoặc không có phần tử nào, tác nhân người dùng nên căn cứ vào số lượng cột dựa trên yêu cầu của các hàng. Số cột bằng số cột theo yêu cầu của hàng có nhiều cột nhất, kể cả ô trải nhiều cột. Đối với bất kỳ hàng nào có ít hơn số cột này, cuối hàng đó phải được đệm bằng các ô trống. "Kết thúc" của một hàng phụ thuộc vào

Đó là một lỗi nếu một bảng chứa hoặc các phần tử và hai phép tính không dẫn đến cùng một số cột

Khi tác nhân người dùng đã tính toán số lượng cột trong bảng, nó có thể nhóm chúng thành

Ví dụ: đối với mỗi bảng sau đây, phương pháp tính toán hai cột sẽ dẫn đến ba cột. Ba bảng đầu tiên có thể được hiển thị tăng dần

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
1

Tính chiều rộng cột

Tác giả có thể chỉ định độ rộng cột theo ba cách

Cố địnhMột thông số kỹ thuật về chiều rộng cố định được tính bằng pixel (e. g. , chiều rộng="30"). Thông số kỹ thuật có chiều rộng cố định cho phép hiển thị gia tăng. Tỷ lệ phần trăm Một đặc điểm kỹ thuật tỷ lệ phần trăm (e. g. , chiều rộng="20%") dựa trên tỷ lệ phần trăm của không gian ngang có sẵn cho bảng (giữa lề trái và phải hiện tại, bao gồm cả số float). Lưu ý rằng không gian này không phụ thuộc vào chính bảng và do đó, thông số kỹ thuật phần trăm cho phép hiển thị gia tăng. Thông số kỹ thuật theo tỷ lệ (e. g. , width="3*") đề cập đến các phần của không gian ngang được yêu cầu bởi một bảng. Nếu chiều rộng của bảng được cung cấp một giá trị cố định thông qua thuộc tính chiều rộng của phần tử, tác nhân người dùng có thể hiển thị bảng tăng dần ngay cả với các cột tỷ lệ

Tuy nhiên, nếu bảng không có chiều rộng cố định, tác nhân người dùng phải nhận tất cả dữ liệu bảng trước khi họ có thể xác định không gian ngang mà bảng yêu cầu. Chỉ sau đó, không gian này mới có thể được phân bổ cho các cột tỷ lệ

Nếu tác giả chỉ định không có thông tin về chiều rộng cho một cột, tác nhân người dùng có thể không định dạng được bảng tăng dần vì nó phải đợi toàn bộ cột dữ liệu đến để phân bổ chiều rộng phù hợp

Nếu độ rộng của cột quá hẹp đối với nội dung của một ô bảng cụ thể, tác nhân người dùng có thể chọn chỉnh lại dòng của bảng

Bảng trong ví dụ này chứa sáu cột. Cái đầu tiên không thuộc nhóm cột rõ ràng. Ba cái tiếp theo thuộc nhóm cột rõ ràng đầu tiên và hai cái cuối cùng thuộc nhóm cột rõ ràng thứ hai. Bảng này không thể được định dạng tăng dần vì nó chứa thông số kỹ thuật về độ rộng cột theo tỷ lệ và không có giá trị cho thuộc tính của phần tử

Khi tác nhân người dùng (trực quan) đã nhận được dữ liệu của bảng. không gian ngang có sẵn sẽ được phân bổ bởi tác nhân người dùng như sau. Đầu tiên, tác nhân người dùng sẽ phân bổ 30 pixel cho cột một và cột hai. Sau đó, không gian tối thiểu cần thiết cho cột thứ ba sẽ được dành riêng. Không gian nằm ngang còn lại sẽ được chia thành sáu phần bằng nhau (vì 2* + 1* + 3* = 6 phần). Cột bốn (2*) sẽ nhận được hai phần trong số này, cột năm (1*) sẽ nhận được một phần và cột sáu (3*) sẽ nhận được ba phần

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
2

Chúng tôi đã đặt giá trị của thuộc tính trong nhóm cột thứ ba thành "trung tâm". Tất cả các ô trong mọi cột trong nhóm này sẽ kế thừa giá trị này, nhưng có thể ghi đè giá trị đó. Trên thực tế, phần cuối cùng thực hiện điều đó, bằng cách chỉ định rằng mọi ô trong cột mà nó chi phối sẽ được căn chỉnh dọc theo ". " nhân vật

Trong bảng sau, các thông số kỹ thuật về chiều rộng cột cho phép tác nhân người dùng định dạng bảng tăng dần

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
3

Mười cột đầu tiên sẽ rộng 15 pixel mỗi cột. Hai cột cuối cùng sẽ nhận được một nửa trong số 50 pixel còn lại. Lưu ý rằng các phần tử chỉ xuất hiện để một giá trị có thể được chỉ định cho hai cột cuối cùng

Ghi chú. Mặc dù thuộc tính trên phần tử không được dùng nữa, nhưng các tác giả được khuyến khích sử dụng biểu định kiểu để chỉ định độ rộng của bảng

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. không bắt buộc

Các thuộc tính được xác định ở nơi khác

Các phần tử hoạt động như một vùng chứa cho một hàng ô của bảng. Thẻ kết thúc có thể được bỏ qua

Bảng mẫu này chứa ba hàng, mỗi hàng bắt đầu bởi phần tử

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
4

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
5

thẻ bắt đầu. bắt buộc, Thẻ kết thúc. không bắt buộc

Định nghĩa thuộc tính

headers = Thuộc tính này chỉ định danh sách các ô tiêu đề cung cấp thông tin tiêu đề cho ô dữ liệu hiện tại. Giá trị của thuộc tính này là một danh sách các tên ô được phân tách bằng dấu cách; . Các tác giả thường sử dụng thuộc tính này để giúp các tác nhân người dùng không trực quan hiển thị thông tin tiêu đề về các ô dữ liệu (e. g. , thông tin tiêu đề được nói trước dữ liệu ô), nhưng thuộc tính cũng có thể được sử dụng cùng với biểu định kiểu. Xem thêm thuộc tính. phạm vi = tên phạm vi Thuộc tính này chỉ định tập hợp các ô dữ liệu mà ô tiêu đề hiện tại cung cấp thông tin tiêu đề. Thuộc tính này có thể được sử dụng thay cho thuộc tính, đặc biệt đối với các bảng đơn giản. Khi được chỉ định, thuộc tính này phải có một trong các giá trị sau
  • chèo thuyền. Ô hiện tại cung cấp thông tin tiêu đề cho phần còn lại của hàng chứa nó (xem thêm phần trên)
  • cột. Ô hiện tại cung cấp thông tin tiêu đề cho phần còn lại của cột chứa nó
  • nhóm hàng. Ô tiêu đề cung cấp thông tin tiêu đề cho phần còn lại chứa nó
  • tập hợp lại. Ô tiêu đề cung cấp thông tin tiêu đề cho phần còn lại chứa nó
abbr = Thuộc tính này nên được sử dụng để cung cấp dạng viết tắt của nội dung ô và có thể được hiển thị bởi tác nhân người dùng khi thích hợp thay cho nội dung của ô. Tên viết tắt phải ngắn vì tác nhân người dùng có thể hiển thị chúng nhiều lần. Chẳng hạn, bộ tổng hợp giọng nói có thể hiển thị các tiêu đề viết tắt liên quan đến một ô cụ thể trước khi hiển thị nội dung của ô đó. axis = Thuộc tính này có thể được sử dụng để đặt một ô vào các danh mục khái niệm có thể được coi là tạo thành các trục trong không gian n chiều. Tác nhân người dùng có thể cấp cho người dùng quyền truy cập vào các danh mục này (e. g. , người dùng có thể truy vấn tác nhân người dùng cho tất cả các ô thuộc các danh mục nhất định, tác nhân người dùng có thể trình bày một bảng ở dạng mục lục, v.v. ). Vui lòng tham khảo phần trên để biết thêm thông tin. Giá trị của thuộc tính này là danh sách tên danh mục được phân tách bằng dấu phẩy. rowspan = Thuộc tính này chỉ định số hàng kéo dài bởi ô hiện tại. Giá trị mặc định của thuộc tính này là một ("1"). Giá trị không ("0") có nghĩa là ô mở rộng tất cả các hàng từ hàng hiện tại đến hàng cuối cùng của phần bảng (, , hoặc ) trong đó ô được xác định. colspan = Thuộc tính này chỉ định số lượng cột kéo dài bởi ô hiện tại. Giá trị mặc định của thuộc tính này là một ("1"). Giá trị bằng không ("0") có nghĩa là ô kéo dài tất cả các cột từ cột hiện tại đến cột cuối cùng của nhóm cột () trong đó ô được xác định. nowrap Khi xuất hiện, thuộc tính boolean này báo cho các tác nhân người dùng trực quan tắt gói văn bản tự động cho ô này. Biểu định kiểu nên được sử dụng thay cho thuộc tính này để đạt được hiệu ứng bao bọc. Ghi chú. nếu sử dụng không cẩn thận, thuộc tính này có thể dẫn đến các ô quá rộng. chiều rộng = Thuộc tính này cung cấp cho tác nhân người dùng chiều rộng ô được đề xuất. height = Thuộc tính này cung cấp cho tác nhân người dùng chiều cao ô được đề xuất

Các thuộc tính được xác định ở nơi khác

Các ô của bảng có thể chứa hai loại thông tin. thông tin tiêu đề và dữ liệu. Sự khác biệt này cho phép các tác nhân người dùng hiển thị các ô tiêu đề và dữ liệu một cách rõ ràng, ngay cả khi không có biểu định kiểu. Ví dụ: các tác nhân người dùng trực quan có thể trình bày văn bản ô tiêu đề với phông chữ đậm. Bộ tổng hợp giọng nói có thể hiển thị thông tin tiêu đề với giọng nói khác biệt

Phần tử xác định một ô chứa thông tin tiêu đề. Tác nhân người dùng có sẵn hai phần thông tin tiêu đề. nội dung của phần tử và giá trị của thuộc tính. Tác nhân người dùng phải hiển thị nội dung của ô hoặc giá trị của thuộc tính. Đối với phương tiện trực quan, phương tiện thứ hai có thể phù hợp khi không có đủ không gian để hiển thị toàn bộ nội dung của ô. Đối với phương tiện không trực quan có thể được sử dụng làm từ viết tắt cho tiêu đề bảng khi chúng được hiển thị cùng với nội dung của các ô mà chúng áp dụng

Các thuộc tính và cũng cho phép tác giả giúp các tác nhân người dùng không trực quan xử lý thông tin tiêu đề. Vui lòng tham khảo phần trên để biết thông tin và ví dụ

Phần tử xác định một ô chứa dữ liệu

Các ô có thể trống (i. e. , không chứa dữ liệu)

Ví dụ: bảng sau đây chứa bốn cột dữ liệu, mỗi cột được đặt đầu bởi một mô tả cột

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
6

Tác nhân người dùng kết xuất với thiết bị tty có thể hiển thị điều này như sau

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
7

Các ô kéo dài nhiều hàng hoặc cột

Các ô có thể kéo dài nhiều hàng hoặc cột. Số lượng hàng hoặc cột kéo dài bởi một ô được đặt bởi các thuộc tính và cho các phần tử và

Trong định nghĩa bảng này, chúng tôi chỉ định rằng ô ở hàng bốn, cột hai phải kéo dài tổng cộng ba cột, bao gồm cả cột hiện tại

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
8

Bảng này có thể được hiển thị trên thiết bị tty bởi tác nhân người dùng trực quan như sau

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
9

Ví dụ tiếp theo minh họa (với sự trợ giúp của đường viền bảng) cách các định nghĩa ô mở rộng trên nhiều hàng hoặc cột ảnh hưởng đến định nghĩa của các ô sau này. Xem xét định nghĩa bảng sau

...the rest of the table...


0

Khi ô "2" kéo dài hàng thứ nhất và hàng thứ hai, định nghĩa của hàng thứ hai sẽ tính đến nó. Do đó, ô thứ hai trong hàng hai thực sự xác định ô thứ ba của hàng. Trực quan, bảng có thể được hiển thị cho một thiết bị tty như

...the rest of the table...


1

trong khi tác nhân người dùng đồ họa có thể hiển thị điều này dưới dạng

Cách đặt số hàng trong bảng HTML

Lưu ý rằng nếu ô xác định "6" bị bỏ qua, thì một ô trống bổ sung sẽ được thêm vào bởi tác nhân người dùng để hoàn thành hàng

Tương tự, trong định nghĩa bảng sau

...the rest of the table...


0

ô "4" kéo dài hai cột, vì vậy cột thứ hai trong hàng thực sự xác định ô thứ ba ("6")

...the rest of the table...


3

Tác nhân người dùng đồ họa có thể hiển thị điều này dưới dạng

Cách đặt số hàng trong bảng HTML

Xác định các ô chồng chéo là một lỗi. Tác nhân người dùng có thể khác nhau về cách họ xử lý lỗi này (e. g. , hiển thị có thể thay đổi)

Ví dụ bất hợp pháp sau đây minh họa cách một người có thể tạo các ô chồng chéo. Trong bảng này, ô "5" mở rộng hai hàng và ô "7" mở rộng hai cột, do đó, có sự trùng lặp trong ô giữa "7" và "9"

...the rest of the table...


4

Ghi chú. Các phần sau đây mô tả các thuộc tính bảng HTML liên quan đến định dạng trực quan. Khi thông số kỹ thuật này được xuất bản lần đầu tiên vào năm 1997, đã không cung cấp các cơ chế để kiểm soát tất cả các khía cạnh của định dạng bảng trực quan. Kể từ đó, đã thêm các thuộc tính để cho phép định dạng trực quan các bảng

HTML 4 bao gồm các cơ chế để kiểm soát

Các thuộc tính sau ảnh hưởng đến khung bên ngoài và quy tắc bên trong của bảng

Định nghĩa thuộc tính

khung = khoảng trống. bên trên. phía dưới. hai bên. lhs. rhs. bên cạnh. hộp. đường viền Thuộc tính này chỉ định các cạnh của khung bao quanh bảng sẽ được hiển thị. Những giá trị khả thi
  • khoảng trống. không có bên. Đây là giá trị mặc định
  • bên trên. Chỉ mặt trên
  • phía dưới. Chỉ có mặt dưới
  • hai bên. Chỉ có mặt trên và mặt dưới
  • bên cạnh. Chỉ bên phải và bên trái
  • lhs. Chỉ bên tay trái
  • rhs. Chỉ bên tay phải
  • hộp. Cả bốn phía
  • biên giới. Cả bốn phía
quy tắc = không có. các nhóm. hàng. cols. all Thuộc tính này chỉ định quy tắc nào sẽ xuất hiện giữa các ô trong một bảng. Việc hiển thị các quy tắc phụ thuộc vào tác nhân người dùng. Những giá trị khả thi
  • không ai. Không có quy tắc. Đây là giá trị mặc định
  • các nhóm. Các quy tắc sẽ chỉ xuất hiện giữa các nhóm hàng (xem , và ) và các nhóm cột (xem và )
  • hàng. Các quy tắc sẽ chỉ xuất hiện giữa các hàng
  • cols. Quy tắc sẽ chỉ xuất hiện giữa các cột
  • tất cả các. Quy tắc sẽ xuất hiện giữa tất cả các hàng và cột
đường viền = Thuộc tính này chỉ định chiều rộng (chỉ tính bằng pixel) của khung xung quanh bảng (xem Ghi chú bên dưới để biết thêm thông tin về thuộc tính này)

Để giúp phân biệt các ô của bảng, chúng ta có thể đặt thuộc tính của phần tử. Xem xét một ví dụ trước

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
6

Trong ví dụ sau, tác nhân người dùng sẽ hiển thị đường viền dày năm pixel ở bên trái và bên phải của bảng, với các quy tắc được vẽ giữa mỗi cột

...the rest of the table...


6

Tác nhân người dùng phải tuân theo các cài đặt sau để tương thích ngược

  • Cài đặt = "0" ngụ ý = "void" và, trừ khi được chỉ định khác, = "none"
  • Các giá trị khác của mean ="đường viền" và, trừ khi được chỉ định khác, ="all"
  • Giá trị "đường viền" trong thẻ bắt đầu của phần tử nên được hiểu là giá trị của thuộc tính. Nó ngụ ý = "all" và một số giá trị mặc định (khác không) cho thuộc tính

Ví dụ, các định nghĩa sau đây là tương đương

...the rest of the table...


7

Định nghĩa thuộc tính

căn chỉnh = . trung tâm. đúng. biện minh. than . Những giá trị khả thi.
  • bên trái. Dữ liệu tuôn ra trái/Văn bản căn trái. Đây là giá trị mặc định cho dữ liệu bảng
  • trung tâm. Dữ liệu căn giữa/Văn bản căn giữa. Đây là giá trị mặc định cho tiêu đề bảng
  • đúng. Dữ liệu tuôn ra phải/Văn bản căn phải
  • biện minh. Căn hai lần văn bản
  • than. Căn chỉnh văn bản xung quanh một ký tự cụ thể. Nếu tác nhân người dùng không hỗ trợ căn chỉnh ký tự, thì hành vi khi có giá trị này là
valign = . tên đệm. đáy. đường cơ sở . Những giá trị khả thi.
  • đứng đầu. Dữ liệu ô được làm phẳng với phần trên cùng của ô
  • tên đệm. Dữ liệu ô được căn giữa theo chiều dọc trong ô. Đây là giá trị mặc định
  • đáy. Dữ liệu ô được làm phẳng với phần dưới cùng của ô
  • đường cơ sở. Tất cả các ô trong cùng một hàng với một ô có thuộc tính valign có giá trị này phải có dữ liệu văn bản của chúng . Ràng buộc này không áp dụng cho các dòng văn bản tiếp theo trong các ô này
ký tự = . Giá trị mặc định cho thuộc tính này là ký tự dấu thập phân cho ngôn ngữ hiện tại được đặt bởi . g. , khoảng thời gian (". ") trong tiếng Anh và dấu phẩy (",") trong tiếng Pháp). Tác nhân người dùng không bắt buộc phải hỗ trợ thuộc tính này. than bùn = . Nếu một dòng không bao gồm ký tự căn chỉnh, nó sẽ được dịch chuyển theo chiều ngang để kết thúc tại căn chỉnh .

Khi được sử dụng để đặt độ lệch của ký tự căn chỉnh, hướng của độ lệch được xác định bởi hướng văn bản hiện tại (được đặt bởi . Trong văn bản từ trái sang phải (mặc định), độ lệch là từ lề trái. Trong văn bản từ phải sang trái, độ lệch là từ lề phải. Tác nhân người dùng không bắt buộc phải hỗ trợ thuộc tính này

Bảng trong ví dụ này sắp xếp một hàng giá trị tiền tệ dọc theo dấu thập phân. Chúng tôi đặt ký tự căn chỉnh thành ". " một cách rõ ràng

Chi phí rau mỗi kg . 50 củ cải vàng $100. 30

Bảng được định dạng có thể giống như sau

...the rest of the table...


8

Khi nội dung của một ô chứa nhiều hơn một phiên bản của ký tự căn chỉnh được chỉ định bởi và bao nội dung, hành vi của tác nhân người dùng không được xác định. Do đó, các tác giả nên chú ý trong việc sử dụng

Ghi chú. Các tác nhân người dùng trực quan thường hiển thị các phần tử được căn giữa theo chiều dọc và chiều ngang trong ô và với độ đậm của phông chữ

Kế thừa các thông số kỹ thuật căn chỉnh

Việc căn chỉnh nội dung ô có thể được chỉ định trên cơ sở từng ô hoặc được kế thừa từ các phần tử kèm theo, chẳng hạn như hàng, cột hoặc chính bảng

Thứ tự ưu tiên (từ cao nhất đến thấp nhất) cho các thuộc tính , và như sau

  1. Thuộc tính căn chỉnh được đặt trên một thành phần trong dữ liệu của ô (e. g. , )
  2. Một thuộc tính căn chỉnh được đặt trên một ô ( và )
  3. Thuộc tính căn chỉnh được đặt trên phần tử nhóm cột ( và ). Khi một ô là một phần của khoảng nhiều cột, thuộc tính căn chỉnh được kế thừa từ định nghĩa ô ở đầu khoảng
  4. Thuộc tính căn chỉnh được đặt trên một hàng hoặc phần tử nhóm hàng (, , và ). Khi một ô là một phần của khoảng nhiều hàng, thuộc tính căn chỉnh được kế thừa từ định nghĩa ô ở đầu khoảng
  5. Thuộc tính căn chỉnh được đặt trên bảng ()
  6. Giá trị căn chỉnh mặc định

Thứ tự ưu tiên (từ cao nhất đến thấp nhất) cho thuộc tính (cũng như các thuộc tính kế thừa khác , và ) như sau

  1. Một thuộc tính được đặt trên một phần tử trong dữ liệu của một ô (e. g. , )
  2. Một thuộc tính được đặt trên một ô ( và )
  3. Thuộc tính được đặt trên một hàng hoặc phần tử nhóm hàng (, , và ). Khi một ô là một phần của khoảng nhiều hàng, giá trị thuộc tính được kế thừa từ định nghĩa ô ở đầu khoảng
  4. Một thuộc tính được đặt trên một phần tử nhóm cột ( và ). Khi một ô là một phần của khoảng nhiều cột, giá trị thuộc tính được kế thừa từ định nghĩa ô ở đầu khoảng
  5. Một thuộc tính được đặt trên bảng ()
  6. Giá trị thuộc tính mặc định

Hơn nữa, khi hiển thị các ô, căn chỉnh theo chiều ngang được xác định bởi các cột ưu tiên hơn so với các hàng, trong khi đối với căn chỉnh theo chiều dọc, các hàng được ưu tiên hơn các cột

Căn chỉnh mặc định cho các ô phụ thuộc vào tác nhân người dùng. Tuy nhiên, tác nhân người dùng nên thay thế thuộc tính mặc định cho hướng hiện tại (i. e. , không chỉ "trái" trong mọi trường hợp)

Tác nhân người dùng không hỗ trợ giá trị "biện minh" của thuộc tính nên sử dụng giá trị của hướng kế thừa ở vị trí của nó

Ghi chú. Lưu ý rằng một ô có thể kế thừa một thuộc tính không phải từ cha của nó mà từ ô đầu tiên trong một khoảng. Đây là một ngoại lệ đối với các quy tắc kế thừa thuộc tính chung

Định nghĩa thuộc tính

Cellspacing = Thuộc tính này chỉ định khoảng cách mà tác nhân người dùng nên để lại giữa phía bên trái của bảng và phía bên trái của cột ngoài cùng bên trái, đầu bảng và phía trên cùng của hàng trên cùng, v.v. . Thuộc tính này cũng chỉ định lượng không gian để lại giữa các ô. cellpadding = Thuộc tính này chỉ định khoảng cách giữa đường viền của ô và nội dung của nó. Nếu giá trị của thuộc tính này là độ dài pixel, thì cả bốn lề phải có khoảng cách này tính từ nội dung. Nếu giá trị của thuộc tính là độ dài phần trăm, thì lề trên và lề dưới phải được phân tách bằng nhau khỏi nội dung dựa trên phần trăm của không gian dọc có sẵn và lề trái và phải phải được phân tách bằng nhau khỏi nội dung dựa trên phần trăm

Hai thuộc tính này kiểm soát khoảng cách giữa và trong các ô. Hình minh họa sau đây giải thích cách chúng liên quan

Cách đặt số hàng trong bảng HTML

Trong ví dụ sau, thuộc tính chỉ định rằng các ô phải được tách biệt với nhau và với khung bảng bằng 20 pixel. Thuộc tính chỉ định rằng mỗi lề trên của ô và lề dưới của ô sẽ được phân tách khỏi nội dung của ô bằng 10% không gian dọc có sẵn (tổng cộng là 20%). Tương tự, lề trái của ô và lề phải của ô sẽ được phân tách khỏi nội dung của ô bằng 10% không gian ngang có sẵn (tổng cộng là 20%)

...the rest of the table...


9

Nếu một bảng hoặc cột nhất định có chiều rộng cố định và có thể yêu cầu nhiều không gian hơn mức được chỉ định. Tác nhân người dùng có thể ưu tiên các thuộc tính này hơn thuộc tính khi xung đột xảy ra, nhưng không bắt buộc phải

Các tác nhân người dùng không trực quan như bộ tổng hợp giọng nói và thiết bị dựa trên chữ nổi có thể sử dụng các thuộc tính phần tử và phần tử sau để hiển thị các ô của bảng một cách trực quan hơn

  • Đối với một ô dữ liệu nhất định, thuộc tính liệt kê những ô nào cung cấp thông tin tiêu đề thích hợp. Với mục đích này, mỗi ô tiêu đề phải được đặt tên bằng thuộc tính. Lưu ý rằng không phải lúc nào cũng có thể phân chia rõ ràng các ô thành tiêu đề hoặc dữ liệu. Bạn nên sử dụng phần tử cho các ô đó cùng với thuộc tính hoặc nếu thích hợp
  • Đối với một ô tiêu đề nhất định, thuộc tính cho tác nhân người dùng biết các ô dữ liệu mà tiêu đề này cung cấp thông tin. Tác giả có thể chọn sử dụng thuộc tính này thay cho thuộc tính nào thuận tiện hơn; . Thuộc tính thường cần thiết khi các tiêu đề được đặt ở các vị trí không đều đối với dữ liệu mà chúng áp dụng cho
  • Thuộc tính chỉ định tiêu đề viết tắt cho các ô tiêu đề để tác nhân người dùng có thể hiển thị thông tin tiêu đề nhanh hơn

Trong ví dụ sau, chúng tôi gán thông tin tiêu đề cho các ô bằng cách đặt thuộc tính. Mỗi ô trong cùng một cột đề cập đến cùng một ô tiêu đề (thông qua thuộc tính)

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
6

Bộ tổng hợp giọng nói có thể hiển thị bảng này như sau

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
1

Lưu ý cách tiêu đề "Loại cà phê" được viết tắt thành "Loại" bằng cách sử dụng thuộc tính

Đây là ví dụ tương tự thay thế thuộc tính cho thuộc tính. Lưu ý giá trị "col" cho thuộc tính, nghĩa là "tất cả các ô trong cột hiện tại"

          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
6

Đây là một ví dụ hơi phức tạp hơn minh họa các giá trị khác cho thuộc tính

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
3

Tác nhân người dùng đồ họa có thể hiển thị điều này dưới dạng

Cách đặt số hàng trong bảng HTML

Lưu ý việc sử dụng thuộc tính có giá trị "hàng". Mặc dù ô đầu tiên trong mỗi hàng chứa dữ liệu, không phải thông tin tiêu đề, nhưng thuộc tính làm cho ô dữ liệu hoạt động giống như ô tiêu đề hàng. Điều này cho phép bộ tổng hợp giọng nói cung cấp tên khóa học có liên quan theo yêu cầu hoặc nêu nó ngay trước nội dung của mỗi ô

Người dùng duyệt bảng có tác nhân người dùng dựa trên giọng nói có thể muốn nghe giải thích về nội dung của ô bên cạnh nội dung của chính họ. Một cách mà người dùng có thể đưa ra lời giải thích là đọc thông tin tiêu đề liên quan trước khi đọc nội dung của ô dữ liệu (xem phần trên)

Người dùng cũng có thể muốn thông tin về nhiều hơn một ô, trong trường hợp đó, thông tin tiêu đề được cung cấp ở cấp độ ô (bởi , và ) có thể không cung cấp ngữ cảnh đầy đủ. Xem xét bảng sau đây, trong đó phân loại chi phí ăn uống, khách sạn và phương tiện đi lại ở hai địa điểm (San Jose và Seattle) trong vài ngày

Cách đặt số hàng trong bảng HTML

Người dùng có thể muốn trích xuất thông tin từ bảng dưới dạng truy vấn

  • "Tôi đã tiêu bao nhiêu cho tất cả các bữa ăn của mình?"
  • "Tôi đã tiêu gì cho bữa ăn vào ngày 25 tháng 8?"
  • "Tôi đã tiêu gì cho tất cả các chi phí ở San Jose?"

Mỗi truy vấn liên quan đến một tính toán của tác nhân người dùng có thể liên quan đến 0 hoặc nhiều ô. Ví dụ, để xác định chi phí bữa ăn vào ngày 25 tháng 8, tác nhân người dùng phải biết ô nào trong bảng đề cập đến "Bữa ăn" (tất cả chúng) và ô nào đề cập đến "Ngày" (cụ thể là ngày 25 tháng 8) và tìm

Để phù hợp với loại truy vấn này, mô hình bảng HTML 4 cho phép tác giả đặt tiêu đề ô và dữ liệu vào danh mục. Ví dụ: đối với bảng chi phí đi lại, tác giả có thể nhóm các ô tiêu đề "San Jose" và "Seattle" vào danh mục "Địa điểm", các tiêu đề "Bữa ăn", "Khách sạn" và "Phương tiện" trong danh mục "Chi phí . Ba câu hỏi trước sau đó sẽ có ý nghĩa như sau

  • "Tôi đã tiêu bao nhiêu cho tất cả các bữa ăn của mình?"
  • "Tôi đã tiêu gì cho bữa ăn vào ngày 25 tháng 8?"
  • "Tôi đã tiêu gì cho tất cả các chi phí ở San Jose?"

Tác giả phân loại tiêu đề hoặc ô dữ liệu bằng cách đặt thuộc tính cho ô. Ví dụ, trong bảng chi phí đi lại, ô chứa thông tin "San Jose" có thể được đặt trong danh mục "Địa điểm" như sau

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
4

Bất kỳ ô nào chứa thông tin liên quan đến "San Jose" phải tham chiếu đến ô tiêu đề này thông qua thuộc tính hoặc. Do đó, chi phí bữa ăn cho ngày 25-Aug-1997 nên được đánh dấu để tham chiếu đến thuộc tính (có giá trị ở đây là "a6") của ô tiêu đề "San Jose"

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
5

Mỗi thuộc tính cung cấp một danh sách các tài liệu tham khảo. Do đó, các tác giả có thể phân loại một ô nhất định theo bất kỳ cách nào (hoặc, dọc theo bất kỳ số lượng "tiêu đề", do đó có tên)

Dưới đây chúng tôi đánh dấu bảng chi phí đi lại với thông tin danh mục

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
6

Lưu ý rằng việc đánh dấu bảng theo cách này cũng cho phép tác nhân người dùng tránh gây nhầm lẫn cho người dùng với thông tin không mong muốn. Ví dụ: nếu bộ tổng hợp giọng nói nói tất cả các số liệu trong cột "Bữa ăn" của bảng này để trả lời truy vấn "Tất cả chi phí cho bữa ăn của tôi là bao nhiêu?", thì người dùng sẽ không thể phân biệt chi phí trong ngày với . Bằng cách phân loại cẩn thận dữ liệu ô, tác giả cho phép tác nhân người dùng tạo ra sự phân biệt ngữ nghĩa quan trọng khi hiển thị

Tất nhiên, không có giới hạn về cách tác giả có thể phân loại thông tin trong một bảng. Ví dụ: trong bảng chi phí đi lại, chúng tôi có thể thêm các danh mục bổ sung "tổng phụ" và "tổng cộng"

Thông số kỹ thuật này không yêu cầu tác nhân người dùng xử lý thông tin do thuộc tính cung cấp, cũng như không đưa ra bất kỳ đề xuất nào về cách tác nhân người dùng có thể trình bày thông tin cho người dùng hoặc cách người dùng có thể truy vấn tác nhân người dùng về thông tin này

Tuy nhiên, các tác nhân người dùng, đặc biệt là bộ tổng hợp giọng nói, có thể muốn loại bỏ thông tin chung cho một số ô là kết quả của một truy vấn. Chẳng hạn, nếu người dùng hỏi "Tôi đã chi bao nhiêu tiền cho các bữa ăn ở San Jose?", tác nhân người dùng trước tiên sẽ xác định các ô được đề cập (25-Aug-1997. 37. 74, 26-Aug-1997. 27. 28), sau đó hiển thị thông tin này. Tác nhân người dùng nói thông tin này có thể đọc nó

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
7

hay nói gọn hơn

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
8

Một kết xuất kinh tế hơn sẽ tính đến thông tin phổ biến và sắp xếp lại thông tin đó

THEAD    - O (TR)+           -- table header -->
TFOOT    - O (TR)+           -- table footer -->
9

Tác nhân người dùng hỗ trợ loại hiển thị này sẽ cho phép tác nhân người dùng phương tiện để tùy chỉnh hiển thị (e. g. , thông qua biểu định kiểu)

Trong trường hợp không có thông tin tiêu đề từ thuộc tính hoặc, tác nhân người dùng có thể xây dựng thông tin tiêu đề theo thuật toán sau. Mục tiêu của thuật toán là tìm một danh sách các tiêu đề được sắp xếp theo thứ tự. (Trong phần mô tả thuật toán sau đây, thuật toán được giả định là từ trái sang phải. )

  • Đầu tiên, tìm kiếm bên trái từ vị trí của ô để tìm ô tiêu đề hàng. Sau đó tìm kiếm lên trên để tìm các ô tiêu đề cột. Quá trình tìm kiếm theo một hướng nhất định sẽ dừng khi đến cạnh của bảng hoặc khi tìm thấy ô dữ liệu sau ô tiêu đề
  • Tiêu đề hàng được chèn vào danh sách theo thứ tự chúng xuất hiện trong bảng. Đối với bảng từ trái sang phải, tiêu đề được chèn từ trái sang phải
  • Tiêu đề cột được chèn sau tiêu đề hàng, theo thứ tự xuất hiện trong bảng, từ trên xuống dưới
  • Nếu một ô tiêu đề có tập thuộc tính, thì các tiêu đề được tham chiếu bởi thuộc tính này sẽ được chèn vào danh sách và quá trình tìm kiếm hướng hiện tại sẽ dừng lại
  • các ô đặt thuộc tính cũng được coi là các ô tiêu đề

Mẫu này minh họa các hàng và cột được nhóm. Ví dụ này được chuyển thể từ "Phát triển phần mềm quốc tế", của Nadine Kano

Trong "ascii art", bảng sau

TBODY    O O (TR)+           -- table body -->
0

sẽ được trả lại một cái gì đó như thế này

TBODY    O O (TR)+           -- table body -->
1

Tác nhân người dùng đồ họa có thể hiển thị điều này dưới dạng

Cách đặt số hàng trong bảng HTML

Ví dụ này minh họa cách có thể được sử dụng để nhóm các cột và đặt căn chỉnh cột mặc định. Tương tự, được sử dụng để nhóm các hàng. Các thuộc tính và cho tác nhân người dùng biết đường viền và quy tắc nào sẽ hiển thị