Thẻ nào thêm dữ liệu mới vào bảng html?
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 ô Show Mỗi bảng có thể có chú thích liên quan (xem phần CAPTION) 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 tóm tắt) 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ác hàng của bảng có thể được nhóm thành phần đầu, phần chân và phần thân (tương ứng thông qua các phần tử THEAD, TFOOT và TBODY). 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 Tác giả cũng có thể nhóm các cột để 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, các 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ử COLGROUP và COL) theo cách cho phép các 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ác ô của bảng có thể chứa thông tin "tiêu đề" (xem phần tử TH) hoặc "dữ liệu" (xem phần tử TD). 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ác tác nhân người dùng không trực quan 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 summary = text [CS]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ị 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. phải [CI]Không dùng nữa. 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ử TABLE 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ử COLGROUP và COL. 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 tính chiều rộng của cột), 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 dir cho phần tử TABLE Đố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 tác nhân người dùng phân bổ các ô bổ sung cho một hàng (xem phần tính toán số lượng cột trong bảng), 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 bảng từ trái sang phải và bên trái đối với bảng bên phải. Lưu ý rằng TABLE là phần tử duy nhất mà dir đảo ngược thứ tự trực quan của các cột; Khi được đặt cho phần tử TABLE, thuộc tính dir 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 dir đượ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 dir 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 dir trong một phần tử xác định ô. Vui lòng tham khảo phần về văn bản hai chiều để biết thêm thông tin về các vấn đề về 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. phải [CI]Không dùng nữa. Đố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ử CAPTION sẽ mô tả bản chất của bảng. Phần tử CAPTION chỉ được phép ngay sau thẻ bắt đầu TABLE. Phần tử BẢNG chỉ có thể chứa một phần tử CAPTION 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 việc này là các 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 tóm tắt của phần tử TABLE. Đ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 tóm tắt 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 văn bản chú thích nên được bao bọc theo cùng chiều rộng với bảng. (Xem thêm phần về thuật toán bố cục được đề xuất. ) 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ử THEAD, TFOOT và TBODY 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 xuất hiện, mỗi THEAD, TFOOT và TBODY 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ử TR 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... TFOOT phải xuất hiện trước TBODY trong định nghĩa TABLE để 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 THEAD, TFOOT và TBODY phải chứa cùng một 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 quy tắc cho phần tử TABLE). Để 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 bảng mẫu Một bảng có thể chứa một nhóm cột ngầm định duy nhất (không có phần tử COLGROUP 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ử COLGROUP) Phần tử COL cho phép tác giả chia sẻ các thuộc tính giữa một số cột mà không ngụ ý bất kỳ nhóm cấu trúc nào. "Span" của phần tử COL 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 = number [CN]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ử COLGROUP chứa một hoặc nhiều phần tử COL chiều rộng = nhiều chiều dài [CN]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*" (không có dấu hoa thị) có 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ó chiều rộng được chỉ định thông qua phần tử COL Các thuộc tính được xác định ở nơi khác Phần tử COLGROUP 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 span là 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ố 8Khi 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 phần tử COL. 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 chiều rộng của phần tử COLGROUP được kế thừa bởi tất cả 40 cột. Phần tử COL đầ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 giá trị id 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 = number [CN]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ử COL; . Giá trị mặc định cho thuộc tính này là 1 (i. e. , phần tử COL chỉ một cột). Nếu thuộc tính span được đặt thành N > 1, thì phần tử COL hiện tại sẽ chia sẻ các thuộc tính của nó với N-1 cột tiếp theo. width = multi-length [CN]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ử COL hiện tại. Nó có ý nghĩa tương tự như thuộc tính chiều rộng cho phần tử COLGROUP và ghi đè lên nóCác thuộc tính được xác định ở nơi khác Phần tử COL 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. COL 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ử COLGROUP. Các phần tử COL 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. , phần tử COLGROUP) Thuộc tính chiều rộng cho COL đề 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 các phần tử COLGROUP hoặc COL 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 các nhóm cột 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ử TABLE, 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 được 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, thì tác nhân người dùng có thể không định dạng được bảng theo từng bước 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 chiều rộng cho phần tử TABLE 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 căn chỉ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ế, COL cuối cùng thực hiện điều đó, bằng cách xác định rằng mọi ô trong cột mà nó chi phối sẽ được căn chỉnh dọc theo ". " tính cách 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ử COL chỉ xuất hiện để giá trị id có thể được chỉ định cho hai cột cuối cùng Ghi chú. Mặc dù thuộc tính chiều rộng trên phần tử TABLE 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ử TR 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ằng phần tử TR 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 = idrefs [CS]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 tiêu đề để 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. phạm vi = tên phạm vi [CI] 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 tiêu đề, đặ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ử TH định nghĩa 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ử TH và giá trị của thuộc tính abbr. 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 abbr. Đố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, abbr 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 tiêu đề và phạm vi 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 về các ô ghi nhãn cho các tác nhân người dùng không trực quan để biết thông tin và ví dụ Phần tử TD 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 theo thuộc tính rowspan và colspan cho các phần tử TH và TD 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 đó, TD 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 TD "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 TD 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, [CSS1] đã 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ừ đó, [CSS2] đã 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. ở trên. phía dưới. hai bên. lhs. rhs. bên cạnh. hộp. đường viền [CI]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ể thiết lập thuộc tính đường viền của phần tử TABLE. 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. bên phải. biện minh. ký tự [CI] . Những giá trị khả thi.
Khi charoff được sử dụng để đặt độ lệch của ký tự căn chỉnh, . 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. 30Bả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 char và gói 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 ký tự 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ử TH đượ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 align, char và charoff như sau
Thứ tự ưu tiên (từ cao nhất đến thấp nhất) cho thuộc tính valign (cũng như các thuộc tính kế thừa khác lang, dir và style) 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 căn chỉ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 = length [CN]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à . Thuộc tính này cũng chỉ định lượng không gian để lại giữa các ô. cellpadding = length [CN]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 tỷ lệ 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 tỷ lệ 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 không gian ô xác đị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 cellpadding 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 một cột nhất định có chiều rộng cố định, tính năng tạo không gian cho các ô và đệm cho các ô 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 chiều rộng khi xảy ra xung đột, 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ử TD và TH 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 tiêu đề. 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 id) 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 abbr Đây là ví dụ tương tự thay thế thuộc tính phạm vi cho thuộc tính tiêu đề. Lưu ý giá trị "col" cho thuộc tính phạm vi, 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ụ phức tạp hơn một chút minh họa các giá trị khác cho thuộc tính phạm vi 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 phạm vi với 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 đề, thuộc tính phạm vi 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à nói thông tin tiêu đề được liên kết trước khi nói nội dung của ô dữ liệu (xem phần liên kết thông tin tiêu đề với các ô dữ liệu) 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 độ ô (theo tiêu đề, phạm vi và abbr) 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 trục 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 tiêu đề hoặc thuộc tính phạm vi. 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 id (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 tiêu đề cung cấp một danh sách các tham chiếu id. 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 axis 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 trục 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ừ phạm vi hoặc thuộc tính tiêu đề, 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, hướng của bảng đượ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 COLGROUP 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ự, TBODY được sử dụng để nhóm các hàng. Các thuộc tính khung và quy tắc cho tác nhân người dùng biết đường viền và quy tắc nào sẽ hiển thị Thẻ nào có thể được sử dụng để thêm dữ liệu vào bảng trong HTML?Các ô trong bảng. Mỗi ô của bảng được xác định bởi thẻ | . td là viết tắt của dữ liệu bảng.
tag is used to create data cells.
Thẻ nào sau đây tạo cột mới trong bảng? |