Các phần tử nhóm html

Phần tử

8 trong HTML được sử dụng để hiển thị dữ liệu dạng bảng. Bạn có thể coi đó là một cách để mô tả và hiển thị dữ liệu có ý nghĩa trong phần mềm bảng tính. bản chất. cột và hàng. Trong bài viết này, chúng ta sẽ xem xét cách sử dụng chúng, khi nào nên sử dụng chúng và mọi thứ khác mà bạn cần biết

Một ví dụ rất cơ bản

Đây là bản demo rất đơn giản của dữ liệu dạng bảng

Dự phòng nhúng CodePen

Đó là dữ liệu hữu ích trên nhiều trục. Hãy tưởng tượng bạn lướt ngón tay trên một hàng (ngang) để xem một người và thông tin liên quan về họ. Hoặc lên và xuống một cột (dọc) để hiểu về sự đa dạng hoặc mẫu dữ liệu tại điểm đó

đầu và cơ thể

Một điều chúng tôi đã không làm trong ví dụ rất cơ bản ở trên là chỉ ra về mặt ngữ nghĩa rằng hàng đầu tiên là tiêu đề của bảng. Chúng ta có lẽ nên có. Toàn bộ hàng đầu tiên đó không chứa dữ liệu, nó chỉ đơn giản là tiêu đề của các cột. Chúng ta có thể làm điều đó với phần tử

9, phần tử này sẽ bao bọc phần tử

display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */0 đầu tiên (nó có thể bao bọc bao nhiêu hàng mà tất cả đều là thông tin tiêu đề nếu cần)
HTML đó sẽ như thế này
Dự phòng nhúng CodePen
Khi bạn sử dụng 

  

    

    

    

  
  

    

    

    

  
9, không được có 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */0 là con trực tiếp của 

  

    

    

    

  
  

    

    

    

  
8. Tất cả các hàng phải nằm trong khoảng 

  

    

    

    

  
  

    

    

    

  
9, 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5 hoặc 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */6. Lưu ý rằng chúng tôi cũng gói tất cả các hàng dữ liệu trong 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5 tại đây
Bàn Chân
Cùng với 

  

    

    

    

  
  

    

    

    

  
9 và 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5, có 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */6 để bao quanh các hàng của bảng cho biết chân trang của bảng. Giống như 

  

    

    

    

  
  

    

    

    

  
9, tốt nhất để chỉ ra về mặt ngữ nghĩa đây không phải là các hàng dữ liệu mà là thông tin phụ trợ
Trước HTML5, phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */6 bắt buộc phải có sau 

  

    

    

    

  
  

    

    

    

  
9 và trước 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5. Bạn có thể nghĩ rằng đó sẽ là điều cuối cùng trước khi kết thúc năm ________ 08, nhưng không phải vậy. Bây giờ trong HTML5, nó hoàn toàn ngược lại, nó phải đi sau 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5 như bạn có thể mong đợi
Ví dụ, nó có thể được sử dụng để lặp lại tiêu đề trong trường hợp bảng rất cao/dài về mặt trực quan, nơi có thể dễ dàng xem các tiêu đề cột ở dưới cùng hơn là trên cùng. Mặc dù bạn không nhất thiết phải sử dụng nó theo cách đó
Dự phòng nhúng CodePen
Các tế bào. 











97 và 











98
Các ô riêng lẻ của bảng luôn là một trong hai phần tử. 

  

    

    

    

  
  

    

    

    

  
99 hoặc 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20. Bạn có thể đặt bất cứ thứ gì bạn muốn bên trong một ô của bảng, nhưng đây là những thành phần làm cho chúng trở thành một ô của bảng. Phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 là “tiêu đề dạng bảng” và phần tử 

  

    

    

    

  
  

    

    

    

  
99 là “dữ liệu dạng bảng”
Sử dụng bản trình diễn đơn giản hiện có của chúng tôi, hàng trên cùng là tất cả các tiêu đề. Không phải dữ liệu, chỉ là tiêu đề cho dữ liệu. Tất cả các hàng còn lại là dữ liệu. Vì thế
Dự phòng nhúng CodePen
Các phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 không nhất thiết bị giới hạn trong phạm vi 

  

    

    

    

  
  

    

    

    

  
9. Họ chỉ đơn giản chỉ ra thông tin tiêu đề. Vì vậy, chúng có thể được sử dụng, chẳng hạn, ở đầu một hàng trong 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5, nếu điều đó phù hợp. Chúng tôi sẽ đề cập đến một trường hợp như vậy sau
Kiểu dáng cơ bản
Hầu hết các bảng bạn từng thấy đều sử dụng màu sắc và đường kẻ để phân biệt các phần khác nhau của bảng. Biên giới rất phổ biến. Theo mặc định, tất cả các ô của bảng cách nhau 2px (thông qua biểu định kiểu tác nhân người dùng), như thế này
Dự phòng nhúng CodePen
Lưu ý khoảng cách nhỏ giữa hàng đầu tiên và phần còn lại. Đó là do khoảng cách đường viền mặc định được áp dụng cho 

  

    

    

    

  
  

    

    

    

  
9 và 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5 đẩy chúng ra xa nhau hơn một chút. Đây không phải là lợi nhuận, chúng không sụp đổ. Bạn có thể kiểm soát khoảng cách đó như

  

    

    

    

  
  

    

    

    

  
0
Nhưng phổ biến hơn nhiều là loại bỏ không gian đó. Thuộc tính đó hoàn toàn bị bỏ qua và không gian bị sập nếu bạn làm

  

    

    

    

  
  

    

    

    

  
1
Chỉ cần một chút đệm, đường viền và làm cho các phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 đó được căn trái là đủ để tạo ra một bảng đơn giản, có kiểu dáng
Dự phòng nhúng CodePen
kết nối các ô
Có hai thuộc tính quan trọng có thể xuất hiện trên bất kỳ phần tử ô nào của bảng (
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 hoặc 

  

    

    

    

  
  

    

    

    

  
99). 

  

    

    

    

  
  

    

    

    

  
51 và 

  

    

    

    

  
  

    

    

    

  
52. Họ chấp nhận mọi số nguyên dương 2 hoặc lớn hơn. Nếu một td có colspan là 2 (i. e. 

  

    

    

    

  
  

    

    

    

  
53) nó sẽ vẫn là một ô, nhưng nó sẽ chiếm không gian của hai ô liên tiếp theo chiều ngang. Tương tự với 

  

    

    

    

  
  

    

    

    

  
52, nhưng theo chiều dọc
Dự phòng nhúng CodePen
Bạn sẽ phải tính nhẩm một chút khi bắt đầu làm việc với các ô được kết nối. Colspan khá dễ dàng. Bất kỳ ô nào trong bảng đều “có giá trị” trừ khi nó có thuộc tính 

  

    

    

    

  
  

    

    

    

  
51 và khi đó nó có giá trị nhiều như vậy. Cộng các giá trị cho từng ô của bảng trong hàng của bảng đó để nhận giá trị cuối cùng. Mỗi hàng phải có chính xác giá trị đó, nếu không, bạn sẽ có bố cục bảng khó xử không tạo thành hình chữ nhật (hàng dài nhất sẽ nhô ra)
Rowspan cũng tương tự, nó chỉ khó hơn một chút và đòi hỏi nhiều tinh thần hơn, bởi vì các cột không được nhóm lại giống như các hàng. Nếu một phần tử bảng có thuộc tính 

  

    

    

    

  
  

    

    

    

  
52, nó sẽ trải dài trên hai hàng theo chiều dọc. Điều đó có nghĩa là hàng bên dưới nó được +1 cho số lượng ô trong bảng và cần ít hơn một ô trong bảng để hoàn thành hàng
Bạn có thể hơi lúng túng khi nghĩ ra trong đầu, nhưng chúng tôi là nhà phát triển ở đây, chúng tôi có thể làm được =)
Thường thì các thuộc tính này được sử dụng theo những cách thực sự đơn giản như kết nối một vài tiêu đề bảng có liên quan
Dự phòng nhúng CodePen
Rộng hết mức cần thiết… Hoặc lấp đầy thùng chứa… Hoặc hơn thế nữa
Bản thân phần tử bảng không bình thường ở độ rộng của nó. Nó hoạt động giống như một phần tử cấp khối (e. g. 

  

    

    

    

  
  

    

    

    

  
57) trong đó nếu bạn đặt hết bảng này đến bảng khác, mỗi bảng sẽ chia thành các dòng riêng. Nhưng chiều rộng thực tế của bàn chỉ rộng ở mức cần thiết
Dự phòng nhúng CodePen
Nếu lượng văn bản trong hàng rộng nhất của bảng chỉ rộng 100px, thì bảng sẽ rộng 100px. Nếu lượng văn bản (nếu đặt trên một dòng) sẽ rộng hơn vùng chứa, nó sẽ bao bọc
Tuy nhiên, nếu văn bản được yêu cầu không ngắt dòng (i. e. 

  

    

    

    

  
  

    

    

    

  
58) chiếc bàn rất vui khi thoát ra khỏi thùng chứa và mở rộng ra. Các ô của bảng cũng sẽ không được bọc, vì vậy nếu có quá nhiều ô để vừa, bảng cũng sẽ rộng hơn
Dự phòng nhúng CodePen
Bàn hai trục
Đôi khi, dữ liệu dạng bảng có hai trục là hợp lý. Giống như một tình huống tham khảo chéo. Một bảng nhân là một ví dụ về điều này
Dự phòng nhúng CodePen
Tôi có thể bỏ qua một 

  

    

    

    

  
  

    

    

    

  
9 trong tình huống này mặc dù hàng đầu tiên đó đều là tiêu đề. Nó không quan trọng hơn cột dọc của tiêu đề nên cảm thấy lạ khi chỉ nhóm hàng trên cùng đó. Chỉ cần tạo trên hàng có tất cả 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 và sau đó mỗi hàng tiếp theo chỉ có ô đầu tiên là 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20
Khi nào nên sử dụng bảng
Đây là thời điểm tốt để nghỉ ngơi và thảo luận về thời điểm của bàn. Có lẽ bạn đã nghe lời khuyên chung chung. bảng dành cho dữ liệu dạng bảng (xem câu đầu tiên của bài đăng trên blog này). Câu hỏi "điều này có hợp lý trong bảng tính không?" 
Những loại điều là thích hợp trong bảng? . so sánh kế hoạch/giá cả/tính năng, điểm số bowling, lưới nội bộ dữ liệu nhân viên, dữ liệu tài chính, lịch, bảng thông tin dinh dưỡng, giải câu đố logic, v.v.
Bạn có thể thỉnh thoảng nghe thấy. các bảng không có nghĩa. Điều đó không đúng - chúng biểu thị dữ liệu dạng bảng theo ngữ nghĩa. Bàn là sự lựa chọn đúng đắn khi đó là trường hợp



Khi nào không sử dụng bảng
Việc sử dụng không phù hợp cho các bảng là để bố trí. Điều đó có vẻ phản trực giác. Nhìn thoáng qua cách thức hoạt động của các bảng có thể khiến chúng có vẻ lý tưởng để bố trí. Dễ kiểm soát, cực kỳ logic, có thể dự đoán và không dễ vỡ
Tuy nhiên, có một số vấn đề nghiêm trọng với việc sử dụng bảng để bố trí. Đầu tiên, các thẻ HTML có ý nghĩa. Như chúng ta đã đề cập, các phần tử bảng mô tả dữ liệu dạng bảng theo ngữ nghĩa. Sử dụng chúng cho bất cứ điều gì khác là vi phạm nghĩa vụ ngữ nghĩa. Bạn sẽ không bị phạt qua thư, nhưng bạn sẽ không nhận được nhiều giá trị từ HTML của mình nhất có thể
Nói về ngữ nghĩa đôi khi hơi khó (một số đọc. 1, 2, 3, 4, 5), vì vậy hãy nói về điều mà tất cả chúng ta thường đồng ý (ngay cả khi chúng ta không giỏi như mong muốn). các trang web nên được truy cập. Một phần của khả năng truy cập là trình đọc màn hình. Trình đọc màn hình đọc các bảng từ trên xuống dưới, từ trái sang phải. Điều đó có nghĩa là thứ tự trình bày trang web của bạn được quyết định bởi cấu trúc bảng, được quyết định bởi các lựa chọn trực quan chứ không phải lựa chọn khả năng truy cập. Chưa kể trình đọc màn hình thậm chí có thể thông báo bắt đầu dữ liệu dạng bảng, điều này còn tệ hơn là vô dụng
Nói về thứ tự nguồn, điều đó ảnh hưởng nhiều hơn khả năng tiếp cận. Hãy tưởng tượng bố cục “thanh bên bên trái”. Một bảng sẽ chỉ ra rằng bảng đó có trước theo thứ tự nguồn, điều này cũng không tốt cho khả năng truy cập, cũng có thể không tốt cho SEO, có khả năng đánh giá nội dung phụ của bạn cao hơn nội dung chính
Bạn có thể khắc phục sự cố SEO bằng cách sử dụng thẻ ngữ nghĩa trong thẻ bảng không? . Nếu bạn thực sự cần khả năng bố trí của một bảng nhưng muốn sử dụng các thẻ ngữ nghĩa, hãy xem phần tiếp theo. Nếu bạn hoàn toàn gặp khó khăn khi sử dụng các thẻ bảng để bố trí, hãy sử dụng ARIA 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */62 trên bảng để chỉ ra điều đó
Khi tôi viết bài này vào nửa cuối năm 2013, các bảng đã trở nên ít phổ biến hơn và thậm chí còn hấp dẫn như một lựa chọn bố cục. Chúng tôi đang chứng kiến ​​việc sử dụng nhiều hơn vị trí cố định và tuyệt đối mà bạn không thể thực hiện trong một bảng. Chúng tôi đang thấy flexbox trở nên tuyệt vời và phù hợp với khả năng sử dụng chính thống. Chúng tôi đang thấy bố cục lưới bắt đầu phát triển. Chúng tôi đang thấy khối nội tuyến được sử dụng mạnh mẽ. Chúng ta đang nhìn thấy sự mong manh của những chiếc phao ngày xưa đang dần phai nhạt
Hiếm khi bạn thấy các trang web hiện đại chạm vào bảng bố cục. Nắm giữ cuối cùng là email HTML. Bối cảnh của những gì hiển thị email là siêu rộng. Đó là mọi thứ chúng ta xử lý trên web, cộng với thế giới ứng dụng gốc trên cả thiết bị di động và máy tính để bàn trên các hệ điều hành mới và cũ. Bạn có thể thực hiện một số cải tiến lũy tiến cho email, nhưng bản thân bố cục vẫn thường được coi là an toàn nhất khi thực hiện trong bảng. Điều đó được chứng minh bởi thực tế là các dịch vụ gửi email chính vẫn cung cấp các mẫu dưới dạng bảng
Làm cho các phần tử ngữ nghĩa hoạt động giống như một bảng
CSS có các thuộc tính để làm cho bất kỳ phần tử nào bạn muốn hoạt động như thể nó là một phần tử bảng. Về cơ bản, bạn sẽ cần cấu trúc chúng giống như một bảng và nó sẽ chịu sự phụ thuộc vào thứ tự nguồn giống như một bảng, nhưng bạn có thể làm được. Tôi cũng không tào lao về nó, đôi khi nó thực sự hữu ích. Nếu kiểu bố cục đó giải quyết được vấn đề và không có hàm ý thứ tự phủ định, hãy sử dụng nó
Không sử dụng các kiểu nội tuyến, nhưng chỉ để hiểu đây là cách điều đó sẽ diễn ra

  

    

    

    

  
  

    

    

    

  
Một thủ thuật hữu ích ở đây là bạn thậm chí không cần phần tử table-row trong đó nếu bạn không muốn. Một loạt các phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */63 là con của phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */64 sẽ hoạt động giống như tất cả chúng nằm trong một hàng
Bạn luôn thay đổi thuộc tính hiển thị của phần tử để có hành vi kiểu bảng. Đây là các giá trị
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */
Lưu ý rằng không có sự thay thế 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20. Đó chỉ là giá trị ngữ nghĩa. Mặt khác, nó hoạt động giống như một 

  

    

    

    

  
  

    

    

    

  
99, vì vậy, không cần sao chép nó trong CSS
Ngoài ra còn có 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */67 khá thú vị. Hãy nhớ rằng chúng ta đã nói về độ rộng của các thành phần bảng kỳ lạ ở trên. Chúng chỉ rộng đến mức cần thiết, nhưng vẫn tạo ra những đường nét mới. Nó gần giống như chúng là các phần tử khối nội tuyến bị hỏng. Điều này làm cho chúng giống như các phần tử khối nội tuyến theo đúng nghĩa đen, mà không bị phá vỡ
Nếu bạn muốn tìm hiểu thêm về cách sử dụng các yếu tố ngữ nghĩa cũng như bố cục kiểu bảng, hãy xem cuốn sách Mọi điều bạn biết về CSS đều sai
Tôi chưa bao giờ là một người hâm mộ cuồng nhiệt của tiêu đề đó vì nó gợi ý rằng sử dụng bố cục kiểu bảng này là đúng cách và bất kỳ kỹ thuật bố cục nào khác mà bạn sử dụng đều là sai cách. Nhưng như tôi đã nói, điều này có thể cực kỳ hữu ích và tôi rất vui vì nó có trong CSS. Chỉ cần lưu ý sâu sắc rằng bất kể bạn sử dụng loại yếu tố nào để tạo bố cục dựa trên bảng, nó vẫn gặp phải các vấn đề tương tự (phần lớn phụ thuộc vào thứ tự nguồn)
Tất cả các yếu tố liên quan đến bảng
Có một vài yếu tố ở trên chúng tôi chưa chạm vào. Hãy xem xét tất cả các phần tử liên quan đến bảng HTML. Bạn biết gì không, chúng ta cũng có thể sử dụng một cái bàn để làm điều đó
Yếu tố Nó là gì

  

    

    

    

  
  

    

    

    

  
8Bản thân cái bàn
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */69Chú thích cho cái bàn. Giống như một figcaption cho một con số. 

  

    

    

    

  
  

    

    

    

  
9Tiêu đề của bảng
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5Phần thân của bảng
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */6Chân trang của bảng
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */0Một hàng của bảng
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20Một ô của bảng là tiêu đề

  

    

    

    

  
  

    

    

    

  
99Một ô của bảng là dữ liệu

  

    

    

    

  
  

    

    

    

  
26Một cột (phần tử không có nội dung)

  

    

    

    

  
  

    

    

    

  
27Một nhóm các cột
Tất cả các thuộc tính liên quan đến bảng
Đáng ngạc nhiên là có rất ít thuộc tính dành riêng cho các bảng. Tất nhiên bạn có thể sử dụng lớp và ID và tất cả các thuộc tính chung điển hình. Đã từng có khá nhiều, nhưng hầu hết chúng đều dành riêng cho kiểu dáng và do đó không được dùng nữa (vì đó là công việc của CSS)
AttributeElement(s) Found On. Nó làm gì________thứ 351, tdexmở rộng một ô thành 2 ô trở lên________thứ 352, tdexmở rộng một ô thành 2 ô trở lên

  

    

    

    

  
  

    

    

    

  
60colLàm cho cột áp dụng cho nhiều hơn 2 hoặc nhiều cột

  

    

    

    

  
  

    

    

    

  
61tableCho biết bảng sẽ cho phép sắp xếp. CẬP NHẬT. Tôi được biết điều này đã bị xóa khỏi thông số kỹ thuật do thiếu triển khai. Chuỗi 

  

    

    

    

  
  

    

    

    

  
62td được phân tách bằng dấu cách tương ứng với ID của các phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 có liên quan đến dữ liệu

  

    

    

    

  
  

    

    

    

  
64throw. cột. nhóm hàng. colgroup (mặc định) – về cơ bản chỉ định trục của tiêu đề. Theo mặc định, tiêu đề là tiêu đề của cột, đây là tiêu đề điển hình, nhưng một hàng cũng có thể bắt đầu bằng tiêu đề, trong đó bạn sẽ đặt tiêu đề đó cho hàng hoặc nhóm hàng
Thuộc tính không dùng nữa
Không sử dụng bất kỳ thứ nào trong số này. không được dùng nữa. Mặc dù chúng có thể hoạt động trong một số trình duyệt hiện nay, nhưng có khả năng chúng sẽ ngừng hoạt động trong tương lai
Thuộc tính không dùng nữa Sử dụng gì thay vì căn chỉnh Sử dụng thuộc tính 

  

    

    

    

  
  

    

    

    

  
65 thay vì valign Sử dụng thuộc tính 

  

    

    

    

  
  

    

    

    

  
66 thay vì char Câu trả lời đúng là sử dụng 

  

    

    

    

  
  

    

    

    

  
67 trong đó x là ký tự để căn chỉnh, nhưng nó chưa được triển khai ở bất kỳ đâu. Nhưng thuộc tính này cũng không được hỗ trợ, vì vậy không có tổn thất lớn. charoffXem ở trênbgcolorSử dụng thuộc tính 

  

    

    

    

  
  

    

    

    

  
68 thay vào đóabbr“xem xét bắt đầu nội dung ô bằng chính nội dung viết tắt độc lập hoặc sử dụng nội dung viết tắt làm nội dung ô và sử dụng nội dung dài làm mô tả của ô bằng cách đặt nội dung đó vào thuộc tính 

  

    

    

    

  
  

    

    

    

  
69”trụcSử dụng thuộc tính 

  

    

    

    

  
  

    

    

    

  
64 thay vì đường viềnSử dụng 
ngăn xếp bảng
Có một sự sắp xếp theo chiều dọc ngụ ý của các thành phần bảng, giống như trong bất kỳ kịch bản HTML cha > con cháu nào. Điều quan trọng là phải hiểu trong các bảng vì có thể đặc biệt hấp dẫn khi áp dụng những thứ như nền cho chính bảng hoặc các hàng của bảng, chỉ để nền trên một ô của bảng “đè lên” nó (thực ra nó chỉ ở trên cùng)
Đây là giao diện của nó (sử dụng tính năng Firefox 3D trong các công cụ dành cho nhà phát triển của nó)
Quy tắc phong cách quan trọng cho bảng
Bạn có thể sử dụng hầu hết các thuộc tính CSS trên các phần tử bảng. Ví dụ, 

  

    

    

    

  
  

    

    

    

  
108 hoạt động trên các bảng giống như trên bất kỳ phần tử nào khác. Và các quy tắc của thác áp dụng. Áp dụng 

  

    

    

    

  
  

    

    

    

  
108 cho bảng, nhưng một 

  

    

    

    

  
  

    

    

    

  
108 khác trên ô của bảng, ô của bảng thắng vì đó là phần tử thực có văn bản bên trong
Các thuộc tính này là duy nhất đối với các phần tử bảng hoặc chúng hoạt động duy nhất trên các phần tử bảng
Thuộc tính CSS Giá trị có thể có Chức năng của nóvertical-alignbaseline
sub
super
text-top
text-bottom
middle
top
bottom
%
lengthAligns the content inside a cell. Works particularly well in tables, although only the top/bottom/middle make much sense in that context.white-spacenormal
pre
nowrap
pre-wrap
pre-lineKiểm soát cách ngắt dòng văn bản . Một số dữ liệu có thể cần phải có tất cả trên một dòng để có ý nghĩa. border-collapsecollapse
separateÁp dụng cho bảng để xác định xem các đường viền có thu gọn vào chính chúng hay không (giống như lề chỉ thu gọn theo hai hướng) hay không. Điều gì sẽ xảy ra nếu hai đường viền thu gọn vào nhau có kiểu xung đột (chẳng hạn như màu sắc)? . ô, hàng, nhóm hàng, cột, nhóm cột, bảng. chiều dài khoảng cách đường viền của 

  

    

    

    

  
  

    

    

    

  
111 là 

  

    

    

    

  
  

    

    

    

  
112, bạn có thể chỉ định khoảng cách giữa các ô với nhau. Phiên bản hiện đại của thuộc tính 

  

    

    

    

  
  

    

    

    

  
113. Và nói về điều đó, 

  

    

    

    

  
  

    

    

    

  
102 là phiên bản hiện đại của thuộc tính 

  

    

    

    

  
  

    

    

    

  
115. widthlengthWidth hoạt động trên các ô của bảng giống như cách bạn nghĩ, trừ khi có xung đột nào đó. Chẳng hạn, nếu bạn yêu cầu bản thân bảng rộng 400px thì ô đầu tiên của hàng ba ô rộng 100px và để nguyên các ô khác, ô đầu tiên đó sẽ rộng 100px và hai ô còn lại sẽ phân chia không gian còn lại. Nhưng nếu bạn yêu cầu cả ba trong số chúng rộng 10000px, bảng sẽ vẫn là 400px và nó sẽ chỉ cung cấp cho mỗi người trong số chúng một phần ba không gian. Đó là giả sử khoảng trắng hoặc các yếu tố như hình ảnh không phát huy tác dụng. Đây có lẽ là toàn bộ bài viết của chính nó. borderlengthBorder hoạt động trên bất kỳ thành phần nào của bảng và gần giống như cách bạn mong đợi. Những điều kỳ quặc xuất hiện khi bạn thu gọn các đường viền. Trong trường hợp này, tất cả các ô của bảng sẽ chỉ có một chiều rộng đường viền giữa chúng, thay vì hai đường viền mà bạn mong muốn chúng có (đường viền bên phải trên ô đầu tiên và đường viền bên trái trên ô tiếp theo). Để xóa đường viền trong môi trường thu gọn, cả hai ô cần phải “đồng ý” để xóa đường viền đó. Giống như 

  

    

    

    

  
  

    

    

    

  
116 Mặt khác, thứ tự/độ đặc hiệu của nguồn sẽ thắng đường viền nào được hiển thị trên cạnh nào. table-layoutauto
fixed

  

    

    

    

  
  

    

    

    

  
117 là mặc định. Chiều rộng của bảng và các ô của nó phụ thuộc vào nội dung bên trong. Nếu bạn thay đổi giá trị này thành 

  

    

    

    

  
  

    

    

    

  
118, độ rộng của bảng và cột được đặt theo độ rộng của phần tử bảng và cột hoặc theo độ rộng của hàng ô đầu tiên. Các ô trong các hàng tiếp theo không ảnh hưởng đến độ rộng của cột, điều này có thể tăng tốc độ kết xuất. Nếu nội dung trong các ô tiếp theo không vừa, thuộc tính tràn sẽ xác định điều gì sẽ xảy ra. 
Danh sách này không đầy đủ. Có những điều kỳ quặc khác về CSS có liên quan đến bảng. Chẳng hạn, bạn không thể định vị tương đối một ô của bảng để di chuyển nó xung quanh hoặc định vị hoàn toàn mọi thứ bên trong nó. Có nhiều cách mặc dù
Nếu bạn có thể nghĩ ra nhiều điều kỳ lạ hơn về CSS với các bảng, hãy chia sẻ trong phần bình luận bên dưới
Kiểu mặc định / Biểu định kiểu tác nhân người dùng
WebKit làm điều này

  

    

    

    

  
  

    

    

    

  
9
Tôi cũng đã kiểm tra từng thành phần trong Chrome Dev Tools, hiện đã có trên Blink và nó vẫn vậy
Mặc dù thật buồn cười. Chắc chắn, văn bản trong những năm 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 được căn giữa (

  

    

    

    

  
  

    

    

    

  
120) theo mặc định. Nhưng điều đó không có trong biểu định kiểu UA. Không phải là một vấn đề lớn nhưng khá bí ẩn và khiến bạn tự hỏi những điều bí ẩn nào khác xảy ra trong quá trình kết xuất
Biểu định kiểu UA cho các bảng khác nhau giữa các trình duyệt. Ví dụ: trong Firefox (đây là 3. 6, nhưng điều này cũng đúng trong v23) các ô của bảng có điều này
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */2
Đáng chú ý nhất là 1px của phần đệm mà WebKit không có. Chắc chắn không phải là vấn đề lớn trong hầu hết các trường hợp, nhưng nó thì khác. Đó là tất cả những gì thiết lập lại CSS (và các dự án liên quan). loại bỏ sự khác biệt. Vì vậy, hãy kiểm tra những điều đó
Đặt lại kiểu bảng mặc định
Thiết lập lại CSS phổ biến nhất trên thế giới, Thiết lập lại Meyer, thực hiện điều này với các bảng

  

    

    

    

  
  

    

    

    

  
5
Nó được thực hiện theo cách tương tự trong Đặt lại HTML5 và Biểu định kiểu đặt lại HTML5 (Doctor)
Tuy nhiên, có một giải pháp thay thế cho đặt lại CSS, Chuẩn hóa. css. Triết lý hơi khác một chút. Thay vì loại bỏ tất cả các kiểu, nó đặc biệt đặt các kiểu đã biết là không nhất quán thành một mặc định hợp lý. Lời khuyên chung của tôi về việc sử dụng Chuẩn hóa. css là. không loại bỏ bất cứ điều gì từ nó. Nếu nó ở trong đó, nó cần phải nhất quán. Nhưng hãy thoải mái thay đổi bất cứ điều gì trong đó
Bình thường hóa chỉ thực hiện điều này với các bảng
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */6
Tôi sẽ phải tìm hiểu lý do ở đây sâu hơn một chút vì nó có vẻ không bình thường…
Tôi là người hâm mộ của 

  

    

    

    

  
  

    

    

    

  
121 vì khoảng cách giữa các ô thường rất khó xử, nhưng, mặc định trong mọi trình duyệt mà tôi biết là 

  

    

    

    

  
  

    

    

    

  
122 nên không cần chuẩn hóa
Nếu 

  

    

    

    

  
  

    

    

    

  
111 là 

  

    

    

    

  
  

    

    

    

  
124, thì 

  

    

    

    

  
  

    

    

    

  
103 không thành vấn đề
Các phần tử ô của bảng cần được chuẩn hóa (e. g. sự khác biệt về phần đệm của Firefox) nhưng điều đó không có ở đó
Không phải là một vấn đề lớn
Đây là điều tôi có thể thường làm

  

    

    

    

  
  

    

    

    

  
2
Các phần tử “ngụ ý” và các thẻ không được ẩn
Kiểm tra một chút HTML khá khó xử này

  

    

    

    

  
  

    

    

    

  
6
Điều này có thể kỳ lạ khi nhìn vào, nhưng nó hợp lệ. Những gì đang xảy ra ở đây?
Thẻ 

  

    

    

    

  
  

    

    

    

  
26 chỉ là một trong những thành phần không có nội dung không bao giờ cần thẻ đóng. Như 

  

    

    

    

  
  

    

    

    

  
127 / 

  

    

    

    

  
  

    

    

    

  
128
Phần tử 

  

    

    

    

  
  

    

    

    

  
99 không cần phải đóng trong một số trường hợp nhất định. “Thẻ kết thúc có thể bị bỏ qua, nếu ngay sau nó là phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20 hoặc 

  

    

    

    

  
  

    

    

    

  
99 hoặc nếu không có thêm dữ liệu nào trong phần tử cha của nó. ”
Thẻ đóng 

  

    

    

    

  
  

    

    

    

  
132 bị thiếu là cùng một câu chuyện. “Thẻ kết thúc có thể bị bỏ qua nếu phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */0 được theo sau ngay bởi phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */0 hoặc nếu phần tử nhóm bảng cha (

  

    

    

    

  
  

    

    

    

  
9, 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5 hoặc 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */6) không có thêm nội dung nào. ”
Nếu chúng tôi kiểm tra bảng được hiển thị trong trình duyệt, chúng tôi có thể thấy rằng các thẻ bị thiếu thẻ đóng của chúng được hiển thị bằng thẻ đóng. Chúng được tự động thêm vào cho chúng tôi. Nhưng cũng có một số yếu tố hoàn toàn mới trong đó
Một điều cần chú ý là 

  

    

    

    

  
  

    

    

    

  
26 được bọc trong một 

  

    

    

    

  
  

    

    

    

  
27 tự động. Ngay cả khi chúng ta phải làm




  

    

    

    

  
  

    

    

    

  
10
sau đó

  

    

    

    

  
  

    

    

    

  
11
Bạn sẽ nghĩ rằng ô thứ hai sẽ có màu đỏ chứ không phải ô đầu tiên, bởi vì nhóm "đầu tiên" chỉ ảnh hưởng đến ô thứ hai. Nhưng khi được hiển thị, cả hai cột đó được bao bọc trong một nhóm, do đó, bộ chọn CSS sẽ chọn cột đầu tiên
Phần tử 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */5 cũng được ngụ ý. Nếu bạn không sử dụng bất kỳ tbody, thead hoặc tfoot nào, toàn bộ phần ruột của bàn sẽ được bao bọc trong tbody. Nếu bạn sử dụng một chủ đề, toàn bộ bảng sẽ được bọc trong đó cho đến khi nó tìm thấy một tbody, sau đó nó sẽ tự động đóng quảng cáo nếu bạn không làm như vậy và bọc phần còn lại trong tbody (cũng là tùy chọn để đóng). Nếu nếu tìm thấy một tfoot, bạn có thể tưởng tượng điều gì sẽ xảy ra (mặc dù hãy nhớ rằng tfoot phải xuất hiện trước tbody)
Bạn thực sự có thể sử dụng các thành phần này trong bộ chọn CSS ngay cả khi bạn không đặt chúng trong HTML thực của mình. Tôi có lẽ sẽ không khuyên điều đó chỉ vì điều đó thật kỳ lạ, khó hiểu và bộ chọn thẻ kiểu dáng thường không được khuyến khích
Làm một cái bàn chứ không phải một cái bàn
Một tình huống có thể phát sinh vào một ngày nào đó khi bạn cần buộc một phần tử bảng không thể hiện hành vi bố cục kiểu bảng của nó và hoạt động giống một phần tử thông thường hơn
Thủ thuật về cơ bản là đặt lại thuộc tính hiển thị của các ô trong bảng

  

    

    

    

  
  

    

    

    

  
12
Chúng ta có thể hủy bảng một cách nhanh chóng
Dự phòng nhúng CodePen
Để an toàn, tôi sẽ thiết lập lại toàn bộ she-bang. Chỉ khiến tôi cảm thấy tốt hơn khi biết các yếu tố cha mẹ cũng đồng hành cùng chuyến đi và sẽ không trở nên kỳ dị

  

    

    

    

  
  

    

    

    

  
13
Điều này chủ yếu hữu ích trong thiết kế đáp ứng trong đó bố cục bảng truyền thống có ý nghĩa trên màn hình lớn nhưng cần thay đổi đáng kể để có ý nghĩa trên màn hình nhỏ hơn. Có cả một phần về điều đó bên dưới
Khả năng truy cập bảng
Chúng ta đã nói về các vấn đề khi sử dụng bảng để bố trí và trợ năng. Nhưng giả sử bảng đang được sử dụng chính xác cho dữ liệu dạng bảng, thì vẫn còn khá nhiều lo ngại về khả năng truy cập
Có một số bài viết tuyệt vời về điều này ngoài kia
WebAIM. Tạo bảng có thể truy cập
Cao đẳng Cộng đồng Portland. Ví dụ về bố cục bảng tốt và xấu cho trình đọc màn hình
Khả năng sử dụng web. Bảng dữ liệu có thể truy cập
Bàn sọc ngựa vằn
Nếu bạn không đặt màu nền cho các thành phần ô của bảng, bạn có thể tự đặt chúng trên các hàng của bảng. Vì vậy, ở mức cơ bản nhất, bạn có thể làm

  

    

    

    

  
  

    

    

    

  
14
Chúng tôi đang sử dụng tbody trong bộ chọn vì không chắc là bạn muốn sọc các hàng đầu trang và chân trang. Đặt cả các hàng chẵn nếu bạn muốn cụ thể về nó thay vì để những gì bên dưới hiển thị qua
Nếu bạn cần hỗ trợ các trình duyệt không hiểu. nth-child() (khá cũ), bạn có thể sử dụng jQuery để làm điều đó
Dự phòng nhúng CodePen
Các nghiên cứu dường như chỉ ra rằng ngựa vằn nói chung là một ý tưởng tốt
Đánh dấu hàng và cột
Làm nổi bật một hàng cụ thể là khá dễ dàng. Bạn có thể thêm tên lớp vào một hàng cụ thể cho điều đó

  

    

    

    

  
  

    

    

    

  
15
Dự phòng nhúng CodePen
Làm nổi bật một cột phức tạp hơn một chút. Một khả năng là sử dụng phần tử 

  

    

    

    

  
  

    

    

    

  
26, phần tử này cho phép chúng tôi đặt kiểu cho các ô xuất hiện trong cột đó. Thật kỳ lạ khi bạn quay đầu lại, bởi vì các tế bào bị ảnh hưởng bởi ________ 626 không thực sự là hậu duệ của nó. Trình duyệt gần như hiểu ý của bạn
Một bảng có bốn cột trong mỗi hàng sẽ có bốn phần tử 

  

    

    

    

  
  

    

    

    

  
26

  

    

    

    

  
  

    

    

    

  
16
Sau đó, bạn có thể đánh dấu một cái cụ thể, như

  

    

    

    

  
  

    

    

    

  
17
Dự phòng nhúng CodePen
Tuy nhiên điều này hiếm khi hữu ích. Nếu bạn đặt nền của thành phần hàng hoặc thành phần ô của bảng, nền đó sẽ luôn đánh bại nền của thành phần cột. Bất kể tính đặc hiệu
Có lẽ tốt hơn hết là bạn nên đặt tên lớp cho từng thành phần ô của bảng riêng lẻ phù hợp với vị trí cột đó trong hàng. Giống

  

    

    

    

  
  

    

    

    

  
18
Đánh dấu cột/hàng/ô khi di chuột
Làm nổi bật ô rất dễ dàng. Bạn có thể làm điều đó ngay trong CSS

  

    

    

    

  
  

    

    

    

  
19
Đánh dấu hàng thật dễ dàng. Bạn có thể đặt nền trên các hàng của bảng và nó sẽ hiển thị miễn là bạn không đặt nền trên các ô của bảng

  

    

    

    

  
  

    

    

    

  
0
Dự phòng nhúng CodePen
Nếu bạn đặt nền trên các ô của bảng, bạn luôn có thể chỉ cần đến 

  

    

    

    

  
  

    

    

    

  
144, điều này vẫn khá dễ dàng
Đánh dấu cột là thủ thuật. Bạn không thể sử dụng 

  

    

    

    

  
  

    

    

    

  
145 vì những cột đó không phải là phần tử thực chiếm không gian pixel trên màn hình mà bạn có thể di chuột qua. Tùy chọn duy nhất là JavaScript
Tôi đã viết nó bằng Vanilla JavaScript ở đây, chỉ để cho vui
Dự phòng nhúng CodePen
Nó hoạt động như thế này
Nhận một bộ sưu tập của tất cả các ô
Liên kết một sự kiện di chuột qua và di chuột ra với tất cả các ô đó
Khi sự kiện di chuột qua kích hoạt, hãy lấy vị trí trong hàng của ô đó
Lặp qua tất cả các hàng và thêm một lớp đánh dấu vào từng ô trong hàng khớp với vị trí đó
Khi sự kiện mouseout kích hoạt, hãy xóa lớp tô sáng khỏi tất cả các ô
Và ở đây tôi đã kết hợp đánh dấu cả hàng và cột. Tôi đã sử dụng jQuery để tạo tất cả 12 dòng mã (JavaScript thô đang trở nên khá mệt mỏi)
Dự phòng nhúng CodePen
Đó là cùng một khái niệm, việc tạo các bộ sưu tập phần tử dễ dàng hơn nhiều, cũng như tìm và chọn theo chỉ mục trong jQuery
Những chiếc bàn kiểu dáng đẹp mắt
Một số độ sâu, tiêu đề trực quan khác biệt và thiết bị đầu cuối phù hợp với tiêu đề
Dự phòng nhúng CodePen
Khi bảng được di chuột, chỉ có hàng hiện tại được đánh dấu là văn bản có màu tối, các hàng khác sẽ mờ dần trở lại. Cũng lưu ý về điều này. bản thân các góc bo tròn trên bàn chỉ có thể thực hiện được khi bạn có 

  

    

    

    

  
  

    

    

    

  
122
Dự phòng nhúng CodePen



Đây là một nơi khác mà các hàng không được di chuột làm mờ theo đúng nghĩa đen
Dự phòng nhúng CodePen
Twitter Bootstrap có kiểu dáng bảng rất tối thiểu
Dự phòng nhúng CodePen
Cái này, như một phần thưởng, có điều khiển bàn phím
Dự phòng nhúng CodePen
Tôi đang cố giữ một bộ sưu tập các bảng được thiết kế đẹp để tham khảo. Vì vậy, nếu bạn có bất kỳ cái nào tốt, hãy cho tôi biết. Hong Kiat cũng có một bộ sưu tập bài đăng trên blog
Tìm kiếm bảng
Khi việc sắp xếp bảng có thể khá phức tạp thì việc tìm kiếm bảng có thể khá dễ dàng. Thêm đầu vào tìm kiếm và nếu giá trị trong đó khớp với văn bản ở bất kỳ đâu trong một hàng, hãy hiển thị giá trị đó và ẩn các giá trị khác. Với jQuery có thể dễ dàng như

  

    

    

    

  
  

    

    

    

  
1
Thay vào đó, hãy thực hiện với RegExp
Dự phòng nhúng CodePen
Và đây là JavaScript thô
Dự phòng nhúng CodePen
Các bảng có thể gặp khó khăn trong các thiết kế linh hoạt/đáp ứng
Tôi đã từng viết về điều này trước đây và tôi nghĩ loại đồ họa này tổng hợp trải nghiệm của một bảng dữ liệu trên một màn hình nhỏ
Cuối cùng, tôi đã tạo ra một cuộc tổng kết sau khi có nhiều giải pháp thú vị xuất hiện
Thực sự nhanh chóng mặc dù
Biến hàng thành khối (1) (2)
FooTable – Plugin jQuery ẩn các hàng và cung cấp dữ liệu đó thông qua biểu tượng chuyển đổi
Biến dữ liệu thành biểu đồ
Ẩn các cột để tiết kiệm chỗ, cho phép người dùng bật lại chúng
Ép các ô và cho phép chúng quấn (liên kết chết. ()
Sửa tiêu đề và cho phép nội dung cuộn (1) (2) (3)
Đây là một vài bản trình diễn trực tiếp theo phong cách với các bước khác nhau
Dự phòng nhúng CodePen
Dự phòng nhúng CodePen
Bảng tiêu đề cố định
Đây là một điều khác mà tôi đã viết trong quá khứ cũng như thực hiện một đoạn ghi hình nhỏ. Chúng khá cũ, nhưng bản demo vẫn hoạt động
Cách hiện đại nhất để xử lý các tiêu đề cố định là 

  

    

    

    

  
  

    

    

    

  
147 Đây là một bài viết về điều đó. Thành thật mà nói, tôi không hoàn toàn chắc chắn về cách được đề xuất để sử dụng nó với các bảng. Nó không hoạt động trên 

  

    

    

    

  
  

    

    

    

  
9 trong các trường hợp bình thường. Điều đó có ý nghĩa bởi vì bạn không thể định vị hoàn toàn các bộ phận bên trong bảng. Nhưng nó hoạt động trên 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */20. Dù sao nếu ai đó muốn tìm ra điều đó, đó sẽ là một bản cập nhật tốt cho bài viết này (hoặc một cái gì đó)
Đây là bản demo trực tiếp của plugin jQuery thực hiện thủ thuật này. Tôi có lẽ sẽ đi tìm thứ gì đó như thế này vào những ngày này cho đến khi dính ra nhiều hơn
Dự phòng nhúng CodePen
Sử dụng Emmet để tạo bảng đánh dấu
Emmet là một công cụ tuyệt vời vì nhiều lý do. Một trong số đó là viết tắt HTML và để chúng mở rộng ra thành HTML thực. Vì các bảng rất lặp đi lặp lại và dài dòng nên Emmet là lựa chọn hoàn hảo cho chúng. Emmet cũng hoạt động trên CodePen =)
Bốn hàng bốn cột đơn giản

  

    

    

    

  
  

    

    

    

  
2
Năm hàng có tiêu đề ở bên trái

  

    

    

    

  
  

    

    

    

  
3
Một hàng tiêu đề ở trên cùng

  

    

    

    

  
  

    

    

    

  
4
Nhân viên có ID tăng dần

  

    

    

    

  
  

    

    

    

  
5
Bảng có đầu trang, chân trang và nội dung

  

    

    

    

  
  

    

    

    

  
6
Tương tự nhưng với nội dung ô trong mỗi ô

  

    

    

    

  
  

    

    

    

  
7
Bảng do JavaScript tạo
JavaScript cung cấp một số phương thức rất cụ thể để xử lý các bảng thông qua API 

  

    

    

    

  
  

    

    

    

  
150. Louis Lazaris đã viết một chút về nó gần đây. Bạn có thể sử dụng nó để tạo bảng bằng JavaScript, truy cập các phần tử phụ và thay đổi thuộc tính theo những cách rất cụ thể. Đây là trang MDN với tin sốt dẻo
Đây là tại nơi làm việc
Dự phòng nhúng CodePen
Sắp xếp bảng
Hãy tưởng tượng một bảng có hai cột. Một cho ID nhân viên và một cho Địa chỉ email của nhân viên. Có tiêu đề cho mỗi cột. Sẽ rất hữu ích khi có thể nhấp vào các tiêu đề đó và sắp xếp bảng theo dữ liệu bên trong. Chẳng hạn, thứ tự số, xen kẽ giữa tăng dần và giảm dần, đối với ID và thứ tự chữ cái đối với địa chỉ email. Đó là tất cả những gì sắp xếp bảng. Làm cho dữ liệu hữu ích hơn
Đây là một nhu cầu phổ biến và chung chung, thực sự có đặc điểm kỹ thuật sẵn sàng cho nó. Chỉ cần đặt thuộc tính 

  

    

    

    

  
  

    

    

    

  
61 lên bảng và nó sẽ tự động thực hiện điều đó miễn là bạn tuân theo một số quy tắc được đưa ra trong thông số kỹ thuật
Cập nhật tháng 6 năm 2019. Đã xóa liên kết, nó không còn đề cập đến có thể sắp xếp. Có vẻ như một thông số kỹ thuật đã chết cho bây giờ
Tại thời điểm viết bài này, tôi không biết bất kỳ trình duyệt nào hỗ trợ sắp xếp bảng nguyên bản. Nhưng có rất nhiều tùy chọn của bên thứ ba
tablesorter – “Sắp xếp bảng linh hoạt phía máy khách” dựa trên jQuery
có thể sắp xếp - javascript thô
tablesort – “một thành phần sắp xếp nhỏ và đơn giản cho các bảng. Được viết bằng Javascript và không phụ thuộc”
Điều gì xảy ra với các tập lệnh sắp xếp bảng và chữ thường? 
Dự phòng nhúng CodePen
Nếu những cách đó không giúp bạn, thì Codrops đã tổng hợp 33 tập lệnh sắp xếp bảng khác nhau, vì vậy có rất nhiều tập lệnh để bạn lựa chọn
Và đó là tất cả các giải pháp JavaScript. Chắc chắn có thể sắp xếp dữ liệu ở back-end và hiển thị bảng đã được sắp xếp trong HTML. Điều đó có thể được yêu cầu trong trường hợp các bảng được phân trang trong đó tất cả dữ liệu không có sẵn ngay trong DOM
Đọc tiếp
        */
display: table-row            /* 
         
 









programming
html



Reply
0
0
 Chia sẻ