Plugin Table Press là gì? Hướng dẫn cài đặt chi tiết nhất

Để thêm mã “Custom CSS” để điều chỉnh kiểu dáng của các bảng, bạn cần làm như sau:
Đăng nhập vào bảng điều khiển WordPress của bạn và chọn TablePress > Plugin Options.
Tìm đến phần “Custom CSS” trong mục “Frontend Options and Styling” và nhập mã CSS của bạn vào ô văn bản.
Nhấn Save Changes để lưu lại các thay đổi.
Mã CSS của bạn sẽ ghi đè lên kiểu dáng mặc định của các bảng, vì vậy bạn không cần phải sửa đổi trực tiếp các tệp của plugin (những thay đổi như vậy sẽ bị mất sau mỗi lần cập nhật TablePress).
Bạn có thể tham khảo một số ví dụ về mã CSS để thay đổi màu sắc, font chữ, kích cỡ, căn lề, viền, nền và nhiều thuộc tính khác của các bảng tại https://tablepress.org/faq/adding-custom-css/ hoặc https://careofweb.com/tablepress-css-styling/. Bạn cũng có thể sử dụng các CSS selector để chọn các phần tử cụ thể trong bảng, ví dụ: .tablepress-id-1 .row-2 .column-3 để chọn ô ở hàng 2 cột 3 trong bảng có ID là 1.

Để thay đổi màu sắc của một hàng đơn lẻ, hàng tiêu đề, hàng xen kẽ hoặc hàng được làm nổi bật trong TablePress, bạn có thể sử dụng mã CSS để chọn các phần tử cụ thể trong bảng và áp dụng thuộc tính background-color cho chúng. Ví dụ:
Để thay đổi màu sắc của hàng tiêu đề, bạn có thể sử dụng CSS selector .tablepress thead th và nhập mã CSS như sau:
.tablepress thead th {
background-color: blue;
}
Để thay đổi màu sắc của hàng xen kẽ, bạn có thể sử dụng CSS selector .tablepress tbody tr.even và .tablepress tbody tr.odd và nhập mã CSS như sau:
.tablepress tbody tr.even {
background-color: green;
}
.tablepress tbody tr.odd {
background-color: yellow;
}
Để thay đổi màu sắc của hàng được làm nổi bật khi di chuột qua, bạn có thể sử dụng CSS selector .tablepress tbody tr:hover và nhập mã CSS như sau:
.tablepress tbody tr:hover {
background-color: red;
}
Để thay đổi màu sắc của một hàng đơn lẻ, bạn có thể sử dụng CSS selector .tablepress tbody tr.row-x, trong đó x là số thứ tự của hàng, và nhập mã CSS như sau:
.tablepress tbody tr.row-2 {
background-color: pink;
}
Bạn có thể nhập mã CSS của bạn vào ô “Custom CSS” trong phần “Plugin Options” của TablePress. Bạn cũng có thể thay đổi các giá trị màu sắc theo ý muốn của bạn.

Để thay đổi font chữ, kích cỡ chữ và màu sắc của chữ trong TablePress, bạn cũng có thể sử dụng mã CSS để chọn các phần tử cụ thể trong bảng và áp dụng các thuộc tính font-family, font-size và color cho chúng. Ví dụ:
Để thay đổi font chữ, kích cỡ chữ và màu sắc của chữ trong toàn bộ bảng, bạn có thể sử dụng CSS selector .tablepress tbody td và nhập mã CSS như sau:
.tablepress tbody td {
font-family: Georgia;
font-size: 16px;
color: #0325FA;
}
Để thay đổi font chữ, kích cỡ chữ và màu sắc của chữ trong một bảng cụ thể, bạn có thể sử dụng CSS selector .tablepress-id-N tbody td, trong đó N là ID của bảng, và nhập mã CSS như sau:
.tablepress-id-1 tbody td {
font-family: Tahoma;
font-size: 14px;
color: #ff0000;
}
Để thay đổi font chữ, kích cỡ chữ và màu sắc của chữ trong một hàng hoặc cột cụ thể, bạn có thể sử dụng CSS selector .tablepress tbody tr.row-x hoặc .tablepress tbody td.column-y, trong đó x là số thứ tự của hàng và y là số thứ tự của cột, và nhập mã CSS như sau:
.tablepress tbody tr.row-2 {
font-family: Arial;
font-size: 12px;
color: #00ff00;
}
.tablepress tbody td.column-3 {
font-family: Verdana;
font-size: 18px;
color: #0000ff;
}
Bạn có thể nhập mã CSS của bạn vào ô “Custom CSS” trong phần “Plugin Options” của TablePress. Bạn cũng có thể thay đổi các giá trị font-family, font-size và color theo ý muốn của bạn.

Để thiết lập chiều rộng của các cột trong TablePress, bạn có thể sử dụng mã CSS để chọn các cột cụ thể trong bảng và áp dụng thuộc tính width cho chúng.
Ví dụ:
– Để thiết lập chiều rộng của cột thứ 2 trong một bảng cụ thể có ID là 1, bạn có thể sử dụng CSS selector .tablepress-id-1 .column-2 và nhập mã CSS như sau:
.tablepress-id-1 .column-2 {
width: 100px;
}
Để thiết lập chiều rộng của nhiều cột cùng một lúc trong một bảng cụ thể có ID là 1, bạn có thể sử dụng CSS selector .tablepress-id-1 .column-x, trong đó x là số thứ tự của các cột, và nhập mã CSS như sau:
.tablepress-id-1 .column-2, .tablepress-id-1 .column-4, .tablepress-id-1 .column-7 {
width: 150px;
}
Bạn có thể nhập mã CSS của bạn vào ô “Custom CSS” trong phần “Plugin Options” của TablePress. Bạn cũng có thể thay đổi các giá trị width theo ý muốn của bạn.

Để căn giữa một bảng cụ thể có ID là 1, bạn có thể sử dụng CSS selector .tablepress-id-1 và nhập mã CSS như sau:
.tablepress-id-1 {
width: auto;
margin: 0 auto 1em;
}
Để căn giữa tất cả các bảng trên trang web, bạn có thể sử dụng CSS selector .tablepress và nhập mã CSS như sau:
.tablepress {
width: auto;
margin: 0 auto 1em;
}
Bạn có thể nhập mã CSS của bạn vào ô “Custom CSS” trong phần “Plugin Options” của TablePress. Bạn cũng có thể thay đổi các giá trị width và margin theo ý muốn của bạn.

Để loại bỏ các đường viền của một bảng cụ thể có ID là 1, bạn có thể sử dụng CSS selector .tablepress-id-1, .tablepress-id-1 tr, .tablepress-id-1 tbody td, .tablepress-id-1 thead th, .tablepress-id-1 tfoot th và nhập mã CSS như sau:
.tablepress-id-1, .tablepress-id-1 tr, .tablepress-id-1 tbody td, .tablepress-id-1 thead th, .tablepress-id-1 tfoot th {
border: none;
}
Để loại bỏ các đường viền của tất cả các bảng trên trang web, bạn có thể sử dụng CSS selector .tablepress, .tablepress tr, .tablepress tbody td, .tablepress thead th, .tablepress tfoot th và nhập mã CSS như sau:
.tablepress, .tablepress tr, .tablepress tbody td, .tablepress thead th, .tablepress tfoot th {
border: none;
}
Bạn có thể nhập mã CSS của bạn vào ô “Custom CSS” trong phần “Plugin Options” của TablePress. Bạn cũng có thể thay đổi các giá trị border theo ý muốn của bạn.