🗓️5-Chèn và định dạng bảng trong HTML
Ví dụ bảng
Bảng là một thành phần không thể thiếu hiển thị dữ liệu trong HTML.
Các thẻ định nghĩa bảng
Để đị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
<tr>
<th>Họ tên</th>
<th>Ngày sinh</th>
<th>Giới tính</th>
</tr> 
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.
<tr>
<td>Trần Anh Đức</td>
<td>03/08/1993</td>
<td>Nam</td>
</tr> 
Tạo tiêu đề cho bảng
Để tạo tiêu đề cho bảng chúng ta sử dụng thẻ <caption> nằm trong cặp thẻ <table>.
Một số thuộc tính của các thẻ khi tạo bảng
Thuộc tính border
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
- 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 cellpadding
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
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
Thuộc tính width để xác định độ rộng của bảng hoặc ô.
Thuộc tính height
Thuộc tính height để xác định chiều cao của bảng hoặc ô.
Thuộc tính align
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
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 đó.
Cách gộp các cột hoặc hàng trong một bảng
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.
Gộp các ô theo chiều dọc
Cú pháp: rowspan="số ô muốn gộp lại với nhau"
Ví dụ:
Gộp các ô theo chiều ngang
Cú pháp: colspan="số ô muốn gộp lại với nhau"
Ví dụ:
Tóm tắt nội dung bài học:
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.
Last updated