1. Đường viền bảng trong CSS

Để chỉ định đường viền bảng trong CSS ta sử dụng thuộc tính border

Ví dụ:

Lưu ý: bảng ở ví dụ trên có đường viền đôi là do cả bảng và phần tử <th> và <td> đề có đường viền riêng biệt

Để thu gọn đường viền bảng ta sử dụng thuộc tính border-collapse

Ví dụ:

Nếu bạn chỉ muốn có đường viền xung quanh bảng thì bạn hãy chỉ sử dụng thuộc tính border cho <table>

Ví dụ:

2. Chiều rộng và chiều cao của bảng

Chiều rộng và chiều cao của bảng được xác định bởi các thuộc tính width và height

Ví dụ:

Ở đây, tôi xác định chiều rộng của bảng là 100% chiều rộng của màn hình và chiều cao của các phần tử <th> là 70px

3. Căn chỉnh bảng

3.1 Căn chỉnh băng theo chiều ngang

Để căn chỉnh bảng theo chiều ngang ta sử dụng thuộc tính text-align

Text-align có thể điều chỉnh phần tử <th> hoặc <td> sang bên trái (left), sang bên phải (right) và căn giữa (center)

Theo mặc định, nội dung của các phần tử <th> sẽ được căn giữa và nội dung của các phần tử <td> được căn trái

Ví dụ:

Ở đây, tôi căn giữa nội dung của các phần tử <td>

3.2 Căn chỉnh bảng theo chiều dọc

Để căn chỉnh bảng theo chiều dọc ta sử dụng thuộc tính vertical-align

Với thuộc tính này ta có thể căn trên (top), căn dưới (bottom) và căn giữa (middle) với nội dung của các phần tử <th> hoặc <td>

Ví dụ:

Ở đây, tôi căn dưới nội dung của các phần tử <td>

4. Tạo kiểu cho bảng

4.1 Khoảng cách giữa đường viền và nội dung

Để kiểm soát khoảng cách giữa nội dung và đường viển trong bảng ta sử dụng thuộc tính padding trên các phần tử <td> và <th>

Ví dụ:

Ở đây, tôi xác định khoảng cách giữa nội dung của các phần tử <td> và <th> với đường viền là 15px

4.2 Hiệu ứng khi di chuột qua bảng

Ta sử dụng :hover để đánh dấu các mục khi di chuột qua

Ví dụ:

Ở đây, tôi xác định khi di chuột qua nội dung các phần tử <tr> có nền màu vàng

4.3 Bảng sọc

Để làm bảng có sọc vằn ta sử dụng nth-child() và thêm thuộc tính

background-color vào các vị trí trong bẳng (chẵn(even) hoặc lẻ(odd))

Ví dụ:

4.4 Thêm màu cho bảng

Để chỉ định màu nền và màu văn bản của nội dung các phần tử trong bảng ta sử dụng thuộc tính background-color và color

Ví dụ:

5. Bảng đáp ứng

Bảng đáp ứng sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị toàn bộ nội dung

Thêm một phần tử vào vùng chứa (như <div>) bằng overflow-x:auto xung quanh phần tử <table> để làm cho nó đáp ứng

Ví dụ: