Cách tạo table (Bảng) trong HTML
Bài này chúng ta sẽ tìm hiểu cách tạo table trong html.
Sử dụng thẻ <table> để tạo bảng, Một table sẽ bao gồm nhiều dòng và nhiều cột được xác định bằng thẻ tr và thẻ td.
Code demo:
See the Pen jWZwMP by BlogIT.vn on CodePen.
Như các bạn đã thấy demo phía trên thì trong thẻ <table>, chúng ta sẽ có các thẻ <tr>, bên trong thẻ <tr>, ta có cáx thẻ <th> và <td>. Chúng ta cùng tìm hiểu các thẻ này:
Nội dung
1. Thẻ <table>
– Cặp thẻ <table></table> dùng để khai báo 1 bảng
| Thuộc tính | Ý nghĩa |
|---|---|
| background=”color” | Đặt màu nền |
| align=”center”| “left”| “right” | Căn vị trí của bảng so với toàn website |
| border=” “ | Độ dày của đường viền |
| border=”color” | Màu của đường viền |
| width=” ” height=” “ | Kích thước chiều ngang và chiều cao |
| cellspacing=” “ | Khoảng cách giữa các ô |
| cellpadding=” “ | Khoảng cách giữa nội dung và đường viền |
2. Thẻ <tr>
– Xác định dòng trong bảng, nằm bên trong cặp thẻ <table></table>
Bao nhiêu cặp thẻ <tr> thì tương ứng với từng đó dòng trong 1 bảng:
| Thuộc tính | Ý nghĩa |
|---|---|
| align=”center”| “justify”| “left”| “right” | Căn lề theo phương ngang (giữa | chiều rộng bằng nhau | trái | phải) |
| border=”color” | Màu của đường viền |
| background=”color” | Đặt màu nền |
| valign=”bottom”| “middle”| “top” | Căn lề theo phương dọc (dưới | giữa | trên) |
3. Thẻ <th>, <th> và thẻ <td></td>
– <th></th> ( table heading): dùng trong trường hợp nếu ô đó chứa tiêu đề của cột, nội dung trong cặp thẻ này được in đậm và căn giữa tự động. Cặp thẻ <th></th> nằm bên trong cặp thẻ <tr></tr>
– <td></td>: Tương tự như thẻ <th></th>, thẻ <td></td> định nghĩa cột trong bảng, chứa dữ liệu của bảng.
2 thẻ này có các thuộc tính giống nhau:
| Thuộc tính | Ý nghĩa |
|---|---|
| background=”color” | Đặt màu nền |
| align=”center”| “justify”| “left”| “right” | Căn lề theo phương ngang (giữa | chiều rộng bằng nhau | trái | phải) |
| border=”color” | Màu của đường viền |
| align=”bottom”| “middle”| “top” | Căn lề theo phương dọc (dưới | giữa | trên) |
| width=” ” height=” “ | Kích thước chiều ngang và chiều cao |
| rowspan=” ” colspan=” “ | Gộp nhiều dòng (cột) lại thành 1 |
Kết luận:
Ở bài này chúng ta cần nắm rõ các thuộc tính cơ bản để khi tạo bảng các bạn có thể tạo ra những bảng như mong muốn. Các thuộc tính này thì cũng quá cơ bản, chắc bạn cũng đã từng thấy ở các bài trước rồi phải không. Sang các bài sau mình sẽ hướng dẫn các bạn chèn hình ảnh, âm thanh, video… vào html.