[Bài 8] Tạo table trong html

Bạn đang ở bài 8 trong 11 bài của serie Học HTML cơ bản.

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 (@blogitvn) 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><td>. Chúng ta cùng tìm hiểu các thẻ này:

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.

[Bài 8] Tạo table trong html
4.55 (90.91%) 11 votes

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz