Thẻ nào thêm dữ liệu mới vào bảng html?

. td là viết tắt của dữ liệu bảng.

Thẻ nào thêm dữ liệu mới vào bảng HTML, câu hỏi này là bắt buộc?

Để xác định các hàng, hãy thêm thẻ Table Row(tr) bên dưới bảng. Đối với tiêu đề bảng, hãy sử dụng thẻ Tiêu đề bảng (th) trong hàng cụ thể. Để thêm dữ liệu vào bảng, hãy tạo một hàng và sử dụng thẻ “td” để chèn dữ liệu vào bên trong mỗi hàng.

Thẻ nào được sử dụng để thêm dữ liệu bảng trong bảng?

The

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

Thẻ nào thêm dữ liệu mới vào 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

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
  • 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
  • bên phải. Bảng nằm bên phải tài liệu
width = length [CN]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ử 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

  • Cung cấp tóm tắt 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 số cột trong bảng. Lưu ý rằng số lượng hàng trong một bảng bằng với số phần tử TR có trong phần tử TABLE
  • Nhóm các cột theo bất kỳ thông số nhóm cộ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 nên định dạng bảng theo thuộc tính HTML và đặc 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ử 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ướ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 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
  • đứ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
  • bên phải. 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ử 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

  • Thẻ bắt đầu TBODY 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 TBODY luôn có thể được bỏ qua một cách an toàn
  • Các thẻ bắt đầu cho THEAD và TFOOT được yêu cầu khi có phần đầu và phần chân của bảng tương ứng, nhưng các thẻ kết thúc tương ứng có thể luôn đượ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 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ử 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 = 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
  • Trong trường hợp không có thuộc tính span, mỗi COLGROUP xác định một nhóm cột chứa một cột
  • Nếu thuộc tính span được đặt thành N > 0, thì phần tử COLGROUP 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ử 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

  1. Thuộc tính span của phần tử (giá trị mặc định 1) chỉ định số cột trong nhóm
  2. Mỗi phần tử COL trong COLGROUP đạ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 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ố 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 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ử COL

thẻ 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ả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ử TABLE chứa bất kỳ phần tử COLGROUP hoặc COL nào, tác nhân người dùng nên tính số lượng cột bằng cách tính tổng các giá trị sau
    • Đối với mỗi phần tử COL, lấy giá trị thuộc tính span của nó (giá trị mặc định 1)
    • Đối với mỗi phần tử COLGROUP chứa ít nhất một phần tử COL, hãy bỏ qua thuộc tính span cho phần tử COLGROUP. Với mỗi phần tử COL, thực hiện phép tính của bước 1
    • Đối với mỗi phần tử COLGROUP trống, hãy lấy giá trị của thuộc tính span của nó (giá trị mặc định 1)
  2. Mặt khác, nếu phần tử TABLE không chứa phần tử COLGROUP hoặc COL, 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 hướng của bảng

Đó 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ộ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ử 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
  • hàng ngang. Ô 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 về hướng của bảng)
  • 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 của nhóm hàng 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 của nhóm cột chứa nó
abbr = text [CS] 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 = cdata [CI]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 phân loại ô để 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 = number [CN]Thuộc tính này chỉ định số hàng được 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à ô 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 (THEAD, TBODY hoặc TFOOT) trong đó ô được xác định. colspan = number [CN]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ị không ("0") có nghĩa là ô mở rộng 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 (COLGROUP) trong đó ô được xác định. nowrap [CI]Không dùng nữa. 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 = chiều dài [CN]Không dùng nữa. Thuộc tính này cung cấp cho tác nhân người dùng chiều rộng ô được khuyến nghị. chiều cao = chiều dài [CN]Không dùng nữa. 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ử 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ộ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 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

Thẻ nào thêm dữ liệu mới vào bảng html?

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

Thẻ nào thêm dữ liệu mới vào 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, [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
  • khoảng trống. không có bên. Đây là giá trị mặc định
  • ở 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 [CI]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 THEAD, TFOOT và TBODY) và các nhóm cột (xem COLGROUP và COL)
  • 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
border = pixels [CN]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ể 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

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

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.
  • 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
  • bên phải. 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 = . ở giữa. đáy. đường cơ sở [CI] . 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 ô
  • ở giữa. 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
char = ký tự [CN] . 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 do ngôn ngữ đặt . 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. charoff = chiều dài [CN] . 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 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. 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 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ỉ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 align, char và charoff 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. , P)
  2. Thuộc tính căn chỉnh được đặt trên một ô (TH và TD)
  3. Thuộc tính căn chỉnh được đặt trên phần tử nhóm cột (COL và COLGROUP). 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 (TR, THEAD, TFOOT và TBODY). 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 (TABLE)
  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 valign (cũng như các thuộc tính kế thừa khác lang, dir và style) 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. , P)
  2. Một thuộc tính được đặt trên một ô (TH và TD)
  3. Thuộc tính được đặt trên một hàng hoặc phần tử nhóm hàng (TR, THEAD, TFOOT và TBODY). 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 (COL và COLGROUP). 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 (TABLE)
  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 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ă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

Thẻ nào thêm dữ liệu mới vào bảng html?

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

  • Đối với một ô dữ liệu nhất định, thuộc tính tiêu đề 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 id. 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ử TD cho các ô đó cùng với thuộc tính id hoặc phạm vi phù hợp
  • Đối với một ô tiêu đề nhất định, thuộc tính phạm vi 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 tiêu đề theo cách nào thuận tiện hơn; . Thuộc tính tiêu đề thường cần thiết khi các tiêu đề được đặt ở các vị trí bất thường đối với dữ liệu mà chúng áp dụng cho
  • Thuộc tính abbr 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 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

Thẻ nào thêm dữ liệu mới vào bảng html?

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

Thẻ nào thêm dữ liệu mới vào 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 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. )

  • Đầ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 thuộc tính tiêu đề, 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à việc tìm kiếm hướng hiện tại sẽ dừng lại
  • Các ô TD đặt thuộc tính trục 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

Thẻ nào thêm dữ liệu mới vào bảng html?

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ẻ
tag is used within the tag to generate HTML tables. The tag is used to produce table rows and the . Phần tử cột bảng. Phần tử HTML

tag is used to create data cells.

Thẻ nào sau đây tạo cột mới trong bảng?