CSS viền bảng

- [Người hướng dẫn] Cuối cùng, chúng ta đã đến chương mà chúng ta bắt đầu làm cho nó đẹp. Và tôi biết rất nhiều bạn đã nín thở chờ đợi điều này. Vì vậy, chúng ta sẽ lấy cái bảng mà chúng ta đã làm trong chương trước và bây giờ chúng ta sẽ áp dụng một số kiểu dáng để làm cho nó đẹp. Tất cả các quy tắc thông thường về CSS áp dụng ở đây để bạn có thể áp dụng bất kỳ thuộc tính CSS hiện có nào cho các ô của bảng, các hàng của bảng, dữ liệu bảng, tiêu đề bảng, v.v. nếu thích hợp. Bạn sẽ tìm thấy cách sử dụng các bộ chọn CSS thú vị trong chương này và tôi sẽ giải thích các bộ chọn đó, nhưng nếu bạn muốn tìm hiểu thêm về các bộ chọn, có lẽ bạn nên xem qua khóa học về bộ chọn CSS của tôi, có tại đây . Được rồi, vì vậy điều đầu tiên tôi sẽ làm ở đây là tôi sẽ loại bỏ các màu đỏ, xanh dương và vàng tuyệt vời mà tôi đã đưa vào chương trước để minh họa một số tính năng ở đây trong . Chúng ta không cần chúng, tạm biệt. Sau đó, điều tiếp theo cần làm, một khi bạn thường bắt đầu làm việc với một bảng như thế này, sẽ rất hữu ích nếu đặt đường viền cho mọi thứ để bạn có thể hiểu vị trí của các cạnh của một số ô trong bảng và của chính bảng đó. Vì vậy, chúng ta hãy tiếp tục và bắt đầu bằng cách làm điều đó. Vì vậy, chúng ta sẽ bắt đầu bằng cách chỉ đặt một bộ chọn bảng và hãy đặt một đường viền có màu đỏ đậm một pixel. Và điều đó sẽ tạo ra một đường kẻ lớn màu đỏ quanh bàn của chúng ta. Sau đó, hãy tiếp tục và đặt TD, và chúng ta sẽ đặt một đường viền ở đây có màu xanh đậm một pixel. Và đó là phác thảo một số ô, nhưng không phải tất cả chúng, tại sao vậy? . Để thực hiện điều này cho tất cả các ô, chúng ta cần nói TD, dấu phẩy, TH và bây giờ tất cả các ô trong bảng đều được chọn. Vì vậy, đó là một cái nhìn đáng yêu, nó rất yêu nước, nhưng một số bạn có thể cảm thấy khó chịu với kiểu nhìn của những năm 90 mà chúng tôi đang giới thiệu ở đây nếu bạn còn nhớ những chiếc bàn vát ngày trước. Và, đó là bởi vì một chút không gian mà chúng ta có ở đây giữa các tế bào này. Một trong những điều mà mọi người thực sự muốn biết cách làm là thoát khỏi không gian đó. Nó thực sự rất đơn giản, ở đây trên bộ chọn bảng, tất cả những gì chúng ta cần thêm là thu gọn dấu gạch nối đường viền, thuộc tính và giá trị thu gọn. Và điều đó sẽ loại bỏ tất cả không gian khó coi đó. Có vẻ như nó đã loại bỏ đường viền bảng của chúng ta, nhưng điều đang xảy ra ở đây là đường viền bảng màu đỏ đứng đầu tiên, TD và TH đứng thứ hai, và do đó, những đường viền ở đó trên các ô đó đang che đường viền bên ngoài đó . Đây là một giao diện hoàn toàn đẹp nếu đó là những gì bạn đang hướng tới, bạn có thể đang tìm kiếm thứ gì đó đẹp hơn một chút, vì vậy tôi sẽ bắt đầu sửa đổi một số màu của mình ở đây và một số thuộc tính khác của tôi. Vì vậy, ở đây trên TD và TH này, tôi sẽ bắt đầu bằng cách thêm một chút đệm. Và một nửa viền, sẽ chuyển thành khoảng tám pixel, điều đó sẽ tiếp tục và cung cấp cho tôi một chút đệm ở bốn cạnh và ngay lập tức, việc đọc thứ này sẽ dễ dàng hơn. Một điều khác mà bạn có thể muốn nghĩ đến là bạn có cần một đường viền ở cả bốn phía của tất cả các ô của mình không? . Xem nó dễ đọc hơn bao nhiêu? . Và, hãy thay đổi màu xanh lam thành thứ gì đó phù hợp hơn một chút với nhãn hiệu Thuốc thú cưng khôn ngoan, đó sẽ là CCAE51, một màu rám nắng đáng yêu. Và đối với chính cái bàn, chúng ta có thể thay đổi màu của nó thành 3F 2B 21, và đó sẽ là một màu nâu sẫm đẹp mắt. Bây giờ điều đó trông thật tuyệt, mặc dù bạn có thể bị làm phiền bởi dòng cuối cùng ở đây trong bảng. Hãy nhớ như tôi đã nói trước đây, vì kiểu TD TH xuất hiện sau trong biểu định kiểu, nên đường viền của nó dường như nằm trên đường viền được liên kết với bảng. Vì vậy, một trong những điều bạn có thể muốn làm là loại bỏ dòng đó ở đó, nhưng chỉ đối với hàng cuối cùng trên bàn. Làm thế nào bạn có thể đi về việc lựa chọn đó? . Xem nó đẹp như thế nào khi tắt dòng đó ở phía dưới và bây giờ nó trông đối xứng hơn một chút. Vì vậy, những đường viền đáng yêu này là một cách tuyệt vời để bắt đầu thêm một chút thú vị vào bảng của bạn, bạn có thể tạo cho chúng tất cả các màu khác nhau, bạn không cần phải đặt chúng ở cả bốn phía và bạn có thể áp dụng chúng cho các yếu tố khác nhau,

Theo mặc định, các ô liền kề không sử dụng cùng một đường viền. Họ có biên giới riêng biệt. Và đường viền của bảng cũng tách biệt với đường viền của ô

css-bảng-ví dụ. html

    
    
    


    
HTML Table Boder
    

        

           
First Name
           
Last Name
        
        

           
John
           
Smith
        
    

khoảng cách biên giới

CSS border-spacing applies to

/*  */
border-spacing: 2px;
/* horizontal  | vertical  */
border-spacing: 1cm 2em;
/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

ví dụ về khoảng cách đường viền. html

    
    
    


    
HTML Table Boder-spacing
    

Một ví dụ khác với CSS border-spacing

table {
  border-spacing: 1em .5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}
td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}

    

      
1
2
3
    
    

      
4
5
6
    
    

      
7
8
9
    

2- Đường viền bảng được thu gọn

Sử dụng thu gọn đường viền CSS. thu gọn cho bảng nếu bạn muốn các ô liền kề có chung đường viền và có chung đường viền với bảng. Giá trị mặc định của CSS border-collapse là riêng biệt.   

table   {
   border-collapse: collapse;
   border: 1px solid black;
} 
table  th {
   border: 1px solid black;
   padding: 5px;
}
table  td {
   border: 1px solid black;
   padding: 5px;
}

Bởi vì mỗi ô có thể sử dụng một kiểu đường viền khác nhau. Như vậy, đối với các bảng bị thu gọn sẽ xảy ra tình huống xung đột do 2 ô liền kề sẽ chung một đường viền. Câu hỏi ở đây là kiểu đường viền nào sẽ được sử dụng trong trường hợp xung đột?

Nếu các đường viền có cùng chiều rộng thì thứ tự ưu tiên sẽ là

1. ẩn giấu
2. gấp đôi
3. chất rắn
4. tiêu tan
5. say mê
6. cây rơm
7. khởi đầu
8. rãnh
9. chèn vào
10. không ai

Ghi chú. kiểu viền CSS. không có và kiểu đường viền CSS. ẩn giống nhau. Họ làm cho một yếu tố không biên giới. Chúng chỉ khác nhau khi áp dụng cho một bảng được thu gọn. Khi giải quyết xung đột Kiểu đường viền CSS. ẩn có mức độ ưu tiên cao nhất, trong khi kiểu viền CSS. không có cái nào có mức độ ưu tiên thấp nhất

css-sụp đổ-bảng-example2. html

    
    
    


    
CSS Collapsed Table
    

        

           

              border-style:solid;

              border-width:1px;

              border-color:blue;
           
           

              border-style:dashed;

              border-width:1px;

              border-color:red;
           
        
        

           

              border-style:hidden;

              border-width:1px;

              border-color:green;
           
           

              border-style:none;

              border-width:1px;

              border-color:green;
           
        
    

3- Chiều rộng/chiều cao của bảng CSS

Thuộc tính chiều rộng CSS, chiều cao CSS được sử dụng để thiết lập chiều rộng và chiều cao cho một bảng hoặc một hàng hoặc một cột.   

Note: Some browsers only consider