Biểu mẫu so với bảng HTML

Công tyLiên hệQuốc giaAlfreds FutterkisteMaria AndersĐứcTrung tâm thương mại MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelÁoThương mại trên đảoHelen BennettVương quốc AnhHầm rượu Laughing BacchusYoshi TannamuriCanadaMagazzini Alimentari RiunitiGiovanni RovelliÝ

Tự mình thử »

Xác định một bảng HTML

Một bảng trong HTML bao gồm các ô của bảng bên trong các hàng và cột

Ví dụ

Một bảng HTML đơn giản

 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

Công tyLiên hệQuốc giaAlfreds FutterkisteMaria AndersĐứcTrung tâm thương mại MoctezumaFrancisco ChangMexico

Tự mình thử »

ô bảng

Mỗi ô của bảng được xác định bởi một và một thẻ

Mọi thứ ở giữa và là nội dung của ô bảng

Ví dụ

 
   
   
   
 

EmilTobiasLinus

Tự mình thử »

Ghi chú. Một ô của bảng có thể chứa tất cả các loại phần tử HTML. văn bản, hình ảnh, danh sách, liên kết, bảng khác, v.v.

hàng bảng

Mỗi hàng của bảng bắt đầu bằng a và kết thúc bằng thẻ

Ví dụ

 
   
   
   
 
 
   
   
   
 

EmilTobiasLinus161410

Tự mình thử »

Bạn có thể có bao nhiêu hàng tùy thích trong một bảng;

Ghi chú. Đôi khi một hàng có thể có ít hoặc nhiều ô hơn hàng khác. Bạn sẽ tìm hiểu về điều đó trong một chương sau

Tiêu đề bảng

Đôi khi bạn muốn các ô của mình là các ô tiêu đề của bảng. Trong những trường hợp đó, hãy sử dụng thẻ thay vì thẻ

Thường được xem như một công cụ bố trí, các bảng được coi là một phương pháp để thể hiện các quan hệ cấu trúc. Ví dụ: các bảng có thể được dùng để biểu thị mối quan hệ giữa các trường nhập và phần giải thích của chúng trong một biểu mẫu. Tài liệu này thảo luận về các chi tiết kỹ thuật liên quan

Nội dung

Bảng và biểu mẫu là các khái niệm riêng biệt trong HTML. Mọi người đôi khi nhầm lẫn chúng với nhau. Sự nhầm lẫn về khái niệm thường đi kèm với đánh dấu nhầm lẫn. Mặt khác, các bảng và biểu mẫu có thể được "trộn lẫn" theo nghĩa. Cụ thể, bạn có thể đặt một bảng bên trong một biểu mẫu hoặc ngược lại, và điều này thường rất hữu ích. Nhưng bạn cần phải hiểu những gì bạn đang làm

Các bảng và biểu mẫu có thể được lồng vào nhau theo một trong hai cách. Nhưng nếu bạn đặt các biểu mẫu vào các bảng, thì mỗi biểu mẫu phải được đưa hoàn toàn vào một ô của bảng [trong thực tế là một phần tử

  
    Your name
    
      
    
  

0]. Do đó, các hình thức là hoàn toàn độc lập. Xem tài liệu của tôi về các lựa chọn ở dạng HTML để biết một số ví dụ đơn giản

Những gì mọi người có thể muốn làm thường xuyên hơn là lồng chúng theo cách khác. một phần tử

  
    Your name
    
      
    
  

1 bên trong một phần tử

  
    Your name
    
      
    
  

2. Sau đó, tất cả các trường biểu mẫu trong các ô của bảng, nằm trong phần tử

  
    Your name
    
      
    
  

3 trong phần tử

  
    Your name
    
      
    
  

1 nằm trong phần tử

  
    Your name
    
      
    
  

2, là các trường có cùng biểu mẫu

Việc đặt các trường của biểu mẫu vào bảng [trong phần tử

  
    Your name
    
      
    
  

2] có hữu ích hay không thực sự phụ thuộc vào biểu mẫu. Vì một số lý do kỳ lạ, những người thiết kế biểu mẫu HTML thường bị mắc kẹt với ý tưởng về cách biểu mẫu được thiết kế cho giấy. Họ đặt một số câu hỏi không liên quan vào một hàng như thể điều quan trọng là tiết kiệm giấy. Do đó, các biểu mẫu trở nên khó điền hơn, vì thứ tự điền dự định không rõ ràng. Theo hàng và theo cột? . Và sau khi tạo ra một thứ tự lộn xộn, các tác giả bắt đầu tự hỏi làm thế nào để xác định thứ tự tab và những thứ tương tự

Tốt nhất là tổ chức các biểu mẫu một cách đơn giản. không sử dụng bảng để buộc một số bố cục cụ thể nhưng để chỉ ra cấu trúc khi cần. Các trình duyệt phải trình bày các bảng và tài liệu HTML nói chung theo cách tương ứng với cấu trúc được thể hiện trong HTML

Lấy một ví dụ khá phổ biến. Giả sử rằng bạn muốn cho phép người dùng chọn sản phẩm từ danh sách và mẫu đơn đặt hàng. Có thể thông tin sản phẩm bao gồm một số trường như tên sản phẩm, số đơn đặt hàng và đơn giá cho từng sản phẩm. Điều này có nghĩa là bản thân dữ liệu vốn đã ở dạng bảng. Tại sao không làm cho nó bảng? . Có một số kỹ thuật liên quan ở đây;

Ví dụ đơn giản, hãy xem xét tình huống trong đó một số văn bản [nhãn trường hoặc thứ gì đó tương tự] được liên kết với trường nhập liệu. [Có nhiều cách tốt hơn để làm điều đó về nguyên tắc trong HTML 4. 0, nhưng hiện tại ý tưởng bảng có thể tốt hơn. ] Bạn có thể thiết lập một bảng trong đó cột đầu tiên chứa văn bản và cột thứ hai chứa các trường nhập liệu tương ứng

________số 8

Trên trình duyệt hiện tại của bạn với cài đặt hiện tại, điều này sẽ xuất hiện như sau

Tên của bạn Địa chỉ Email của bạn

Bản trình bày có thể bị ảnh hưởng bởi biểu định kiểu. Đặc biệt, tài liệu này đi kèm với một biểu định kiểu đưa ra một số gợi ý về cách trình bày, vì vậy cách trình bày có thể khác với cách hiển thị biểu mẫu thông thường của trình duyệt của bạn. Xem tài liệu Ảnh hưởng đến việc trình bày các trường biểu mẫu trên các trang Web

Một trường hợp điển hình khác để sử dụng bảng là tổ chức một tập hợp các nút radio. Có điều này trong Lựa chọn ở dạng HTML cũng như

Mặc dù phương pháp này có thể được sử dụng cho một biểu mẫu có số lượng trường lớn, nhưng một lời cảnh báo thực tế là theo thứ tự. bảng càng lớn thì trình duyệt càng mất nhiều thời gian để hiển thị bảng. [Trình duyệt phải xử lý toàn bộ bảng trước khi hiển thị bất kỳ thứ gì trong đó, vì nó phải tính đến tất cả các ô khi chọn độ rộng cột phù hợp. ] Có lẽ bạn có thể chia nội dung của một biểu mẫu thành các phần chính, với các tiêu đề và cấu trúc từng phần riêng biệt dưới dạng một bảng nhỏ

Lưu ý rằng trong nút gửi của chúng tôi nằm ngoài bảng. Lý do là nó có vai trò khác với các lĩnh vực khác. Nó cũng có thể nằm trong bảng, nhưng có lẽ sẽ dễ tìm hơn nếu không có

Cũng lưu ý rằng trái ngược với niềm tin phổ biến của các tác giả, a không bắt buộc hoặc thậm chí không hữu ích, như một quy luật. Nó đặc biệt nguy hiểm khi được trình bày cùng với nút gửi

Ví dụ của chúng tôi sử dụng đánh dấu phần tử

  
    Your name
    
      
    
  

0 [ô dữ liệu bảng] cho tất cả các ô, cả ô chứa trường biểu mẫu và ô chứa tiêu đề cho trường. Có thể hợp lý hơn nếu coi cái sau là tiêu đề và sử dụng đánh dấu

  
    Your name
    
      
    
  

9 [ô tiêu đề bảng]. Ví dụ

  
    Your name
    
      
    
  

Một bản trình bày điển hình của các phần tử

  
    Your name
    
      
    
  

9 sử dụng kiểu nhấn mạnh hơn cho các ô

  
    Your name
    
      
    
  

0, e. g. bằng cách sử dụng khuôn mặt đậm. Ngoài ra, theo mặc định, nội dung của ô tiêu đề được căn giữa trong khi các ô thông thường được căn trái; . Phần sau đây cho biết cách trình duyệt của bạn hiển thị [có lẽ bị ảnh hưởng bởi biểu định kiểu được đề xuất trong tài liệu này] biểu mẫu mẫu của chúng tôi khi đánh dấu

  
    Your name
    
      
    
  

9 được sử dụng cho các văn bản có tiêu đề trường hợp lý

Tên của bạn Địa chỉ Email của bạn

Khi các bảng và biểu mẫu được lồng vào nhau [cả hai cách], có một số lượng lớn các yếu tố đặc biệt ảnh hưởng đến giao diện của trang, chẳng hạn như

• sự khác biệt giữa trình duyệt và cài đặt trình duyệt
• đánh dấu HTML cơ bản, chẳng hạn như [xem ở trên]
• thuộc tính trong thẻ liên quan đến bảng, chẳng hạn như

    
      Your name
      
        
      
    

  46 và

    
      Your name
      
        
      
    

  47 trong thẻ

    
      Your name
      
        
      
    

  48 và thuộc tính

    
      Your name
      
        
      
    

  49 và

    
      Your name
      
        
      
    

  00 trong thẻ

    
      Your name
      
        
      
    

  45 và

    
      Your name
      
        
      
    

  44
• thuộc tính trong đánh dấu biểu mẫu [e. g. thuộc tính

    
      Your name
      
        
      
    

  03 trong thẻ

    
      Your name
      
        
      
    

  04;
• biểu định kiểu, có thể được sử dụng theo một số cách, nhưng cũng thường có các hiệu ứng không mong muốn do lỗi trình duyệt

Tài liệu Ảnh hưởng đến việc trình bày các trường biểu mẫu trên các trang Web thảo luận chi tiết về các vấn đề liên quan đến biểu mẫu. Đối với bảng, hãy xem phần về bảng trong tài liệu của tôi về HTML 3. 2 cho những điều cơ bản, và e. g. phần Bảng trong Mikodocs để biết các vấn đề nâng cao hơn

Liên quan đến các vấn đề cụ thể đối với sự kết hợp giữa bảng và biểu mẫu, hãy lưu ý rằng nếu bạn đặt một biểu mẫu vào một ô của bảng, thì bạn có thể có thêm một số khoảng trắng không mong muốn bên dưới biểu mẫu. Có nhiều cách khác nhau để cố gắng ngăn chặn điều đó. Nếu chỉ có một biểu mẫu trong bảng, một trong các cách là sao cho biểu mẫu và bảng được lồng vào nhau theo cách khác. biểu mẫu chứa bảng, mặc dù chỉ có một ô chứa các trường của biểu mẫu. Về mặt kỹ thuật, bạn chỉ cần di chuyển thẻ bắt đầu và thẻ kết thúc của biểu mẫu. Điều này có nghĩa giống như sau [trong trường hợp biểu mẫu xuất hiện ở ô cuối cùng của bảng]

Đánh dấu chưa sửa đổi Đánh dấu đã sửa đổi

  
    Your name
    
      
    
  

4

  
    Your name
    
      
    
  

0

Đánh dấu đã sửa đổi có thể trông phi logic, vì về mặt cấu trúc, không cần phải có tất cả nội dung trong các ô khác bên trong biểu mẫu. Nhưng nó có thể được thực hiện bằng HTML hợp lệ và có ý nghĩa rõ ràng. khi biểu mẫu được gửi, chỉ các trường của biểu mẫu là quan trọng, vì vậy nội dung khác trong biểu mẫu không ảnh hưởng đến cách thức hoạt động của biểu mẫu. Và vì khoảng cách thừa [có thể xảy ra] sau một biểu mẫu chỉ xuất hiện sau toàn bộ bảng, nên vấn đề trình bày được loại bỏ hoặc ít nhất là ít quan trọng hơn

Tuy nhiên, có những vấn đề sau với cách tiếp cận này, trong đó phần tử

  
    Your name
    
      
    
  

05 chứa nhiều hơn những gì cấu thành một biểu mẫu một cách logic. Một trình duyệt trực quan có thể có [e. g. , do biểu định kiểu người dùng] một bản trình bày đặc biệt cho toàn bộ biểu mẫu, e. g. sử dụng màu nền hoặc hình ảnh đặc biệt để làm cho cấu trúc rõ ràng. Khi đánh dấu không hợp lý, người dùng sẽ bối rối. Tương tự, tác nhân người dùng dựa trên lời nói có thể cho biết phần đầu của một biểu mẫu bằng cách nói, ví dụ: "bắt đầu biểu mẫu 1". Điều này thật khó hiểu, nếu thời điểm bắt đầu thực tế của biểu mẫu còn xa

Tất nhiên, bạn có thể bỏ qua các bảng trong các biểu mẫu. Bạn chỉ có thể viết e. g

  
    Your name
    
      
    
  

8

Trên trình duyệt hiện tại của bạn với cài đặt hiện tại, điều này sẽ xuất hiện như sau

Tên của bạn.
Địa chỉ email của bạn.

Các phần tử

  
    Your name
    
      
    
  

06 gây ngắt dòng. Việc bạn thích phong cách này hơn là sử dụng bảng hay không phần lớn là vấn đề về sở thích. Sự khác biệt chính trong cách trình bày điển hình là khi sử dụng bảng, các trường nhập liệu "xếp hàng" tạo thành một cột. Và biểu định kiểu hoặc thuộc tính trình bày trong các thành phần liên quan đến bảng có thể được sử dụng để gợi ý các chi tiết của bản trình bày.

Bạn cũng có thể biến mỗi cặp tiêu đề trường và phần tử trường thành một đoạn riêng biệt, phần tử

  
    Your name
    
      
    
  

07, e. g

  
    Your name
    
      
    
  

1

Trên trình duyệt hiện tại của bạn với cài đặt hiện tại, điều này sẽ xuất hiện như sau

Tên của bạn

Địa chỉ email của bạn

Mặc dù một số người có thể nói rằng điều này sẽ lãng phí dung lượng, nhưng việc sử dụng một số không gian trống theo chiều dọc [do cách trình bày đoạn văn của trình duyệt gây ra] không thực sự lãng phí

Nhưng vì có thể lập luận rằng tên trường và trường không tạo thành một đoạn văn, nên bạn có thể sử dụng các phần tử

  
    Your name
    
      
    
  

08 thay vì phần tử

  
    Your name
    
      
    
  

07. Điều này sẽ không giới thiệu thêm khoảng cách dọc

Một cách để cấu trúc biểu mẫu là phần tử

  
    Your name
    
      
    
  

80

  
    Your name
    
      
    
  

5

Phần sau đây trình bày biểu mẫu trên trình duyệt hiện tại của bạn [ở bên trái] và trên IE 4 [ở bên phải]

Tên của bạn Địa chỉ Email của bạn

Cũng có thể kết hợp việc sử dụng

  
    Your name
    
      
    
  

80 với việc sử dụng bảng để cấu trúc hóa e. g. một tập hợp các nút radio. Đối với nút radio và hộp kiểm, phương pháp thông thường là đặt văn bản được liên kết sau nút radio hoặc hộp kiểm. Điều này hơi phi logic nhưng phổ biến đến mức các công cụ trợ năng có thể xử lý nó tốt hơn thứ tự logic. Ví dụ.

  
    Your name
    
      
    
  

7

Điều này dẫn đến phần trình bày sau trên trình duyệt hiện tại của bạn

Có lẽ sẽ tốt hơn [ít nhất là trong những trường hợp như thế này, khi có một số lượng nhỏ các lựa chọn thay thế] nếu chú giải [về mặt logic là tiêu đề cho tập hợp các nút radio] xuất hiện cùng dòng với các lựa chọn thay thế. Nhưng cú pháp của

  
    Your name
    
      
    
  

80 khiến điều này là không thể. phần tử đầu tiên phải là

  
    Your name
    
      
    
  

83, vì vậy người ta không thể tổ chức chú giải và các nút có nhãn của chúng thành một hàng trong bảng

Vì lý do trợ năng và để rõ ràng, sẽ tốt hơn nếu mỗi phương án xuất hiện trên một dòng [hàng] của riêng nó, sử dụng phương pháp tương tự như trên nhưng bảng một cột thay vì bảng một hàng. Ví dụ

Mặt khác, theo cách tiếp cận này, việc đánh dấu bảng là không cần thiết. Bạn chỉ có thể bọc từng phần tử

  
    Your name
    
      
    
  

84 bên trong phần tử

  
    Your name
    
      
    
  

08

Tôi thường lập luận rằng cấu trúc như vậy là bảng cấu trúc [dữ liệu dạng bảng], không phải bảng bố cục. Nó thể hiện cấu trúc hai chiều của dữ liệu trong biểu mẫu, bao gồm các trường đầu vào. Nhưng nhiều người không đồng tình. Dù sao đi nữa, hãy xem xét cách bạn có thể đạt được bố cục dạng bảng cho biểu mẫu mà không cần sử dụng bảng

Có nhiều cách tiếp cận khác nhau, nhưng một cách đơn giản là như thế này. Trong HTML, bên trong phần tử

  
    Your name
    
      
    
  

05, hãy sử dụng một cái gì đó như

  
    Your name
    
      
    
  

3

Điều này hoạt động mà không cần CSS, mặc dù không có bố cục đẹp. Đối với bố cục, bạn có thể sử dụng CSS để đề xuất chiều rộng chung cho các phần tử

  
    Your name
    
      
    
  

87. Đây là phỏng đoán ở một mức độ nào đó, vì bạn muốn có chiều rộng đủ cho tất cả các nhãn, nhưng không rộng hơn mức cần thiết. Ví dụ

Sự khác biệt giữa biểu mẫu và bảng là gì?

Biểu mẫu và bảng HTML là gì?

Tôi có nên sử dụng bảng cho biểu mẫu không?

Tôi có thể sử dụng biểu mẫu có bảng HTML không?