1.Cách tạo bảng trong HTML

Để tạo ra một bảng bạn cần sử dụng các thẻ bao gồm:

<table>: Xác định một bảng

<thead>: Nội dung tiêu đề trong một bảng

<tbody>: Nội dung trong một bảng

<tfoot>: Nhóm nội dung chân trang trong một bảng (vd: tổng một cột)

<th>: Xác định ô tiêu đề trong bảng

<tr>: Xác định một hàng trong bảng

<td>: Xác định một ô trong bảng

<caption>: Xác định chú thích bảng

Ví dụ:

2.Cách chỉnh sửa một bảng trong HTML

2.1 Đường viền bảng

Để thêm đường viền cho bảng ta sử dụng thuộc tính border trong thẻ <table>, th và td

Một số đường viền thường dùng là:

• Dường viền kép

• Đường viền đơn

• Đường viền vát tròn

2.2 Tùy chỉnh kích thước bảng

Ta có thể sử dụng thuộc tính width và height của style để xác định kích thước của bảng, hàng và cột

Ví dụ:

Ở đây, tôi xác định kích thước chiều ngang của bảng là 100% mà hình của trang

2.3 Phần đệm và khoảng cách các ô trong bảng

Phần đệm của ô là khoảng trống giữa các cạnh ô và nội dung ô, theo mặc định phầm đệm được đặt bằng 0

Để thêm phần đệm trên các ô trong bảng ta sử dụng thuộc tính padding

Khoảng cách ô là khoảng cách giữa các ô, theo mặc định khoảng cách giữa các ô là 2px

Để thay đổi khoảng cách giữa các ô trong bảng ta sử dụng thuộc tính

border-space trên table

Ví dụ:

Ở đây, tôi xác định phần đệm là 30px và khoảng cách giữa các ô là 20px

2.4 Gộp dòng, cột

Để gộp nhiều cột lại với nhau ta sử dụng thuộc tính colspan

Để gộp nhiều cột lại với nhau ta sử dụng thuộc tính rowspan

Ví dụ:

Ở đây, tôi gộp 4 cột lại với nhau tạo thành hàng “TỔNG LƯƠNG” và gộp 2 cột lại với nhau tạo thành cột “TỔNG LƯƠNG”

2.5 Tạo kiểu cho bảng

Để tạo kiểu cho bảng ta sử dụng thuộc tính :nth-child()

Ví dụ:

Ở đây, tôi sử dụng thuộc tính even để tô màu hàng 2,4,6,…; bạn cũng có thể đổi thành odd để tô màu các dòng 1,3,5,…

Bạn có thể sử dụng thuộc tính :hover để đánh đấu các thành phần trong bảng khi di chuột qua

Ví dụ:

Ở đây, tôi xác định màu sắc khi di chuột qua bảng là màu xanh