Hướng dẫn html table remove space between rows - bảng html loại bỏ khoảng cách giữa các hàng

  

    

      
Header
      
Header
      
Header
    
  
  

    

      
Data
      
Data
      
Data
    
  
  

    

      
Data
      
Data
      
Data
    
  

  

    

      
Header
      
Header
      
Header
    
  
  

    

      
Data
      
Data
      
Data
    
  
  

    

      
Data
      
Data
      
Data
    
  

  

    

      
Header
      
Header
      
Header
    
  
  

    

      
Data
      
Data
      
Data
    
  
  

    

      
Data
      
Data
      
Data
    
  

1. Bắt đầu với một bảng đơn giản:

   
     
   
       
   
         
   Header
         
   Header
         
   Header
       
     
     
   
       
   
         
   Data
         
   Data
         
   Data
       
     
     
   
       
   
         
   Data
         
   Data
         
   Data
       
     
   

2. Thêm biên giới:
   Bây giờ bảng của bạn trông giống như thế này:
3. Thu gọn biên giới với

   
     
   
       
   
         
   Header
         
   Header
         
   Header
       
     
     
   
       
   
         
   Data
         
   Data
         
   Data
       
     
     
   
       
   
         
   Data
         
   Data
         
   Data
       
     
   

   2:
   và Voilà, biên giới của bạn bị sụp đổ:
   

Thích bài viết này? Chúng tôi đề nghị 

Không gian giữa các ô bảng

Không gian giữa các ô bảng được điều khiển bởi thuộc tính tế bào trong thẻ bảng. Bằng cách đặt định vị ô thành 0, bạn có thể xóa tất cả khoảng trống giữa các ô của bảng.

Chúng ta hãy bắt đầu bằng cách đặt khoảng cách di động và viền thành 0 cho ví dụ của chúng tôi (phần còn lại của mã vẫn giữ nguyên):

Điều này loại bỏ tất cả không gian giữa các ô của bảng của chúng tôi (xem Hình 9).
Hình 9 Ví dụ của chúng tôi với CellSpaces = 0. Our example with CELLSPACING=0.
Lưu ý rằng ví dụ này để lại tất cả các văn bản bị kẹt trên các cạnh của các ô. Bạn có thể điều chỉnh không gian bên trong các đường viền ô với thuộc tính CellPadding (xem Hình 10).
Hình 10 Bảng với CellSpaces = 0 và CellPadding = 5. The table with CELLSPACING=0 and CELLPADDING=5.
Điều này cung cấp một phòng thở cho văn bản bên trong các tế bào.
Kỹ thuật này có thể được áp dụng độc đáo cho dữ liệu loại cột, cung cấp cho bạn một số tính linh hoạt thiết kế mà nếu không có nếu không sử dụng các tệp đồ họa lớn:

 

  You will find designs in our catalog which cover a 
vast array of categories:
 
 floral images 
 
 humor
 
 holiday stamps
 
 border designs
 
 decorative imagery 

Trong bảng trang trí này (hiển thị trong Hình 11), chúng tôi sử dụng một hàng riêng cho từng phần tử của danh sách. Hãy nhớ rằng: bạn cần cả TR và TD để tạo một hàng. Trong ví dụ này, chúng tôi đã sử dụng BGColor trong thẻ bảng làm mặc định và sau đó thay đổi màu trong mỗi hàng khác.

Hình 11 Một bảng trang trí cho các tùy chọn niêm yết.

Có nhiều thiết kế thú vị khác mà bạn có thể tạo bằng cách sử dụng bảng. Hy vọng rằng, chúng tôi đã cung cấp cho bạn đủ các công cụ để có thể tự mình thử nghiệm và sử dụng sự sáng tạo của bạn.

Tôi đã đặt cellpadding và cellspaces và biên giới thành 0 0 nhưng tôi vẫn có khoảng cách giữa các hàng, là cách duy nhất để loại bỏ chúng để nâng cấp lên CSS?

Blog tôi cần trợ giúp là: (chỉ hiển thị để đăng nhập người dùng)

Chào bạn. Các thuộc tính cellpadding và cellspaces không còn hoạt động trong HTML5, vì vậy đó có thể là vấn đề của bạn.

Xem bài đăng này trên bảng cho WordPress.com. Bạn có thể tìm thấy một cái gì đó hoạt động ở đó: http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/

Nếu bạn sẵn sàng đăng mã bảng của bạn ở đây, tôi cũng có thể cố gắng giúp bạn tìm ra nó. Bạn phải sử dụng nút mã phía trên hộp văn bản để đăng mã trong các diễn đàn (hoặc đăng nó giữa các backticks) hoặc nó đã giành được hiển thị ở đây một cách chính xác.

Cảm ơn bạn, tôi đánh giá cao sự giúp đỡ! Dưới đây là một trong những bảng:

Ngày gặp nhau & nbsp; 10/24-10/25 2014 Marlins Tháng Mười Vòng loại 11/8-11/9 2014 Maura Marden Freestyle Frenzy