Hướng dẫn Tìm hiểu table và các thuộc tính CSS trên IE

[PVS]

Tìm hiểu table và các thuộc tính CSS trên IE

Như bạn đã biết việc dùng các thẻ table là cách tạo giao diện chính ở nhiều năm trước còn hiện tại thì hầu hết mọi người đã dùng div hay các thẻ khác để tạo ra giao diện hiệu quả và tận dụng hết công dụng của CSS, nhưng không phải vì thế mà chúng ta quên đi các thẻ table nó vẫn cực kỳ hữu dụng để chúng ta thể hiện dữ liệu dạng bảng bởi đúng như bản chất của nó và cho dù mã đánh dấu của bạn có hiện đại thì trong nhiều trường hợp chúng ta cũng không nên quên đi dùng table, còn tùy ở bạn nếu bạn muốn thể hiện mình bằng cách viết thêm mớ CSS nữa trên các thẻ khác để có được chức năng mà table mặc định có thì có lẽ không nên.

Sau đây chúng ta sẽ cùng tìm hiểu các trình duyệt hiểu các thuộc tính css trên table như thế nào để tránh gặp phải các rắc rối khi thấy chúng hiển thị không đồng nhất trên các trình duyệt.

empty-cells
Thuộc tính có 2 giá trị là show(mặc định) và hide. khi các thẻ TD rỗng thì vẫn được hiển thị có đường viền, tuy nhiên với những phiên bản từ IE7 về trước thì mặc định nó là ẩn và không thể thay đổi giá trị nên thẻ TD này sẽ bị ẩn đường viền. Xem hình dưới.

​

Giải pháp trên IE7 là bạn không nên để cho TD rỗng ít nhất bạn có thể thêm khoảng trắng với chuỗi " " hoặc một thẻ html vô hại nào đó nếu bạn không muốn TD đó ẩn.

border-collapse
Thuộc tính có 2 giá trị là separate(mặc định) và collapse. Mặc định thì các TD trong table hiển thị các đường viền tách biệt, để hiển thị hợp nhất 2 đường viền thành một bạn đặt giá trị là collapse, nếu bạn có thuộc tính cellspacing của table thì nó cũng không ảnh hưởng. Khi bạn dùng thuộc tính này thì vấn để bị ẩn border của những TD rỗng trên IE7 cũng sẽ được khắc phục. Vấn đề xảy với IE7 khi bạn để thuộc tính cellspacing thì thuộc tính border-collapse sẽ trở nên vô tác dụng tai hại hơn nếu bạn để border cho table thì border nào của TD tiếp xúc với các border của table sẽ mất. Xem hình dưới.

​

Từ trên ta có thể lưu ý rằng nếu đã dùng border-collapse rồi thì không nên để cellspacing và cũng không nên dùng table border vì với các trình duyệt khác khi bạn dùng border-collapse thì table border sẽ mất và chỉ hiển thị TD border còn IE7 thì không.

border-spacing
Đây là thuộc tính cellspacing của table được chuyển thành thuộc tính css, với border-spacing ta có thể xét khoảng các của các TD theo chiều dọc và ngang. Từ IE7 về trước vẫn chưa hỗ trợ thuộc tính này nên tạm thời chúng ta vẫn cần đến cellspacing.

table-layout
Mặc định thuộc tính này sẽ có giá trị là auto điều này chúng ta vẫn thường thấy khi dữ liệu trong TD tăng lên và nếu không được bẻ xuống dòng thì chiều rộng của table cũng giãn ra mặc cho chúng ta đã xét width cho table, nếu dữ liệu đều nhau thì các TD cũng rộng đều nhau và TD nào nhiều dữ liệu hơn thì rộng hơn nếu ta không xét width của chúng. Ở giá trị auto của thuộc tính khi bạn xét width cho TD và tổng của chúng lớn hơn width bạn xét cho table thì nó sẽ được điều chỉnh lại trong phạm vi chiều rộng table, tóm lại đây là những thứ chúng ta cần ở một table để thể hiện dữ liệu, ngoài ra thuộc tính còn có giá trị fixed điều này sẽ cố định chiều rộng của một table và nó cũng tăng lên khi tổng width bạn xét cho TD lớn hơn giá trị width mà bạn xét cho table. Ngoài ra bạn còn có giá trị inherit để kế thừa thuộc tính từ phần tử cha nhưng nó không hỗ trợ IE7 và IE8 thì cần khai báo !DOCTYPE.

caption-side
Trong table chúng ta có một thẻ đặc biệt dùng để mô tả cho table là caption và nó có thuộc tính là caption-side dùng để chỉ định vị trí, có 2 giá trị là top(mặc định) và bottom. Thẻ caption làm cho mã đánh dấu của chúng ta đẹp và rõ ràng hơn tuy nhiên chúng ta hoàn toàn có thể dùng những thẻ khác thay thế nên thực sự nó rất ít được dùng đến. Trình duyệt IE7 và cũ hơn không hỗ trợ nó.

Chúc các bạn thành công.

Nguồn: sothichweb.com​