Bảng css cơ bản

Một số thuộc tính CSS được sử dụng rộng rãi để áp dụng kiểu trên bảng HTML. Mỗi người trong số họ được mô tả dưới đây

Trong chương này, chúng ta sẽ nói về cách tạo kiểu cho bảng. Chúng tôi có thể thay đổi màu của tiêu đề và hàng mà chúng tôi muốn

Dưới đây là các thuộc tính CSS mà chúng tôi sử dụng để áp dụng kiểu cho bảng. Các thuộc tính màu nền và màu đặt màu nền và màu của văn bản tương ứng. Thuộc tính border-collapse làm cho đường viền của bảng bị thu gọn. Thuộc tính text-align đặt vị trí văn bản. Ngoài ra, chúng ta nên sử dụng các thuộc tính chiều cao, chiều rộng và phần đệm để tạo kiểu

  
    Title of the document
    
  
  
    
      
        
          Heading
          Heading
        
      
      
        
          Some text
          Some text
        
        
          Some text
          Some text
        
        
          Some text
          Some text
        
        
          Some text
          Some text
        
      
    
  

Hãy giải thích đoạn mã trên

Như bạn thấy bảng của chúng tôi có 2 phần. phần đầu tiên là phần mà chúng tôi đã viết tiêu đề, đó là phần của chúng tôi và phần thứ hai là phần mà chúng tôi đã viết một số văn bản. Bảng có đường viền màu đen, chúng tôi sử dụng thuộc tính đường viền. Chúng tôi có thể sử dụng bất kỳ màu nào chúng tôi muốn cũng như chúng tôi có thể chọn kiểu đường viền

Như bạn thấy một phần của bảng của chúng tôi có màu xanh lam và bất cứ nơi nào chúng tôi viết một số văn bản có màu trắng. Đối với nền màu xanh, chúng tôi sử dụng thuộc tính màu nền và đối với văn bản màu trắng, chúng tôi sử dụng thuộc tính color. Các văn bản khác được viết bằng màu đen

Thuộc tính thu gọn đường viền chỉ định xem các đường viền của bảng được thu gọn thành một đường viền hay được tách ra

Bảng cũng có các thuộc tính chiều rộng và chiều cao. Như bạn thấy, chúng tôi sử dụng các thuộc tính này theo phong cách của chúng tôi. Chúng tôi sử dụng thuộc tính chiều rộng cho toàn bộ bảng và thuộc tính chiều cao cho các tiêu đề. Chúng ta có thể sử dụng các thuộc tính này với pixel và phần trăm

Căn chỉnh văn bản trong bảng

Bây giờ về căn chỉnh văn bản bảng. Như bạn đã biết trước đó, chúng tôi đã sử dụng thuộc tính text-align cho vị trí văn bản. Trong ví dụ của chúng tôi, như bạn thấy, chúng tôi sử dụng thuộc tính text-align cho tiêu đề. Đối với điều đó, chúng tôi sử dụng "text-align. trung tâm". Bạn có thể đọc chương trước của chúng tôi để biết cách sử dụng nó

Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc tính phần đệm trên và phần tử

Căn ngang với thuộc tính text-align

Với sự trợ giúp của thuộc tính CSS text-align, bạn có thể đặt căn chỉnh ngang của nội dung trong hoặc

Theo mặc định, nội dung của các phần tử được căn lề trái và nội dung của các phần tử được căn giữa. Trong ví dụ bên dưới, nội dung của các phần tử và được căn lề phải

Ví dụ về việc căn chỉnh nội dung của và các thành phần sang bên phải

  
    Title of the document
    
  
  
    
Horizontal alignment example
    
      
        
          Firstname
          Lastname
          Money
        
        
          Sherlock
          Holmes
          $200
        
        
          John
          Watson
          $250
        
        
          Mary
          Whatson
          $500
        
      
    
  

Sử dụng thuộc tính vertical-align của CSS, bạn có thể đặt căn chỉnh dọc của nội dung trong hoặc

Theo mặc định, nội dung trong cả hai phần tử và được căn chỉnh theo chiều dọc ở giữa

Trong ví dụ bên dưới, nội dung của các thành phần được căn dọc xuống dưới

Ví dụ về căn chỉnh dọc nội dung của các phần tử xuống dưới cùng

  
    
  
  
    
Vertical alignment example
    
      
        Firstname
        Lastname
        Money
      
      
        Sherlock
        Holmes
        $300
      
      
        John
        Watson
        $250
      
      
        Mary
        Watson
        $500
      
    
  

Bằng cách thêm thuộc tính CSS border-bottom vào các phần tử và, bạn sẽ tạo các đường phân cách theo chiều ngang

  
    Title of the document
    
  
  
    
Horizontal dividers example
    
      
        Firstname
        Lastname
        Money
      
      
        Sherlock
        Holmes
        $200
      
      
        John
        Watson
        $350
      
      
        Mary
        Watson
        $500
      
    
  

Sử dụng CSS. bộ chọn di chuột trên phần tử, sẽ làm cho bảng có thể di chuột được

  
    Title of the document
    
  
  
    
Hoverable table example
    
      
        First Name
        Last Name
        Money
      
      
        Sherlock
        Holmes
        $200
      
      
        John
        Watson
        $350
      
      
        Mary
        Watson
        $500
      
    
  

Sử dụng bộ chọn nth-child() và thêm thuộc tính màu nền CSS vào các hàng của bảng lẻ (chẵn), bạn có thể tạo một bảng sọc vằn

  
    Title of the document
    
  
  
    
Striped table example
    
      
        First name
        Last name
        Points
      
      
        Sherlock
        Holmes
        $250
      
      
        John
        Watson
        $350
      
      
        Mary
        Watson
        $500
      
    
  

Thêm bất kỳ phần tử vùng chứa nào có giá trị "auto" của thuộc tính CSS overflow-x vào phần tử, bạn có thể làm cho bảng phản hồi nhanh

Bạn có thể tạo một bảng trong CSS không?

Bảng CSS là gì?

Thẻ bảng cơ bản trong HTML là gì?

Một bảng HTML bao gồm một phần tử element and one or more ,

, and

elements . Phần tử Thuộc tính bảng CSS là gì? Một số thuộc tính kiểu bảng CSS được sử dụng phổ biến nhất là đường viền, phần đệm, khoảng cách đường viền, thu gọn đường viền, nền, màu sắc, chiều cao và chiều rộng của ô, bố cục bảng . Một số cách thực hành tốt để tạo kiểu cho bảng là. Căn ngang và dọc nội dung ô. , and many more. Some of the good practices for styling a table are: Horizontal and vertical alignment of cell content. Đọc tiếp

programming css

Reply 6 0 Chia sẻ