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 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 11. 2 Yếu tố để xây dựng bảngthẻ 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
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
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ướngHướ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
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
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ử COLGROUPthẻ 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
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
Ư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ử COLthẻ 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ảngCó hai cách để xác định số cột trong bảng (theo thứ tự ưu tiên)
Đó 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ộtTá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
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ộtCá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 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 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
Để 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
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.
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 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ỉnhViệ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
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
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ămHai 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 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
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 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 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
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á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. )
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 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ị |