Cách thay đổi màu nền của bảng

Nhiều nhà thiết kế web mới làm quen hoặc nghiệp dư muốn biết cách thay đổi màu nền của bảng. Chỉ trong vài phút, bạn có thể học cách thực hiện kỹ thuật này với hướng dẫn ngắn gọn này. Phương pháp này không đáng sợ như nó có vẻ. Thay đổi màu nền của bảng cũng đơn giản như việc thêm một thuộc tính vào ô, hàng hoặc bảng bạn muốn tô màu.

Làm thế nào để bắt đầu

Thuộc tính bgcolor sẽ thay đổi màu nền của bảng cũng như hàng của bảng hiện tại hoặc ô bảng hiện tại. Tuy nhiên, thuộc tính bgcolor không được ưu tiên cho các style sheet, vì vậy nó không phải là cách tối ưu nhất để thay đổi màu nền của bảng. Cách tốt hơn để thay đổi màu nền là thêm màu nền của thuộc tính phong cách vào bảng, hàng hoặc thẻ ô. Xem ví dụ bên dưới để tìm hiểu cách thực hiện.

Nếu vì một lý do nào đó, bạn không muốn thêm màu nền của thuộc tính style vào bảng, có các lựa chọn thay thế để chọn. Ví dụ: bạn có thể đặt kiểu trong một biểu định kiểu trong phần đầu của tài liệu hoặc trong một biểu định kiểu bên ngoài . Xem phần sau:

bảng {background-color: # ff0000; } tr {background-color: yellow; } td {background-color: # 000; }

Đặt màu nền

Cách tốt nhất để đặt màu nền trên một cột là tạo một lớp kiểu và sau đó gán lớp đó cho các ô trong cột đó. Xem các ví dụ bên dưới để tìm hiểu cách thực hiện điều này.

CSS:

td.blueCol {background-color: blue; }

HTML:

class = "blueCol" > ô 1 ô 2
class = "blueCol" > ô 1 ô 2

Gói lên

Ngay cả khi bạn chưa bao giờ thay đổi màu nền của bảng trước đó, bạn có thể sao chép các ví dụ trên để tự mình thử phương pháp này. Hãy thử các tùy chọn khác nhau được trình bày và chọn tùy chọn mà bạn cuối cùng cảm thấy thoải mái nhất. Và nếu bạn muốn biết thêm thông tin về các bảng HTML, hãy tham khảo FAQ này để biết thêm chi tiết.