Bảng màu HTML

Chương trước đã đề cập đến cách thay đổi các kiểu cơ bản của bảng bằng CSS. Trong chương này, chúng ta sẽ cung cấp thêm các kiểu cho các bảng bằng CSS. Sau khi bạn tạo cấu trúc của bảng trong phần đánh dấu, bạn có thể dễ dàng thêm một lớp kiểu để tùy chỉnh giao diện của bảng

Bảng CSS Màu nền

Thuộc tính màu nền CSS cho phép bạn tô màu nền của bảng, hàng và ô

Đoạn mã trên tô màu nền của mỗi hàng là màu xanh lá cây và màu nền trước là màu trắng

Mã nguồn

Cách tô màu hàng cụ thể trong Bảng CSS

Bạn có thể sử dụng tr. nth-child(rownumber) để tô màu một hàng cụ thể trong bảng bằng CSS

Đoạn mã trên chọn 3 hàng từ trên xuống (bao gồm cả hàng đầu bảng) và tô màu nền là xanh lá cây và nền trước là màu trắng

Mã CSS

Đã áp dụng mã CSS này cho Bảng HTML Ví dụ 1

Cách tô màu cột cụ thể trong Bảng CSS

Bạn có thể cung cấp màu nền cho cột cụ thể bằng cách sử dụng td. con thứ n(số cột)

Màu mã trên màu nền của cột đầu tiên là Màu cam

Mã CSS

Đã áp dụng mã CSS này cho Bảng HTML Ví dụ 1

Cách tô màu chỉ ô Bảng CSS

Mã nguồn sau đây cho biết cách tô màu một ô cụ thể trong bảng bằng CSS

Bảng CSS Tô màu hàng thay thế

Bạn có thể sử dụng tr. nth-child(rowOrder) để tạo màu hàng xen kẽ cho Bảng bằng CSS. Thứ tự hàng phải là "lẻ" hoặc "chẵn"

Bài viết này giải thích các phương pháp thay đổi màu nền của các phần của bảng trên trang web

Phương thức cũ hơn sử dụng thuộc tính bgcolor để thay đổi màu nền của bảng. Nó cũng có thể được dùng để thay đổi màu của một hàng trong bảng hoặc một ô trong bảng. Nhưng thuộc tính bgcolor không được dùng trong biểu định kiểu, vì vậy đây không phải là cách tối ưu để thao tác màu nền của bảng

Cách tốt hơn để thay đổi màu nền là thêm thuộc tính kiểu màu nền vào thẻ bảng, hàng hoặc ô

Ví dụ này thay đổi màu nền của toàn bộ bảng

Để thay đổi màu của một hàng, hãy chèn thuộc tính màu nền vào

Bạn có thể thay đổi màu của một ô bằng cách thêm thuộc tính vào

Bạn cũng có thể áp dụng màu nền cho đầu bảng hoặc  

Thay đổi màu nền bằng Style Sheets

Tuy nhiên, tốt hơn hết là tránh sử dụng thuộc tính màu nền để sử dụng biểu định kiểu được định dạng chính xác. Ví dụ: bạn có thể đặt kiểu trong biểu định kiểu ở ĐẦU tài liệu HTML hoặc đặt chúng trong biểu định kiểu bên ngoài. Những thay đổi như thế này trong HEAD hoặc biểu định kiểu bên ngoài có thể xuất hiện như thế này đối với bảng, hàng và ô

table { background-color: #ff0000; }
tr { background-color: yellow; }
td { background-color: #000; }

Đặt màu nền cột

Cách tốt nhất để đặt màu nền cho cột là tạo một lớp kiểu rồi gán nó cho các ô của cột. Tạo một lớp cho phép bạn gán lớp đó cho các ô trong một cột cụ thể bằng một thuộc tính

CSS

td.ColColor { background-color: blue; }

HTML

cell 1cell 2cell 1cell 2

Một lợi thế đáng kể của việc kiểm soát màu nền thông qua biểu định kiểu là bạn có thể thay đổi lựa chọn màu của mình sau này. Thay vì xem qua tài liệu HTML và thực hiện thay đổi đối với từng ô đơn lẻ, bạn có thể thực hiện một thay đổi duy nhất đối với lựa chọn màu trong CSS. Thay đổi này sẽ ngay lập tức được áp dụng cho mọi trường hợp xuất hiện cú pháp class="ColColor"

Mặc dù xen kẽ CSS vào HTML của bạn hoặc gọi một tệp CSS riêng biệt, thêm một chút chi phí quản trị ngoài việc sửa đổi một thuộc tính HTML, bạn sẽ thấy rằng việc dựa vào CSS giúp giảm lỗi, tăng tốc độ phát triển và cải thiện tính di động của tài liệu của bạn

Trích dẫn bài viết này

Định dạng

trích dẫn của bạn

Kyrnin, Jennifer. "Thay đổi màu nền của bảng HTML. "ThinkCo. https. //www. suy nghĩ. com/change-table-background-color-3469869 (truy cập ngày 20 tháng 12 năm 2022)

Để buộc một bố cục nhất định cho trang web, cho phép đặt tiêu đề, menu điều hướng, quảng cáo, v.v. (ví dụ)

Bây giờ, hãy tìm hiểu làm thế nào để làm điều này

Các bộ phận của bảng

Bảng dưới đây là một bảng chung với các phần được dán nhãn

Các thẻ HTML của một bảng

Phần còn lại của tài liệu này chứa một bản tóm tắt các thẻ và thuộc tính phổ biến nhất của bảng

Bản thân bảng phải được xác định bằng các thẻ bảng và. Tất cả các mục và thuộc tính có trong bảng đó phải xuất hiện giữa hai thẻ này

Tiêu đề hoặc chú thích có thể được xác định cho bảng bằng cách đặt. gắn thẻ ngay sau thẻ

Lớp tiếp theo là xác định các hàng. Hàng của bảng được xác định bằng các thẻ

Mức thấp nhất của bảng là dữ liệu bảng. Mỗi mục của bảng được xác định giữa các thẻ

HTML cho một bảng cơ bản được hiển thị bên dưới

Bảng kết quả được hiển thị dưới đây

Lưu ý rằng tôi phải thêm thuộc tính "đường viền = 1" để xác định các ô của bảng bằng các dòng

Thuộc tính bảng

Sau đây là danh sách ngắn gọn các thuộc tính có thể xác định cho một bảng. Tất cả các thuộc tính này phải được chứa giữa từ khóa "bảng" và dấu ngoặc lớn hơn của thẻ

biên giới

Đường viền xung quanh bên ngoài của bảng có thể được chỉnh sửa theo chiều rộng và màu sắc. Để thay đổi độ rộng của đường viền của bảng, hãy sử dụng thuộc tính border="p" trong đó p = số pixel chiều rộng của đường viền phải là. Lưu ý rằng việc sử dụng thuộc tính này cũng thêm đường viền cho các ô

Bảng bên dưới có đường viền 10 pixel. Điều này được thực hiện với thẻ bảng

Để không có đường viền, hãy đặt đường viền = "0"

Màu sắc và hình nền

Để thay đổi màu của đường viền, hãy sử dụng thuộc tính bordercolor="color" trong đó màu có cùng định dạng với tất cả các màu web khác mà chúng tôi đang sử dụng. Bảng bên dưới có màu viền được đặt thành #ff00ff với thẻ bảng

Để thay đổi màu nền, sử dụng thuộc tính bgcolor="color". Bảng bên dưới có màu nền được đặt thành #00ff00 với thẻ bảng là

Để đặt nền lát ô cho bảng, hãy sử dụng nền="URL", trong đó tên tệp là tên của đồ họa xếp ô sẽ được sử dụng. Ví dụ: trong cùng thư mục nơi các ghi chú này được tìm thấy là tệp đồ họa bg. gif. Bảng bên dưới sử dụng nó làm nền bằng cách sử dụng thẻ bảng

khoảng cách ô

Khoảng cách giữa các ô có thể được tăng lên bằng thuộc tính cellspacing="p" trong đó p bằng số pixel để đặt giữa các ô. Ví dụ bên dưới thu được khoảng cách ô là 10 pixel với thẻ bảng

Đệm tế bào

Khoảng cách xung quanh một mục trong mỗi ô có thể được tăng lên bằng thuộc tính cellpadding="p" trong đó p bằng số pixel để đặt giữa mục và cuối ô. Ví dụ bên dưới có được phần đệm ô là 10 pixel với thẻ bảng

Căn chỉnh bảng

Bạn cũng có thể chỉ định cách đặt bảng theo chiều ngang trong cửa sổ trình duyệt bằng thuộc tính align. Định dạng của nó là align="alignment" trong đó căn chỉnh bằng trái, giữa hoặc phải. Nếu bạn đặt căn chỉnh sang trái hoặc phải, văn bản sẽ chạy quanh bảng giống như với bảng ở bên phải của đoạn văn này. Tuy nhiên, Center không cho phép văn bản chạy xung quanh nó, dẫn đến một bảng được căn giữa đơn giản như hình bên dưới

Chiều rộng của cái bàn

Cũng giống như quy tắc ngang, chiều rộng của bảng có thể được xác định theo tỷ lệ phần trăm của chiều rộng cửa sổ trình duyệt tổng thể hoặc theo số lượng pixel cụ thể. Bảng đầu tiên sử dụng WIDTH="50%" để xác định chiều rộng của nó bằng 50% chiều rộng của cửa sổ. (Bảng kết quả sẽ phụ thuộc vào độ rộng của cửa sổ trình duyệt của bạn. )

Bảng tiếp theo được xác định là rộng 50 pixel bằng thuộc tính WIDTH="50"

Thuộc tính dữ liệu bảng

Sau đây là danh sách ngắn gọn các thuộc tính có thể xác định cho một ô của bảng, i. e. , một phần dữ liệu bảng. Tất cả các thuộc tính này phải được chứa giữa từ khóa "td" và dấu ngoặc lớn hơn của

Do David Tarnoff phát triển cho các phần của CSCI 1710 và 5011 tại ETSU

Dữ liệu bảng sử dụng ba thuộc tính tiếp theo giống như cách thẻ bảng sử dụng chúng

• Để thay đổi màu nền của một ô, hãy sử dụng thuộc tính bgcolor="color" bên trong

Tuy nhiên, ô này thêm một vài thuộc tính bổ sung. Đầu tiên, nó cho phép người dùng xác định căn chỉnh dọc và ngang của một mục trong một ô. Sơ đồ bên dưới hiển thị các thuộc tính khác nhau để căn chỉnh ngang và dọc trong một ô

Cuối cùng, bạn có thể buộc một ô của bảng trải rộng hơn một cột hoặc hàng bằng cách sử dụng thuộc tính COLSPAN="n" hoặc ROWSPAN="n" trong đó n=số lượng cột hoặc hàng cần trải rộng

Bảng nhúng

Như đã nêu trước đó, gần như bất kỳ thành phần nào của trang web đều có thể được chèn vào bảng dưới dạng dữ liệu bảng. Dưới đây là một ví dụ về việc chèn một bảng trong một bảng