Tiếp theo của bài Các Thẻ HTML Thông Dụng P2 bài hôm nay website giá rẻ và các bạn cùng tìm hiểu về thẻ tạo bảng TABLE.
Cú pháp:
- Thẻ TABLE (table tag) :
Dùng để tạo bảng biểu trong html: có hai yếu tố để tạo thành bảng gồm hàng và cột. Tương ứng với thẻ <table> ta sẽ có thẻ tạo hàng <tr> , thẻ tạo cột <td>, thẻ dành cho tiêu đề bảng <th>Cú pháp:
Hình 1: Cấu trúc đơn giản của một bảng trong html
Hiểu đơn giản cú pháp của một thẻ <table> sẽ bao hàm một thẻ <tr> và <td> ở trong. Hình ảnh trên là một cấu trúc đơn giản của một table tạo từ html có 2 dòng, mỗi dòng 2 cột.
- Thuộc tính của thẻ table:
width, height, bgcolor, background, align tương tự như của thẻ <body>
Ngoài ra thẻ <table> còn có các thuộc tính quan trọng là:
+ border: xác định độ rộng đường bao của bảng, giá trị số, đơn vị là px
+ cellspacing: xác định khoảng cách giữa các ô.
+ cellpadding: xác định khoảng cách dữ liệu trong ô đối với các cạnh của ô.
Ví dụ 1: Tạo bảng có độ rộng 300px, độ cao 100px, màu nền là xanh, căn trái, đường bao 1px, khoảng cách giữa các ô là 2px, giữa cạnh ô và dữ liệu trong ô cũng là 2px.
Code HTML ví dụ 1
Trình duyệt hiển thị
Giải thích thêm: theo hình trình duyệt hiển thị thì ta có thể thấy khoảng cách giữa ô Họ Tên và các ô xung quanh nó là 2px, giữa chữ họ tên với cạnh của ô chứa nó là 2px, khoảng cách giữa từ thiet ke web bat dong san đến cạnh của ô chứa nó cũng là 2px....
- Thuộc tính của thẻ <tr>:
Thẻ <tr> cũng có các thuộc tính: width, height, bgcolor, background, align.
Ngoài ra còn có thuộc tính valign để căn lề theo chiều dọc, nhận các giá trị là top - trên, middle - trung tâm, bottom - dưới, baseline - cách trên 1 dòng cơ bản.
- Thuộc tính của thẻ <td>:
Thẻ <td> cũng có các thuộc tính là width, height, bgcolor, background, align, valign.
Ngoài ra còn có 2 thuộc tính quan trọng đó là:
+ colspan: xác định phạm vi mở rộng của ô theo hàng hay còn hiểu là gộp cột.
+ rowspan: xác định phạm vi mở rộng của ô theo cột hay còn hiểu là gộp hàng.
- Chú ý về thẻ <th>:
Thẻ <th> dành cho tạo tiêu đề bảng.
- Trong thẻ table còn có các thẻ như:
+ <thead>:quy định dữ liệu luôn nằm trên cùng của bảng
+ <tbody>: quy định dữ liệu luôn nằm phần giữa bảng.
+ <tfoot>: quy định dữ liệu luôn nằm phần dưới cùng của bảng.
Bài tập thực hành:
Tạo bảng như sau:
Gợi ý bài làm:
- Hình 2 là một bảng: ta cần dùng 1 thẻ <table>
- Gồm 6 hàng: ta cần dùng 6 thẻ tạo hàng <tr>.
- Trong mỗi hàng gồm 4 cột: trong mỗi thẻ <tr> ta cần dùng 4 thẻ <td>
- Thẻ <tr> đầu tiên của mỗi cột có nội dung in đậm và căn giữa thì ta có thể dùng 1 trong hai cách:
+ Định nghĩa thuộc tính cho thẻ <tr> đó.
+ Dùng thẻ <th> thay vì dùng <td>
- Chú ý căn chỉnh nội dung cho các ô, font chữ ở đây là Time New Roman.
- Boder =1px, có màu đen.
- Khoảng cách giữa các ô bằng 0px, khoảng cách giữa nội dung và cạnh các ô là 2px ( Khoảng cách giữa ô chứa từ Nguyễn Gia Linh và các ô xung quanh nó là 0px, khoảng cách giữa ô chứa từ thiet ke giao dien web cách các cạnh ô chứa nó là 2px).
Từ các gợi ý trên mời các bạn tự code HTML, mọi thắc mắc có thể bình luận ngay dưới bài viết mình sẽ giải thích.
Bài viết trên hi vọng sẽ mang lại chút giá trị cho các bạn đang học HTML, chúng ta sẽ gặp lại nhau trong Bài 4: LIST
0 nhận xét:
Đăng nhận xét