Table trong HTML

Trong thiết kế web, thông tin có thể trình bày theo dạng văn bản thuần túy, còn có một số thông tin được hiện thị dưới dạng các bảng

Dưới đây là ví dụ về một cái bảng:

HTML/CSS JavaScript Server Side
HTML jQuery PHP
CSS Ajax MySQL
Bootstrap 3 Nodejs ASP.NET

Cách tạo bảng

Để tạo một cái bảng trong HTML được sử dụng 3 nhóm thẻ sau:

Nhóm 1: Dùng cặp thẻ <table></table> để bắt đầu của bảng và kết thúc.

Ví dụ:

Nhóm 2: Dùng cặp thẻ <tr></tr> để tạo hàng cho bảng, nhóm thẻ này nằm trong thẻ <table>

Ví dụ:

Nhóm 3: Đặt cặp thẻ <td></td> hoặc <th></th>, nhóm này nằm bên trong cặp thẻ <tr></tr> để tạo ô cho hàng. Thẻ <th> thường dùng cho hàng đầu(hàng tiêu đề), <td> dành cho các hàng còn lại.

Ví dụ:

Định dạng cho bảng

Về phần định dạng cho bảng, chúng ta có bốn thuộc tính cơ bản như sau:

Thuộc tính Ý nghĩa
border Thiết lập độ dày của đường viền bao xung quanh bảng
cellpadding Thiết lập khoảng cách giữa nội dung của ô và đường viền của ô
cellspacing Thiết lập khoảng cách giữa hai ô
bgcolor Thiết lập màu nền

Nếu đặt bên trong thẻ <table> thì sẽ thiết lập màu nền cho bảng

Nếu đặt bên trong thẻ <tr> thì sẽ thiết lập màu nền cho hàng

Nếu đặt bên trong thẻ <td> hoặc <th> thì sẽ thiết lập màu nền cho ô

Ví dụ

Thiết lập kích thước cho bảng

Về phần thiết lập kích thước cho bảng, chúng ta có thể thiết lập:

Chiều rộng cho bảng (Bằng cách đặt thuộc tính width vào bên trong thẻ <table>)

Chiều rộng cho ô (Bằng cách đặt thuộc tính width vào bên trong thẻ <td> hoặc <th>)

Chiều cao cho bảng (Bằng cách đặt thuộc tính height vào bên trong thẻ <table>)

Chiều cao cho hàng (Bằng cách đặt thuộc tính height vào bên trong thẻ <tr>)

Ví dụ

Canh lề nội dung của ô

Để canh lề nội dung cho ô, ta thêm thuộc tính align vào trong thẻ <td> hoặc <th> với các giá trị như sau:

left (Canh nội dung nằm bên trái ô)

center (Canh nội dung nằm ở giữa ô)

right (Canh nội dung nằm bên phải ô)

Ví dụ

Lưu ý: Nếu ta đặt thuộc tính align vào bên trong thẻ <tr> thì tất cả các ô của hàng đó sẽ có cùng một kiểu canh lề.

Gộp các ô trong bảng

Ví dụ bảng sau:

STT Sản phẩm Giá Số lượng Thành tiền
1 SP A 12000 1 12000
2 SP B 11000 2 22000
Tổng tiền 34000

Để gộp các cột lại với nhau ta đặt thuộc tính colspan=”số lượng cột muốn gộp” vào trong thẻ <th> hoặc <td>

Để gộp các hàng lại với nhau ta đặt thuộc tính rowspan=”số lượng hàng muốn gộp” vào trong thẻ <th> hoặc <td>

Ví dụ

Tạo tiêu đề cho bảng

Để tạo tiêu đề nằm phía trên bảng, ta sử dụng <caption align=”top”>Nội dung tiêu đề</caption>

Để tạo tiêu đề nằm phía dưới bảng, ta sử dụng <caption align=”bottom”>Nội dung tiêu đề</caption>

Ví dụ

Học HTML