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
