Tìm hiểu cách tạo đường viền bảng CSS chỉ trong năm phút
Bạn có thể đã nghe nói rằng các bảng CSS và HTML không trộn lẫn. Đơn giản là nó sai. Có, sử dụng bảng HTML để bố cục không còn là một phương pháp hay nhất về thiết kế web, đã được thay thế bằng kiểu bố cục CSS, nhưng bảng vẫn là đánh dấu chính xác để sử dụng để thêm dữ liệu dạng bảng vào trang web.
Thật không may, bởi vì rất nhiều chuyên gia web đã tránh xa các bảng nghĩ rằng chúng là chất độc, nhiều chuyên gia có ít kinh nghiệm làm việc với yếu tố HTML phổ biến này và cuộc đấu tranh khi họ phải xử lý chúng trên một trang web. Ví dụ, nếu bạn có một bảng trên một trang và bạn muốn thêm các dòng nội bộ vào các ô của bảng.
Biên giới bảng CSS
Khi bạn sử dụng CSS để thêm đường viền vào bảng, nó chỉ thêm đường viền xung quanh bên ngoài của bảng. Nếu bạn muốn thêm các đường nội bộ vào các ô riêng lẻ của bảng đó, bạn cần thêm đường viền vào các phần tử CSS bên trong. Bạn cũng có thể sử dụng thẻ HR để thêm các dòng bên trong các ô riêng lẻ.
Để áp dụng các kiểu được đề cập trong bài viết này, bạn rõ ràng nên có một bảng trên trang web của bạn. Sau đó, bạn sẽ tạo một biểu định kiểu như một bảng định kiểu nội bộ trong phần đầu của tài liệu của bạn (bạn sẽ chỉ làm điều này nếu "trang web" của bạn là một trang) hoặc được đính kèm vào tài liệu dưới dạng bảng định kiểu bên ngoài (đây là những gì bạn sẽ làm gì nếu trang web của bạn là nhiều trang - cho phép bạn tạo kiểu cho tất cả các trang từ một trang tính bên ngoài). Bạn sẽ đặt các kiểu để thêm các đường nội thất vào bảng định kiểu đó.
Trước khi bạn bắt đầu
Trước tiên, bạn cần phải quyết định nơi bạn muốn các dòng xuất hiện trong bảng của bạn. Bạn có một số tùy chọn, bao gồm:
- Bao quanh tất cả các ô để tạo thành lưới;
- Định vị các đường thẳng giữa các cột;
- Chỉ giữa các hàng; hoặc là
- Giữa các cột hoặc hàng cụ thể.
Bạn cũng có thể định vị các dòng xung quanh các ô riêng lẻ hoặc bên trong các ô riêng lẻ.
Làm thế nào để thêm dòng xung quanh tất cả các tế bào trong một bảng
Để thêm các dòng xung quanh tất cả các ô trong bảng của bạn, tạo hiệu ứng giống như lưới, hãy thêm dòng sau vào biểu định kiểu của bạn:
td, th {
border: solid 1px màu đen;
}
Cách thêm dòng giữa các cột trong bảng
Để thêm các dòng giữa các cột (điều này tạo ra các đường thẳng đứng chạy từ trên xuống dưới trên các cột của bảng), thêm các dòng sau vào bảng định kiểu của bạn:
td, th {
border-left: solid 1px màu đen;
}
Sau đó, nếu bạn không muốn chúng xuất hiện trên cột đầu tiên, bạn sẽ cần phải thêm một lớp vào các ô thứ và td đó . Trong ví dụ này, chúng tôi giả định rằng chúng tôi có một lớp không có đường viền trên các ô đó và chúng tôi xóa đường viền bằng quy tắc CSS cụ thể hơn này. Vì vậy, đây là lớp HTML chúng tôi sẽ sử dụng:
class = "no-border">
Và sau đó chúng tôi có thể thêm phong cách sau vào biểu định kiểu của chúng tôi:
.no-border {
border-left: none;
}
Cách thêm dòng giữa các hàng trong bảng
Như với việc thêm các dòng giữa các cột, bạn có thể làm điều này chỉ với một kiểu đơn giản được thêm vào bảng định kiểu của bạn. CSS bên dưới sẽ thêm các đường thẳng đứng giữa mỗi hàng trong bảng của chúng tôi:
tr {
border-bottom: solid 1px màu đen;
}
Và để loại bỏ đường viền từ dưới cùng của bảng, bạn một lần nữa sẽ thêm một lớp vào thẻ tr đó:
class = "no-border">
Thêm phong cách sau vào biểu định kiểu của bạn:
.no-border {
border-bottom: none;
}
Cách thêm dòng giữa các cột cụ thể hoặc hàng trong bảng
Nếu bạn chỉ muốn dòng giữa các hàng hoặc cột cụ thể, bạn cần sử dụng một lớp trên các ô hoặc hàng đó. Việc thêm một dòng giữa các cột hơi khó hơn một chút so với các hàng vì bạn phải thêm lớp đó vào mọi ô trong cột đó. Nếu bảng của bạn được tạo tự động từ một CMS thuộc loại nào đó , điều này có thể không thực hiện được, nhưng nếu bạn đang viết mã trang, bạn có thể thêm các lớp thích hợp nếu cần để đạt được hiệu ứng này.
class = "side-border">
Việc thêm các dòng giữa các hàng sẽ dễ dàng hơn nhiều, vì bạn chỉ có thể thêm lớp vào hàng mà bạn muốn dòng đó.
class = "border-bottom">
Sau đó, thêm CSS vào biểu định kiểu của bạn:
.border-side {
border-left: solid 1px màu đen;
}
.border-bottom {
border-bottom: solid 1px màu đen;
}
Làm thế nào để thêm dòng xung quanh các tế bào cá nhân trong một bảng
Để thêm các dòng quanh các ô riêng lẻ, bạn thêm một lớp vào các ô mà bạn muốn một đường viền xung quanh:
class = "border">
Và sau đó thêm CSS sau vào biểu định kiểu của bạn:
.biên giới {
border: solid 1px màu đen;
}
Làm thế nào để thêm dòng bên trong các tế bào cá nhân trong một bảng
Nếu bạn muốn thêm các dòng bên trong nội dung của một ô, cách dễ nhất để thực hiện điều này là với thẻ quy tắc ngang (
).
Lời khuyên hữu ích
Nếu bạn nhận thấy những khoảng trống trong biên giới của mình, bạn nên đảm bảo rằng kiểu thu hẹp đường viền được đặt trên bảng của bạn. Thêm thông tin sau vào biểu định kiểu của bạn:
bàn {
border-collapse: collapse;
}
Bạn có thể tránh tất cả CSS ở trên và sử dụng thuộc tính border trong thẻ bảng của bạn. Tuy nhiên, nhận ra rằng thuộc tính của mình, trong khi không bị phản đối, ít linh hoạt hơn CSS, vì bạn chỉ có thể xác định chiều rộng của đường viền và chỉ có thể có nó quanh tất cả các ô của bảng hoặc không.