🗓️5-Chèn và định dạng bảng trong HTML
Last updated
Last updated
Bảng là một thành phần không thể thiếu hiển thị dữ liệu trong HTML.
Để định nghĩa bảng trong HTML, chúng ta sử dụng 4 thẻ sau:
Thẻ <table> dùng để định nghĩa bảng.
Thẻ <tr> dùng để định nghĩa 1 dòng (hay 1 hàng).
Thẻ <th> dùng để định nghĩa một ô trong hàng muốn đánh dấu làm tiêu đề. Nội dung sẽ được mặc định in đậm và căn giữa.
Thẻ <td> dùng để định nghĩa một ô trong hàng thông thường.
Ví dụ: Tạo 1 bảng gồm dòng tiêu đề (dòng đầu tiên) và 3 dòng dữ liệu.
Trong đó:
Dòng đầu tiên sử dụng thẻ <tr> để tạo dòng và các ô được tạo bằng thẻ <th> làm tiêu đề của bảng
Các dòng tiếp theo sử dụng thẻ <tr> để tạo dòng thứ 2 và sử dụng thẻ <td> để định nghĩa ô chứa dữ liệu.
Để tạo tiêu đề cho bảng chúng ta sử dụng thẻ <caption> nằm trong cặp thẻ <table>.
Để căn chỉnh tiêu đề nằm trên bảng hay dưới bảng chúng ta có thể sử dụng thuộc tính align nhận 2 giá trị top và bottom với top là tiêu đề nằm trên bảng và bottom là tiêu đề nằm dưới bảng.
Thuộc tính border để thiết lập độ dày của đường viền bao xung quanh bảng và ô.
<table border="3px">
- Thuộc tính cellspacing tạo khoảng cách giữa đường viên các ô với nhau và đường viền các ô với đường viền bảng.
<table border="1px" cellspacing="20px">
Thuộc tính cellspacing tạo khoảng cách giữa đường viên ô và nội dung bên trong ô.
<table border="1px" cellpadding="20px">
Thuộc tính bgcolor dung để định nghĩa màu nền cho bảng, cho 1 dòng hoặc cho 1 ô.
Thuộc tính width để xác định độ rộng của bảng hoặc ô.
Thuộc tính height để xác định chiều cao của bảng hoặc ô.
Thuộc tính align để căn nội dung trong ô theo chiều ngang.
align nhận 4 giá trị:
left: Nội dung được căn trái.
right: Nội dung được căn phải
center: Nội dung được căn giữa
justify: Nội dung được căn đều hai bên
Thuộc tính valign để căn chỉnh nội dung trong ô theo chiều dọc của bảng.
valign nhận 3 giá trị:
top: Nội dung được căn trên
middle (mặc định): Nội dung được căn giữa
bottom: Nội dung được căn dưới
Nếu thuộc tính valign được đặt trong thẻ tr thì tất cả các ô sẽ được căn theo giá trị valign đó.
Khi sử dụng bảng trong word hoặc excel không khó để chúng ta bắt gặp việc phải gộp các dòng hoặc cột (ô) lại với nhau như ví dụ trên. Vậy trong HTML, chúng ta cũng có thể gộp các dòng hoặc cột lại như vậy.
Cú pháp: rowspan="số ô muốn gộp lại với nhau"
Ví dụ:
Cú pháp: colspan="số ô muốn gộp lại với nhau"
Ví dụ:
Qua buổi học chúng ta đã được tìm hiểu một số nội dung sau:
Cách tạo ra một bảng trong HTML sử dụng các thẻ <table> <tr> <td> <td>
Cách tạo tiêu đề của bảng.
Một số thuộc tính của bảng và thành phần bên trong bảng.
Cách gộp các hàng, cột trong bảng.
