Bố trí bảng trong css

2. Thuộc tính border-collapse trong CSS

Thuộc tính này có hai giá trị thu gọn và tách biệt tương ứng với các đường viền nên được kết hợp với nhau hoặc phân biệt mọc. Ví dụ

   
   
      
      
   
   
   
      

         
Vi du gia tri collapse
         
 Cell A
         
 Cell B
      
      

      
      

         
Vi du gia tri separate
         
 Cell A
         
 Cell B
      
      
   
 

Kết quả là

3. Độ rộng và chiều cao của bảng trong CSS

Để xác định chiều rộng và chiều cao cho bảng, bạn sử dụng hai thuộc tính chiều rộng và chiều cao trong CSS. Hai thuộc tính này có thể nhận các giá trị là % hoặc px

Ví dụ

table {
    width: 100%;
}

th {
    height: 50px;
}

4. Căn chỉnh bảng trong CSS

Căn chỉnh bảng theo chiều ngang trong CSS

Bạn sử dụng thuộc tính text-align để xác định căn cứ điều chỉnh nội dung theo chiều ngang của bảng. Thuộc tính này có thể nhận các giá trị bên trái, bên phải hoặc ở giữa. Ví dụ

th {
    text-align: left;
}

Căn chỉnh bảng theo chiều dọc trong CSS

Để căn chỉnh bảng theo chiều dọc, bạn sử dụng thuộc tính vertical-align để có thể nhận các giá trị top, bottom, middle. Theo default, the content of table has the vertical vertical with middle value. Ví dụ

td {
    height: 50px;
    vertical-align: bottom;
}

5. Thuộc tính padding trong CSS

Để điều khiển khoảng cách giữa đường viền và nội dung của bảng, bạn sử dụng thuộc tính đệm trong CSS. Giá trị có thể nhận của thuộc tính này nằm ở dưới dạng đơn vị px

Ví dụ

th, td {
    padding: 15px;
    text-align: left;
}

6. Thuộc tính border-spacing trong CSS

Thuộc tính border-spacing xác định khoảng cách giữa các đường viền của các ô trong bảng. Thuộc tính này có thể nhận một hoặc hai giá trị (có đơn vị là độ dài)

Nếu cung cấp một giá trị, thì giá trị này sẽ được áp dụng cho đường bao ngang và dọc. Nếu cung cấp hai giá trị, thì tương ứng theo thứ tự sẽ áp dụng cho đường viền ngang và đường viền dọc

Ghi chú Thuộc tính này không hoạt động trong Netscape 7 và IE6

Sửa đổi ví dụ trên và xem kết quả

   
   
      
      
   
   
   
      

         
Vi du gia tri separate va border-spacing
         
 Cell A 
         
 Cell B 
      
      

      
      

         
Vi du gia tri separate va border-spacing
         
 Cell A 
         
 Cell B 
      
      
   
 

Kết quả là

7. Thuộc tính caption-side trong CSS

Theo mặc định, nội dung của thẻ khi được sử dụng trong bảng sẽ được hiển thị bên trên bảng. Tuy nhiên, để thay đổi vị trí này, bạn có thể sử dụng thuộc tính phụ đề bên trong CSS

Thuộc tính này có thể nhận được một trong các giá trị. trên, dưới, trái hoặc phải. Dưới đây là ví dụ minh họa

Ghi chú. Các thuộc tính này có thể không hoạt động trong trình duyệt IE

   
   
      
      
   
   
   
      

         

         Phan Caption nay se xuat hien o phan ben tren bang
         
         
 Cell A
         
 Cell B
      
      

      
      

         

         Phan Caption nay se xuat hien o phan ben duoi bang
         
         
 Cell A
         
 Cell B
      
      
      
   
 

Kết quả là

8. Thuộc tính ô trống trong CSS

Để xác định xem có nên hiển thị đường viền cho một ô không có nội dung, bạn có thể sử dụng thuộc tính ô trống trong CSS

Thuộc tính này có thể nhận được một trong các giá trị. hiển thị, ẩn hoặc kế thừa

Dưới đây là ví dụ minh họa để ẩn đường viền với ô mà không có nội dung

Kết quả là

9. Thuộc tính table-layout trong CSS

Thuộc tính bảng bố cục hỗ trợ bạn điều khiển cách mà trình duyệt nên tạo bố cục cho một bảng

Thuộc tính này có thể nhận được một trong ba giá trị. cố định, tự động hoặc kế thừa

Dưới đây là ví dụ minh họa sự khác biệt giữa các giá trị của thuộc tính table-layout này

Ghi chú. Nhiều trình duyệt không hỗ trợ thuộc tính này

   
   
      
      
   
   
   
      

      

         
1000000000000000000000000000
         
10000000
         
100
      
      
      

      
      

      

         
1000000000000000000000000000
         
10000000
         
100
      
      
      
   
 

Kết quả là

Trên đây là bài viết của eLib. VN về Bảng trong CSS. Hi vọng bài viết có ích cho quá trình học CSS, cũng như học lập trình web của bạn

Như vậy là chúng ta đã hoàn thành nội dung "CSS Design". Để củng cố và giữ chặt nội dung đã học, mời bạn cùng thử sức với  "