Hướng dẫn how to style a table column in css - cách tạo kiểu cột trong css

Cái nhìn của một bảng HTML có thể được cải thiện rất nhiều với CSS:

Ernst Handel

Roland Mendel

Áo

Giao dịch đảo

Cười Bacchus Winecellars

Yoshi Tannamuri

Cười Bacchus Winecellars

Yoshi Tannamuri

Canada

Magazzini Alimentari Riuniti

Giovanni Rovelli

Cười Bacchus Winecellars

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Phần tử

display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */2 trong HTML được sử dụng để hiển thị dữ liệu bảng. Bạn có thể nghĩ về nó như 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. Về cơ bản: cột và hàng. Trong bài viết này, chúng tôi 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 bạn cần biết.
Một ví dụ rất cơ bản
Ở đây, một bản demo rất đơn giản về dữ liệu dạng bảng:
Đó là dữ liệu hữu ích trên nhiều trục. Hãy tưởng tượng chạy ngón tay của bạn qua một hàng (ngang) để xem một người duy nhất và thông tin liên quan về họ. Hoặc lên và xuống một cột (dọc) để có cảm giác về sự đa dạng hoặc mô hình dữ liệu về điểm đó.
Đầu và cơ thể
Một điều chúng tôi đã 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à các tiêu đề của các cột. Chúng ta có thể làm điều đó vớ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   /*      */3, sẽ bao bọc 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */4 đầu tiên (nó có thể bao bọc nhiều hàng cần thiết là tất cả thông tin tiêu đề).
HTML sẽ như thế này:
Khi bạn sử dụng 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3, không có 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */4 là con trực tiếp của 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */2. Tất cả các hàng phải nằm trong cả 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3, 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9 hoặc 
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}
0. Lưu ý rằng chúng tôi cũng bao bọc 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   /*      */9 tại đây.
Bàn Chân
Cùng với 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3 và 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9 có 
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}
0 để gói các hàng bảng chỉ ra chân bàn của bảng. Giống như 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3, tốt nhất cho 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ợ.
Quay trở lại trước HTML5, phần tử 
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}
0 được yêu cầu sau 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3 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   /*      */9! Bạn có thể nghĩ rằng đó sẽ là điều cuối cùng trước khi kết thúc 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */2, nhưng không phải là trường hợp. Bây giờ trong HTML5, nó chính xác thì ngược lại, nó phải đi theo 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9 như bạn có thể mong đợi.
Nó có thể được sử dụng, ví dụ, để lặp lại tiêu đề trong trường hợp bảng rất cao/dài, nơi có thể dễ dàng nhìn thấy các tiêu đề cột ở phía dưới so với trên cùng. Mặc dù bạn không nhất thiết phải sử dụng nó theo cách đó.
Các tế bào: td {
display: table-cell;
vertical-align: inherit;
text-align: inherit;
padding: 1px;
}1 và td {
display: table-cell;
vertical-align: inherit;
text-align: inherit;
padding: 1px;
}2
Các ô riêng lẻ của bảng luôn là một trong hai yếu tố: 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3 hoặc 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4. Bạn có thể đặt bất cứ thứ gì bạn muốn bên trong một ô bảng, nhưng đây là những yếu tố làm cho chúng trở thành một ô bảng. Các yếu tố 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 là các tiêu đề bảng xếp hạng của người Viking và các yếu tố 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3 là dữ liệu bảng xếp hạng của Cameron.
Sử dụng bản demo đơ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ỉ tiêu đề cho dữ liệu. Tất cả các hàng còn lại là dữ liệu. Vì thế:
Các yếu tố 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 không nhất thiết phải giới hạn ở trong 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3. Họ chỉ đơn giản là chỉ ra thông tin tiêu đề. Vì vậy, chúng có thể được sử dụng, ví dụ, khi bắt đầ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   /*      */9, nếu điều đó có liên quan. Chúng tôi sẽ bao gồm một trường hợp như thế sau này.
Kiểu dáng cơ bản
Hầu hết các bảng bạn sẽ thấy sử dụng màu sắc và đường nét để phân biệt các phần khác nhau của bảng. Biên giới là rất phổ biến. Theo mặc định, tất cả các ô bảng đều cách nhau 2PX (thông qua bảng kiểu người dùng), như thế này:
Lưu ý khoảng cách thêm nhẹ giữa hàng đầu tiên và phần còn lại. Điều đó được gây ra bởi khoảng cách biên giới mặc định được áp dụng cho 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3 và 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9 đẩy chúng ra một chút thêm một chút. Đây là lề, họ không bị sụp đổ. Bạn có thể kiểm soát khoảng cách đó như:
table {
  border-spacing: 0.5rem;
}
Nhưng phổ biến hơn nhiều là loại bỏ không gian đó. Tài sản đó hoàn toàn bị bỏ qua và không gian bị sụp đổ nếu bạn làm:
table {
  border-collapse: collapse;
}
Chỉ cần một chút đệm, biên giới và làm cho các yếu tố 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 đó được liên kết lại đi một chặng đường dài để tạo ra một bảng đơn giản, kiểu dáng:
Kết nối các tế bào
Có hai thuộc tính quan trọng có thể đi trên bất kỳ phần tử tế bào bảng nào (
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 hoặc 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3): 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
5 và 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
6. Họ chấp nhận bất kỳ số nguyên dương 2 hoặc lớn hơn. Nếu một TD có colspan là 2 (tức là 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
7), nó vẫn sẽ là một tế bào duy nhất, nhưng nó sẽ chiếm không gian của hai ô theo một hàng theo chiều ngang. Tương tự như vậy với 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
6, nhưng theo chiều dọc.
Bạn phải làm một chút toán học tinh thần khi bạn bắt đầu làm việc với các ô được kết nối. Colspan khá dễ dàng. Bất kỳ ô bảng nào cũng có giá trị, một số người, trừ khi nó có thuộc tính 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
5 và sau đó nó có giá trị rất nhiều. Thêm các giá trị cho mỗi ô bảng trong hàng bảng đó để có được giá trị cuối cùng. Mỗi hàng nên có chính xác giá trị đó, nếu không bạn sẽ nhận được một bố cục bảng khó xử mà không tạo ra một hình chữ nhật (hàng dài nhất sẽ dính ra).
Rowspan tương tự nhau, nó chỉ là một chút khó khăn hơn và nhiều hơn một bước nhảy tinh thần, bởi vì các cột aren được nhóm lại như hàng. Nếu một phần tử bảng có thuộc tính 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
6, nó sẽ trải qua hai hàng theo chiều dọc. Điều đó có nghĩa là hàng bên dưới nó nhận được +1 cho số lượng ô bảng bảng và cần một ô bảng ít hơn để hoàn thành hàng.
Có thể rất khó xử khi làm việc trong đầu bạn, nhưng chúng tôi là nhà phát triển ở đây, chúng tôi có thể làm điều đó =).
Thông thường 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 liên quan:
Rộng như họ cần phải là… hoặc lấp đầy container… hoặc xa hơn
Bản thân phần tử bảng là bất thường trong việc nó rộng như thế nào. Nó hoạt động giống như một phần tử cấp khối (ví dụ: 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
1) trong đó nếu bạn đặt một bảng này đến một bảng khác, mỗi bảng sẽ bị hỏng trên dòng riêng của nó. Nhưng chiều rộng thực tế của bảng chỉ rộng như nó cần.
Nếu số lượng văn bản trong các bảng hàng rộng nhất chỉ rộng 100px, bảng sẽ rộng 100px. Nếu số lượng văn bản (nếu đặt trên một dòng) sẽ rộng hơn container, nó sẽ bọc.
Tuy nhiên, nếu văn bản được yêu cầu không bọc (tức là 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
2), bảng rất vui khi được phá ra khỏi container và đi rộng hơn. Các ô bảng cũng sẽ không bọc, vì vậy nếu có quá nhiều để phù hợp, bảng cũng sẽ đi rộng hơn.



Hai bảng trục
Đôi khi nó có ý nghĩa đối với dữ liệu bảng có hai trục. Giống như một tình huống tham chiếu chéo. Bảng nhân là một ví dụ về điều này:
Tôi có thể bỏ qua một 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3 trong tình huống này mặc dù hàng đầu tiên đó là tất cả các tiêu đề. Nó không chỉ quan trọng hơn cột tiêu đề thẳng đứng nên cảm thấy kỳ lạ khi nhóm hàng trên cùng một mình. Chỉ cần thực hiện trên hàng của tất cả 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 và sau đó mỗi hàng tiếp theo với ô đầu tiên chỉ là 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4.
Khi nào sử dụng bảng
Đó là một thời điểm tốt để nghỉ ngơi và thảo luận về thời điểm của các bảng. Có lẽ bạn đã nghe những lời khuyên chung: các bảng dành cho dữ liệu bảng (xem câu đầu tiên của bài đăng trên blog này). Người này có ý nghĩa trong bảng tính không? Kiểm tra thường thích hợp.
Những loại thứ phù hợp trong bảng? Dưới đây là một số: so sánh kế hoạch/giá cả/tính năng, điểm bowling, lưới dữ liệu nội bộ, dữ liệu tài chính, lịch, bảng thông tin thực tế, bảng thông tin, giải quyết logic, v.v.
Thỉnh thoảng bạn có thể nghe thấy: Bàn không đáng tin cậy. Điều đó không đúng - chúng chỉ ra về mặt ngữ nghĩa dữ liệu bảng. Bảng là lựa chọn đúng khi đó là trường hợp.
Khi không sử dụng bảng
Một cách sử dụng không phù hợp cho các bảng là cho bố cục. Điều đó có vẻ phản trực giác. Trong nháy mắt về cách các bàn làm việc có thể làm cho chúng có vẻ lý tưởng cho bố cục. Dễ dàng kiểm soát, cực kỳ logic, có thể dự đoán được và không mong manh.
Có một số vấn đề quan trọng với việc sử dụng bảng cho bố cục mặc dù. Đầu tiên, thẻ HTML có nghĩa là những thứ. Khi chúng tôi đề cập, các yếu tố bảng mô tả về mặt ngữ nghĩa dữ liệu bảng. 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 không phải là người bị phạt trong thư, nhưng bạn không nhận được nhiều giá trị từ HTML nhất có thể.
Nói về ngữ nghĩa đôi khi hơi khó khăn (một số đọc: 1, 2, 3, 4, 5), vì vậy hãy nói về điều gì đó mà tất cả chúng ta thường đồng ý (ngay cả khi chúng ta không tốt như chúng ta 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à đầu đọc màn hình. Trình đọc màn hình đọc các bảng từ trên xuống dưới, trái sang phải. Điều đó có nghĩa là thứ tự làm thế nào trang web của bạn được trình bày đượ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 không phải là lựa chọn khả năng tiếp cận. Chưa kể một đầu đọc màn hình thậm chí có thể thông báo sự khởi đầu của dữ liệu bảng sẽ 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 một thanh bên trên bố cục bên trái. Một bảng sẽ ra lệnh rằng bảng đến trước theo thứ tự nguồn, mặc dù cũng xấu cho khả năng tiếp cận, cũng có khả năng là xấu cho SEO, có khả năng định giá nội dung phụ trợ của bạn trên nội dung chính.
Bạn có thể khắc phục các vấn đề SEO bằng cách sử dụng các thẻ ngữ nghĩa trong các thẻ bảng không? Có thể phần nào, nhưng bây giờ bạn sử dụng gấp đôi HTML. Nếu bạn thực sự cần các khả năng bố cục của 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 bằng cách nào đó hoàn toàn bị mắc kẹt bằng cách sử dụng thẻ bảng để bố trí, hãy sử dụng ARIA 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
6 trên bảng để chỉ ra như vậy.
Khi tôi viết điều 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í hấp dẫn như một lựa chọn bố cục. Chúng tôi thấy việc sử dụng nhiều hơn các định vị cố định và tuyệt đối mà bạn không thể làm trong bảng. Chúng tôi thấy Flexbox là tuyệt vời và ở ngay bên cạnh khả năng sử dụng chính thống. Chúng tôi thấy bố cục lưới bắt đầu lớn lên. Chúng tôi nhìn thấy khối nội tuyến được sử dụng mạnh mẽ. Chúng tôi nhìn thấy sự mong manh của những chiếc phao trong thời xa xưa biến mất.
Hiếm khi bạn thấy các trang web hiện đại chạm vào bảng để bố cục. Lần nắm giữ cuối cùng là email HTML. Phong cảnh của những gì hiển thị email là siêu rộng. Đó là tất cả mọi thứ chúng tôi đối phó trên web, cộng với thế giới của các ứng dụng gốc trên cả thiết bị di động và máy tính để bàn trên hệ điều hành mới và cổ xưa. Bạn có thể thực hiện một số cải tiến tiến bộ cho email, nhưng bản thân bố cục vẫn thường được coi là được thực hiện an toàn nhất trong các bảng. Điều đó được chứng minh bằng thực tế là các dịch vụ gửi email chính vẫn cung cấp các mẫu như bảng.
Làm cho các yếu tố ngữ nghĩa cư xử như một cái bàn
CSS có các thuộc tính để làm cho bất kỳ yếu tố nào bạn muốn hoạt động như thể đó là một yếu tố bảng. Bạn cần phải cấu trúc chúng về cơ bản như một bảng, và nó sẽ phải 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 điều đó. Tôi cũng không tào lao với nó, đôi khi nó thực sự hữu ích. Nếu kiểu bố cục đó giải quyết một vấn đề và không có ý nghĩa thứ tự tiêu cực, hãy sử dụng nó.
Don Tiết sử dụng các phong cách nội tuyến, nhưng chỉ để hiểu ở đây, đó là cách mà điều đó sẽ diễn ra:

  

    

    

    

  
  

    

    

    

  
Một mẹo tiện dụng ở đây là bạn thậm chí không cần phần tử hàng trong đó nếu bạn không muốn. Một loạt các yếu tố 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
7 là con của yếu tố 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
8 sẽ hoạt động như tất cả chúng đều ở trong một hàng.
Bạn luôn thay đổi thuộc tính hiển thị của phần tử để có được hành vi kiểu bảng. Ở đây, 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   /*      */
Thông báo không có sự thay thế 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4. Đó chỉ dành cho giá trị ngữ nghĩa. Nó khác hoạt động giống như một 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3, vì vậy, không cần phải sao chép nó trong CSS.
Ngoài ra còn có 
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
1 khá thú vị. Hãy nhớ rằng chúng tôi đã nói về độ rộng của các yếu tố bảng kỳ lạ ở trên. Chúng chỉ rộng như họ cần, nhưng đã vượt qua những dòng mới. Nó gần giống như chúng là các yếu tố chặn nội tuyến xảy ra để phá vỡ. Điều này làm cho chúng theo nghĩa đen giống như các yếu tố khối nội tuyến, mà không bị phá vỡ.
Nếu bạn muốn tìm hiểu thêm về việc sử dụng các yếu tố ngữ nghĩa nhưng cũng là bố cục kiểu bàn, hãy xem cuốn sách mọi thứ bạn biết về CSS là sai!
Tôi không bao giờ là một fan hâm mộ lớn của tiêu đề đó vì nó gợi ý rằng sử dụng bố cục kiểu bảng này là cách đúng đắn và bất kỳ kỹ thuật bố cục nào khác bạn sử dụng là sai. Nhưng như tôi đã nói, điều này có thể rất hữu ích và tôi đã vui mừng vì nó trong CSS. Chỉ cần nhận thức sâu sắc rằng bất kể loại yếu tố nào bạn sử dụng để tạo bố cục dựa trên bảng, nó vẫn phải chịu các vấn đề tương tự (phần lớn phụ thuộc thứ tự nguồn).
Có một vài yếu tố ở trên chúng tôi đã chạm vào. Hãy cùng nhìn vào tất cả các yếu tố liên quan đến bảng HTML. Bạn biết những gì, chúng tôi cũng có thể sử dụng một bảng để làm điều đó:
        */
display: table-row            /* 
         

Yếu tố
Nó là gì
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */2
        */
display: table-row            /* 
         
Bản thân bàn
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
3
Chú thích cho bảng. Giống như một hình tượng cho một con số.
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3
        */
display: table-row            /* 
         
Tiêu đề bảng
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9
        */
display: table-row            /* 
         
Thân bàn
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}
0
Chân bàn bàn
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */4
        */
display: table-row            /* 
         
Một hàng bảng
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4
Một ô bảng là một tiêu đề
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3
Một ô bảng là dữ liệu

  
  

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

  
  

    
Cell
1
Một nhóm các cột
Có một số ít thuộc tính cụ thể 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 toàn cầu điển hình. Đã từng có khá nhiều, nhưng hầu hết trong số chúng đều cụ thể cho kiểu dáng và do đó không được dùng (vì đó là công việc của CSS).
Thuộc tính
(Các) yếu tố được tìm thấy trên
Những gì nó làm
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
5
Th, td
mở rộng một tế bào rộng tới 2 tế bào trở lên
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
6
Th, td
mở rộng một tế bào rộng tới 2 tế bào trở lên

  
  

    
Cell
4
col
Làm cho cột áp dụng cho nhiều cột hơn 2 hoặc nhiều cột

  
  

    
Cell
5
bàn
Cho biết bảng nên cho phép sắp xếp. Cập nhật: Tôi đã nói rằng điều này đã bị xóa khỏi thông số kỹ thuật vì thiếu triển khai.UPDATE: I’m told this was removed from spec because of lack of implementations.

  
  

    
Cell
6
TD
Chuỗi được phân tách không gian tương ứng với ID, của các yếu tố 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 liên quan đến dữ liệu

  
  

    
Cell
8
thứ tự
Hàng | col | Rowgroup | Colgroup (mặc định) - Về cơ bản chỉ định trục của tiêu đề. Mặc định là một tiêu đề đang hướng đến một cột, là điển hình, nhưng một hàng cũng có thể bắt đầu bằng một tiêu đề, nơi bạn sẽ phạm vi tiêu đề đó đến hàng hoặc Rowgroup.
Thuộc tính không dùng nữa
Don lồng sử dụng bất kỳ trong số này. Được không dùng nữa. Mặc dù họ có thể làm việc trong một số trình duyệt ngày hôm nay, có khả năng họ ngừng làm việc trong tương lai.
Thuộc tính không dùng nữa
Sử dụng cái gì thay thế
căn chỉnh
Sử dụng thuộc tính 

  
  

    
Cell
9 thay thế
Valign
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
00 thay thế
char
Câu trả lời chính xác là sử dụng 
table {
  border-collapse: collapse;
}
01 trong đó x là ký tự để sắp xếp, nhưng nó chưa được triển khai ở bất cứ đâ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.
charoff
Xem ở trên
BGColor
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
02 thay thế
ABBR
Cân nhắc bắt đầu nội dung tế bào bởi 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 tế bào và sử dụng nội dung dài làm mô tả của ô bằng cách đặt nó vào thuộc tính ____103
trục
Sử dụng thuộc tính 

  
  

    
Cell
8 thay thế
biên giới
Sử dụng thuộc tính 

  

    

    

    

  
  

    

    

    

  
8 thay thế
Cellpadding
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
06 thay thế
Tế bào
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
07 thay thế
khung
Sử dụng thuộc tính 

  

    

    

    

  
  

    

    

    

  
8 thay thế
Cellpadding
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
06 thay thế
Tế bào
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
07 thay thế
khung
quy tắc
Người dùng 











8 thuộc tính thay thế
bản tóm tắt
Sử dụng phần tử 
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
3 thay thế
bề rộng
Sử dụng thuộc tính 
table {
  border-collapse: collapse;
}
11 thay thế
Các ngăn xếp bảng
Có một ngăn xếp thẳng đứng ngụ ý của các yếu tố bảng, giống như có trong bất kỳ cha mẹ HTML nào> kịch bản hậu duệ. Điều quan trọng là phải hiểu trong các bảng vì nó có thể đặc biệt hấp dẫn khi áp dụng những thứ như hình nền cho bản thân bảng hoặc các hàng bảng, chỉ để có nền trên một ô bảng.
Ở đây, cách thức trông như thế nào (sử dụng tính năng Firefox 3D trong các công cụ Dev của nó):
Quy tắc phong cách quan trọng cho bảng
vertical-align
Bạn có thể sử dụng hầu hết các thuộc tính CSS trên các yếu tố bảng. 
table {
  border-collapse: collapse;
}
12 hoạt động trên các bảng giống như trên bất kỳ yếu tố nào khác, ví dụ. Và các quy tắc của Cascade áp dụng. Áp dụng 
table {
  border-collapse: collapse;
}
12 cho bảng, nhưng một 
table {
  border-collapse: collapse;
}
12 khác trên ô bảng, ô bảng thắng vì đó là phần tử thực tế với văn bản bên trong.
sub
super
text-top
text-bottom
middle
top
bottom
%
length
Các thuộc tính này là duy nhất cho các yếu tố bảng hoặc chúng hoạt động duy nhất trên các yếu tố bảng.
white-space
Tài sản CSS
pre
nowrap
pre-wrap
pre-line
Những giá trị khả thi
border-collapse
Những gì nó làm
separate
Baselinesubsupertext-toptext-bottommiddletopbottom%chiều dài
border-spacing
Sắp xếp nội dung bên trong một ô. Hoạt động đặc biệt tốt trong các bảng, mặc dù chỉ có trên cùng/dưới/giữa có nhiều ý nghĩa trong bối cảnh đó.
NormalPrenowrappre-wrappre-line
Kiểm soát cách kết thúc văn bản trong một ô. Một số dữ liệu có thể cần phải là tất cả trên một dòng để có ý nghĩa.
Sắp xếp nội dung bên trong một ô. Hoạt động đặc biệt tốt trong các bảng, mặc dù chỉ có trên cùng/dưới/giữa có nhiều ý nghĩa trong bối cảnh đó.
NormalPrenowrappre-wrappre-line
Kiểm soát cách kết thúc văn bản trong một ô. Một số dữ liệu có thể cần phải là tất cả trên một dòng để có ý nghĩa.
Sắp xếp nội dung bên trong một ô. Hoạt động đặc biệt tốt trong các bảng, mặc dù chỉ có trên cùng/dưới/giữa có nhiều ý nghĩa trong bối cảnh đó.
NormalPrenowrappre-wrappre-line
table-layout
tự động hóa
fixed
table {
  border-collapse: collapse;
}
21 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 điều này thành 
table {
  border-collapse: collapse;
}
22, độ rộng của bảng và cột được đặt theo chiều rộng của các phần tử bảng và col hoặc theo chiều 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 chiều rộng cột, có thể tăng tốc độ kết xuất. Nếu nội dung trong các ô tiếp theo có thể phù hợp, thuộc tính tràn sẽ xác định những gì xảy ra.
Danh sách này không đầy đủ. Có những quirk CSS khác có liên quan đến bảng. Chẳng hạn, bạn có thể tương đối định vị một ô bảng để nhét nó xung quanh hoặc hoàn toàn định vị mọi thứ trong đó. Có những cách mặc dù.
Nếu bạn có thể nghĩ về sự kỳ lạ của CSS với các bảng, hãy chia sẻ trong các ý kiến ​​dưới đây.
Kiểu mặc định / kiểu người dùng kiểu người dùng
Webkit làm điều này:
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}
Tôi cũng đã kiểm tra từng yếu tố trong các công cụ Chrome Dev, hiện đang bị chớp mắt và nó vẫn giống nhau.
Nó rất hài hước mặc dù. Chắc chắn, văn bản trong 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4S được tập trung (
table {
  border-collapse: collapse;
}
24) theo mặc định. Nhưng đó không phải là trong bảng kiểu UA. Không phải là một vấn đề lớn mà khá bí ẩn và khiến bạn tự hỏi những điều bí ẩn khác xảy ra trong việc kết xuất.
Bảng kiểu UA cho các bảng khác nhau từ trình duyệt đến trình duyệt. Ví dụ, trong Firefox (ở đây là bảng kiểu UA 3.6, nhưng điều này cũng đúng trong V23) Các ô bảng có điều này:
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
Đáng chú ý nhất là 1px của đệm mà Webkit không có. Không phải là một thỏa thuận lớn trong hầu hết các trường hợp, chắc chắn, nhưng nó là khác nhau. Đó là những gì CSS đặt lại (và các dự án liên quan) là tất cả về: loại bỏ sự khác biệt. Vì vậy, hãy để Lôi kiểm tra những thứ đó.
Đặt lại các kiểu bảng mặc định
Việc thiết lập lại CSS phổ biến nhất trên thế giới, Meyer Reset, làm điều này với các bảng:
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
Nó đã thực hiện theo cách tương tự trong thiết lập lại HTML5 và HTML5 (Doctor) Reset StyleSheet.



Có một giải pháp thay thế cho việc đặt lại CSS mặc dù, Normalize.css. Triết lý hơi khác nhau. Thay vì không có tất cả các kiểu, nó đặc biệt đặt các kiểu không nhất quán được biết đến với một mặc định hợp lý. Lời khuyên chung của tôi về việc sử dụng Normalize.css là: Don Tiết loại bỏ bất cứ thứ gì từ nó. Nếu nó ở đó, nó cần phải là sự 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 chỉ làm điều này với các bảng:
table {
  border-collapse: collapse;
  border-spacing: 0;
}
Tôi sẽ phải đào sâu vào lý do ở đây sâu hơn một chút vì nó có vẻ bất thường
Tôi là một fan hâm mộ của 
table {
  border-collapse: collapse;
}
25 vì khoảng cách giữa các ô thường khó xử, nhưng, mặc định trong mọi trình duyệt mà tôi biết là 
table {
  border-collapse: collapse;
}
26 vì vậy không cần phải bình thường hóa.
Nếu 
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */0 là 
table {
  border-collapse: collapse;
}
28, 
table {
  border-collapse: collapse;
}
07 không có vấn đề gì.
Các yếu tố tế bào bảng đang cần bình thường hóa (ví dụ: sự khác biệt đệm Firefox) nhưng đó không phải là ở đó.
Không phải là một vấn đề lớn.
Đây là loại điều tôi có thể thường làm:
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
“Các yếu tố ngụ ý” và thẻ không được giải thích
Kiểm tra bit HTML khá khó xử này:
        */
display: table-row            /* 
         

  
  

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

  
  

    
Cell
0 chỉ là một trong những yếu tố không có nội dung mà không bao giờ cần một thẻ đóng. Như 
table {
  border-collapse: collapse;
}
31 / 
table {
  border-collapse: collapse;
}
32
Phần tử 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3 không cần phải đóng trong một số trường hợp nhất định: Thẻ cuối có thể bị bỏ qua, nếu nó ngay lập tức theo sau là phần tử 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4 hoặc 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
3 hoặc nếu không có thêm dữ liệu trong phần tử cha của nó.
Thẻ đóng 
table {
  border-collapse: collapse;
}
36 còn thiếu là cùng một câu chuyện: Thẻ cuối có thể bị bỏ qua nếu phần tử 
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */4 ngay lập tức được theo sau 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   /*      */4 hoặc nếu nhóm cha mẹ (
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3, 
display: table                /* 
        */
display: table-row            /* 
         
     */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9 hoặc 
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}
0) . ”
Nếu chúng tôi kiểm tra bảng kết xuất 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ị với các thẻ đóng. Những thứ đó được tự động thêm 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à 
        */
display: table-row            /* 
         

  
  

    
Cell
0 được bọc trong một 

  
  

    
Cell
1 tự động. Ngay cả khi chúng ta đã làm:
table {
  border-collapse: collapse;
}
0
Then:
table {
  border-collapse: collapse;
}
1
Bạn sẽ nghĩ rằng tế bào thứ hai sẽ có màu đỏ, không phải là đầu tiên, bởi vì nhóm đầu tiên của nhóm chỉ ảnh hưởng đến tế bào thứ hai. Nhưng khi được hiển thị, cả hai cột đó đều được bọc trong một nhóm, vì vậy bộ chọn CSS sẽ chọn điểm đầu tiên.
Phần tử 
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */9 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ộ can đảm của bàn sẽ được bọc trong tbody. Nếu bạn sử dụng một cái gì, toàn bộ bảng sẽ được bọc trong đó cho đến khi nó tìm thấy một tbody, thì nó sẽ tự động đóng cửa nếu bạn don don, 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 tao, bạn có thể tưởng tượng những gì xảy ra (mặc dù hãy nhớ rằng tfoot nên đến trước tbody).
Bạn thực sự có thể sử dụng các yếu tố này trong các bộ chọn CSS mặc dù bạn đã đặt chúng vào HTML thực tế của bạn. Tôi có lẽ sẽ khuyên bạn chỉ vì điều đó chỉ vì những bộ chọn thẻ kỳ lạ, khó hiểu và kiểu dáng thường không được khuyến khích.
Làm một cái bàn không phải là 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 đó, nơi bạn cần buộc một yếu tố bảng để không thể hiện hành vi bố trí kiểu bàn của nó và hoạt động giống như một yếu tố thông thường.
Bí quyết về cơ bản là để đặt lại thuộc tính hiển thị của các ô bảng:
table {
  border-collapse: collapse;
}
2
Chúng ta có thể nhanh chóng không gặp một bàn:
Chỉ cần được an toàn, tôi đã thiết lập lại toàn bộ cô ấy. Chỉ làm cho tôi cảm thấy tốt hơn khi biết các yếu tố phụ huynh cũng được cùng nhau đi xe và giành chiến thắng.
table {
  border-collapse: collapse;
}
3
Đ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 các màn hình lớn nhưng cần sự thay đổi đáng kể để có ý nghĩa trên các màn hình nhỏ hơn. Có một phần trên đó dưới đây.
Khả năng tiếp cận bảng
Chúng tôi đã nói về các vấn đề với việc sử dụng các bảng để bố trí và khả năng truy cập. Nhưng giả sử bảng đang được sử dụng chính xác cho dữ liệu bảng, vẫn còn khá nhiều mối quan tâm 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 các 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 người đọc màn hình
Khả năng sử dụng web: Bảng dữ liệu có thể truy cập
Bảng dải ngựa vằn
Nếu bạn không đặt một màu nền trên các phần tử ô bảng, bạn có thể tự đặt chúng trên các hàng bảng. Vì vậy, ở cơ bản nhất, bạn có thể làm:
table {
  border-collapse: collapse;
}
4
Chúng tôi sử dụng Tbody trong bộ chọn vì nó không có khả năng bạn muốn sọc tiêu đề và hàng chân trang. Đặt 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 mà không hiểu: nth-child () (khá cũ), bạn có thể sử dụng jQuery để làm điều đó.
Các nghiên cứu dường như cho thấy ngựa vằn tước nói chung là một ý tưởng tốt.
Làm nổi bật các hàng và cột
Hightlighting Một hàng hạt là khá dễ dàng. Bạn có thể thêm một tên lớp vào một hàng cụ thể cho điều đó:
table {
  border-collapse: collapse;
}
5
Làm nổi bật một cột là một chút khó khăn hơn. Một khả năng là sử dụng phần tử 
        */
display: table-row            /* 
         

  
  

    
Cell
0, cho phép chúng tôi đặt các kiểu cho các ô xuất hiện trong cột đó. Thật kỳ lạ khi quấn đầu bạn, bởi vì các tế bào bị ảnh hưởng bởi 

  
  

    
Cell
0 aren aren thực sự là hậu duệ của nó. Trình duyệt chỉ biết ý bạn.
Một bảng có bốn cột trong mỗi hàng sẽ có bốn phần tử 

  
  

    
Cell
0:
table {
  border-collapse: collapse;
}
6
Sau đó, bạn có thể làm nổi bật một cái cụ thể, như:
table {
  border-collapse: collapse;
}
7
Tuy nhiên điều này hiếm khi hữu ích. Nếu bạn đặt nền của phần tử hàng hoặc phần tử ô bảng, điều đó sẽ luôn đánh bại nền của phần tử cột. Bất kể tính đặc thù.
Bạn có thể tốt hơn khi đặt một tên lớp trên mỗi phần tử ô bảng riêng lẻ xảy ra để khớp với vị trí cột đó trong hàng. Giống:
table {
  border-collapse: collapse;
}
8
Làm nổi bật cột/hàng/ô khi di chuột
Làm nổi bật tế bào là rất dễ dàng. Bạn có thể làm điều đó ngay trong CSS:
table {
  border-collapse: collapse;
}
9
Hàng làm nổi bật là dễ dàng như vậy. Bạn có thể đặt nền trên các hàng bảng và nó sẽ hiển thị miễn là bạn không đặt nền trên các ô bảng.

  

    

    

    

  
  

    

    

    

  
0
Nếu bạn đặt nền trên các ô bảng, bạn luôn có thể chỉ để 
table {
  border-collapse: collapse;
}
48 vì vậy vẫn còn khá dễ dàng.
Đánh dấu cột là Tricker. Bạn có thể sử dụng 
table {
  border-collapse: collapse;
}
49 bởi vì các cột đó không phải là các yếu tố thực tế 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ó trong Vanilla JavaScript ở đây, chỉ để cho vui:
Nó hoạt động như thế này:



Nhận một bộ sưu tập tất cả các ô
Liên kết một sự kiện chuột và chuột với tất cả các tế bào đó
Khi sự kiện chuột bị cháy, hãy lấy vị trí trong hàng của ô đó
Vòng lặp qua tất cả các hàng và thêm một lớp nổi bật vào mỗi ô trong hàng đó phù hợp với vị trí đó
Khi sự kiện chuột bị cháy, hãy loại bỏ lớp nổi bật khỏi tất cả các ô
Và ở đây tôi đã kết hợp cả hai hàng và cột làm nổi bật. Tôi đã sử dụng jQuery để làm cho tất cả 12 dòng mã (JavaScript thô đã trở nên khá mệt mỏi).
Nó cùng một khái niệm, nó chỉ dễ dàng hơn nhiều để tạo ra các bộ sưu tập phần tử và tìm và chọn bằng các chỉ mục trong jQuery.
Bảng kiểu dáng đẹp
Một số độ sâu, các tiêu đề khác biệt trực quan và một thiết bị đầu cuối phù hợp với tiêu đề.
Khi bảng được bay lơ lửng, chỉ có hàng hiện tại được làm nổi bật vẫn là văn bản tối, những cái khác mờ dần trở lại. Cũng lưu ý về điều này: các góc khuất trên bàn chỉ có thể trong khi bạn có 
table {
  border-collapse: collapse;
}
26
Ở đây, một nơi khác mà các hàng không được phát hiện theo nghĩa đen mờ:
Twitter Bootstrap có kiểu dáng bảng rất tối thiểu:
Điều này, như một phần thưởng, có kiểm soát bàn phím!
Tôi đã cố gắng giữ một bộ sưu tập các bảng được thiết kế tốt để 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 viết trên blog.
Tìm kiếm bảng
Trường hợp phân loại bảng có thể khá phức tạp, 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 cứ đâu liên tiếp, hãy hiển thị và ẩn các giá trị khác. Với jQuery có thể dễ dàng như:

  

    

    

    

  
  

    

    

    

  
1
Ở đây, một cách khác với regexp thay thế: thay vào đó:
Và ở đây, trên JavaScript Raw:
Bàn có thể khó khăn trong các thiết kế chất lỏng/đáp ứng
Tôi đã viết về điều này trong quá khứ và tôi nghĩ rằng loại đồ họa này tổng hợp kinh 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 vòng một khi một loạt các giải pháp thú vị xuất hiện.
Mặc dù vậy, thật nhanh:
Biến các hàng thành các 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 để lưu phòng, cho phép người dùng bật lại
Các tế bào squish và cho phép chúng kết thúc (liên kết chết :()
Sửa tiêu đề và cho phép cơ thể cuộn (1) (2) (3)
Ở đây, một vài bản demo trực tiếp theo phong cách với các tác phẩm khác nhau:
Đâ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 chút screencast. Đó là khá cũ, nhưng bản demo vẫn hoạt động.
Cách xử lý các tiêu đề cố định hiện đại nhất là 
table {
  border-collapse: collapse;
}
51 ở đây, một bài viết về điều đó. Mặc dù vậy, tôi thực sự không chắc chắn cách sử dụng nó với các bảng. Nó không hoạt động trên 
display: table                /*      */
display: table-cell           /*         */
display: table-column         /* */
display: table-column-group   /* */
display: table-footer-group   /*      */
display: table-header-group   /*      */3 trong những trường hợp bình thường. Điều đó có ý nghĩa bởi vì bạn có thể hoàn toàn định vị trong bảng bên trong. Nhưng nó hoạt động trên 
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}
4. Dù sao nếu ai đó muốn tìm ra điều đó, thì đó 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, một bản demo trực tiếp của một plugin jQuery thực hiện thủ thuật. Tôi có thể đi cho một cái gì đó như thế này những ngày này cho đến khi dính ra nhiều hơn.
Sử dụng Emmet để tạo đánh dấu bảng
Emmet là một công cụ tuyệt vời cho một loạt các lý do. Một trong số đó là viết các chữ viết tắt HTML và khiến chúng mở rộng thành HTML thực. Vì các bảng rất lặp đi lặp lại và dài dòng, Emmet là hoàn hảo cho chúng. Emmet cũng hoạt động trên codepen =)
Bốn hàng đơn giản và bốn cột

  

    

    

    

  
  

    

    

    

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

  

    

    

    

  
  

    

    

    

  
3
Một hàng tiêu đề trên đầu

  

    

    

    

  
  

    

    

    

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

  

    

    

    

  
  

    

    

    

  
5
Bảng với tiêu đề, chân trang và nội dung

  

    

    

    

  
  

    

    

    

  
6
Giống nhau nhưng với nội dung tế bào trong mỗi ô

  

    

    

    

  
  

    

    

    

  
7
JavaScript tạo bảng
JavaScript cung cấp một số phương pháp rất cụ thể để xử lý các bảng thông qua API 
table {
  border-collapse: collapse;
}
54. Louis Lazaris đã viết một chút về nó gần đây. Bạn có thể sử dụng nó để tạo các bảng với JavaScript, truy cập các yếu tố phụ và thay đổi thuộc tính theo những cách rất cụ thể. Ở đây, trang MDN với tin sốt dẻo.
Ở đây, điều đó tại nơi làm việc:
Phân loại bảng
Hãy tưởng tượng một bàn với hai cột. Một cho nhân viên ID, và một cho địa chỉ email của nhân viên. Có các tiêu đề cho mỗi cột. Sẽ rất hữu ích để 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à bảng chữ cái cho các địa chỉ email. Đó là những gì sắp xếp bảng là tất cả về. 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 
        */
display: table-row            /* 
         

  
  

    
Cell
5 lên bảng và nó sẽ tự động thực hiện nó miễn là bạn tuân theo một vài quy tắc được nêu trong thông số kỹ thuật.
Cập nhật tháng 6 năm 2019: Liên kết bị xóa, nó không còn đề cập đến sắp xếp. Có vẻ như một thông số kỹ thuật đã chết bây giờ. Removed link, it no longer mentions sortable. Seems like a dead spec for now.
Vào thời điểm viết bài này, tôi không biết về bất kỳ trình duyệt nào hỗ trợ phân loại bảng. Nhưng có rất nhiều lựa chọn của bên thứ ba!
Tableitor-Sắp xếp bảng khách hàng linh hoạt dựa trên jQuery
Có thể sắp xếp - JavaScript thô
Tablesort - Một thành phần phân loại nhỏ và đơn giản cho các bảng. Được viết bằng JavaScript và phụ thuộc miễn phí ”
Những gì với các tập lệnh sắp xếp bảng và chữ thường? Dù sao đi nữa, ở đây, một bản demo của Tabledorter:
Nếu những người don don làm điều đó cho bạn, CODROPS đã làm tròn 33 tập lệnh phân loại bảng khác nhau, vì vậy có rất nhiều lựa chọn.
Và đó là tất cả các giải pháp JavaScript. Nó chắc chắn có thể sắp xếp dữ liệu ở phía sau 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ả các dữ liệu không có sẵn ngay trong DOM.
Thêm thông tin
Thông số kỹ thuật
Mdn
 

Bạn có thể sử dụng CSS để tạo kiểu bảng HTML không?
CSS cung cấp một số thuộc tính cho các bảng kiểu dáng.Các thuộc tính này cho phép bạn tham gia vào những thứ khác trong các ô phân tách trong bảng, chỉ định đường viền bảng và chỉ định chiều rộng và chiều cao của bảng.Hướng dẫn này sẽ thảo luận, với các ví dụ, cách tạo kiểu một bảng bằng CSS.. These attributes allow you to—among other things—separate cells in a table, specify table borders, and specify the width and height of a table. This tutorial will discuss, with examples, how to style a table using CSS.
Bạn có thể tạo kiểu cho một hàng bảng?
Như trường hợp với tất cả các phần của bảng, bạn có thể thay đổi diện mạo của một hàng bảng và nội dung của nó bằng CSS.Bất kỳ kiểu nào được áp dụng cho phần tử sẽ ảnh hưởng đến các ô trong hàng trừ khi được ghi đè bởi các kiểu được áp dụng cho các ô đó.
Làm thế nào tôi có thể làm cho bàn của tôi hấp dẫn hơn trong HTML?
Dưới đây là 10 lời khuyên sẽ giúp bạn hiểu các lựa chọn của bạn và xây dựng các bảng đẹp và dễ đọc:..
 
Sử dụng HTML ..
 
Thêm kiểu dáng cơ bản với HTML ..
 
Thêm mã CSS ..
 
Sử dụng danh sách HTML + CSS3 ..
 
Sử dụng các biểu tượng trong HTML ..
 
Thêm màu sắc nổi bật ..
 
Sử dụng các mẫu bảng ..
 
Sử dụng tiện ích bảng DUDA ..
 

Đọc tiếp








programming
css
Style table CSS
Table HTML
Table style HTML
border-collapse
Table border
Table HTML w3school



Reply
6
0
 Chia sẻ




 







Bài Viết Liên Quan










Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Món Ngon
Bánh









Họ tiếng nhật của bạn là gì năm 2024



là ai
Hỏi Đáp
Là gì









Ý nghĩa của header from top là gì năm 2024



mẹo hay
Hỏi Đáp
Là gì
Top List
Top
Header la gì
Footer la gì









Tự học tiếng anh như thế nào hiệu quả năm 2024



mẹo hay
Hỏi Đáp
Thế nào
Học Tốt
Học
Tiếng anh
Học tiếng Anh









Cơ thể con người năm hiến máu bao nhiêu lần năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Khỏe Đẹp
Cơ thể









Tuổi đinh mão xây nhà năm nào tốt năm 2024



mẹo hay
Xây Đựng
Xây
Nhà









Khoán chi đến sản phẩm cuối cùng là gì năm 2024



là ai
Hỏi Đáp
Là gì









Các yếu tố cấu thành văn hóa tổ chức năm 2024



mẹo hay









Thế nào là số vô tỉ cho ví dụ năm 2024



mẹo hay
Hỏi Đáp
Thế nào
Ví dụ









Quà trung thu tiếng anh là gì năm 2024



là ai
Hỏi Đáp
Là gì
Học Tốt
Tiếng anh
Mid-Autumn gift













Đẻ mổ tối đa được bao nhiêu lần năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu









Thiết kế quán trà sữa bao nhiêu tiền năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Món Ngon
Trà sữa









Top nước hoa hồng se khít lỗ chân lông năm 2024



mẹo hay
Top List
Top









Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024



mẹo hay









Daylight is coming like a rentless milkman upstairs là gì năm 2024



là ai
Hỏi Đáp
Là gì









Đặt cọc mua đất bao nhiêu phần trăm năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu









Vở bài tập toán lớp 5 trang 51 52 năm 2024



mẹo hay
Khỏe Đẹp
Bài tập









Ngôn ngữ chính của singapore là gì năm 2024



là ai
Hỏi Đáp
Là gì









Văn mẫu lớp 8 bài viết số 1 đề 2 năm 2024



mẹo hay
Soạn văn 8









Nhẫn tỳ hưu bạc giá bao nhiêu năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Cryto
Giá 













Quảng Cáo








Có thể bạn quan tâm




Mục tiêu bài học chi tiết đánh giá được năm 2024

1 tháng trước
. bởi
ThunderousFlask





Asias next top model 5 tap 6 năm 2024

1 tháng trước
. bởi
HorribleBattling





Cầu gỗ lim huế bao nhiêu tiền năm 2024

1 tháng trước
. bởi
YieldingSwimmer





Cân bằng sinh học là gì cho ví dụ năm 2024

1 tháng trước
. bởi
UmbilicalProceeding





Tổng hợp kiến thức toán ôn thi đại học năm 2024

1 tháng trước
. bởi
ImpossibleEquation





Đề kiểm tra toán lớp 3 tuần 3 năm 2024

1 tháng trước
. bởi
FundamentalistTemplate





Cây dù che nắng giá bao nhiêu năm 2024

1 tháng trước
. bởi
TraditionalPhrasing





Quy trình ứng dụng cntt trong kiểm tra đánh giá năm 2024

1 tháng trước
. bởi
AdrenalProjection





Bài 94 trang 46 sách giáo khoa toán lớp 6 năm 2024

1 tháng trước
. bởi
SurplusInactivity





Khắc phục lỗi thẻ nhớ không cho coppy dữ liệu năm 2024

1 tháng trước
. bởi
FlattenedSaturday








Toplist được quan tâm



#1

Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước



#2

Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước



#3

Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước



#4

Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước



#5

Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước



#6

Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước



#7

Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước



#8

Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước



#9

Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước






Quảng cáo







Xem Nhiều




Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024

11 giờ trước





Thế nào là số vô tỉ cho ví dụ năm 2024

1 tuần trước





Đẻ mổ tối đa được bao nhiêu lần năm 2024

1 tuần trước





Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

2 ngày trước





Tự học tiếng anh như thế nào hiệu quả năm 2024

3 ngày trước





Thiết kế quán trà sữa bao nhiêu tiền năm 2024

1 tuần trước





Tuổi đinh mão xây nhà năm nào tốt năm 2024

5 ngày trước





Khoán chi đến sản phẩm cuối cùng là gì năm 2024

6 ngày trước





Họ tiếng nhật của bạn là gì năm 2024

2 ngày trước





Các yếu tố cấu thành văn hóa tổ chức năm 2024

6 ngày trước





 

Quảng cáo


























Chúng tôi

Giới thiệu
Liên hệ
Tuyển dụng
Quảng cáo





Điều khoản

Điều khoản hoạt động
Điều kiện tham gia
Quy định cookie





Trợ giúp

Hướng dẫn
Loại bỏ câu hỏi
Liên hệ





Mạng xã hội

 Facebook
 Twitter
 LinkedIn
 Instagram









  



Bản quyền © 2021 Học Tốt Inc.