[Series Html] Bài 4: Tạo bảng trong Html

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

Chào các bạn! Tiếp tục series học Html cơ bản cùng AnonyHome. Chúng ta sẽ đến với bài 4. Trong bài này chúng ta cùng tìm hiểu về cách tạo bảng trong Html.

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome
1. Thẻ <table>

– Cặp thẻ <table></table> dùng để khai báo 1 bảng
– Các thuộc tính:
+ width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px
+ height: Chiều cao bảng
+ bgcolor: Định màu nền của bảng
+ background: Định ảnh nền của bảng
+ border: Độ lớn đường viền của bảng
+ bordercolor: Màu của đường viền
+ align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center
+ cellspacing: Định độ dày của khung
+ cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng.
Ví dụ: 
[Series Html] Bài 4: Tạo bảng trong Html
  

2. Thẻ <tr></tr>: table row

– Xác định dòng trong bảng, nằm bên trong cặp thẻ
<table></table>

Ví dụ:          
<table>               
                    <tr></tr>              
                    <tr></tr>        
</table>

Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng
– Một số thuộc tính trong thẻ <tr>  :
+ height: Khai báo chiều cao của dòng( độ lớn dòng)  
+ align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right( phải),center( giữa)  
+valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới).

3. Thẻ <td></td>: table data

– Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data).

– Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>.
– Một số thuộc tính:
  + width: Độ rộng của cột.
  + height: Chiều cao của cột.

  + align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right( phải), center( giữa).

  + valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)

Ví dụ:

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome

4. Một số thẻ khác.

– <th> </th>( table heading) Tương tự cặp thẻ <td></td> tuy nhiên <th> 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.
 Ví dụ:

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome



Một số lưu ý:
– Số cặp thẻ <td> ( số cột) trong các dòng phải bằng nhau để tránh vỡ khung của bảng.
– Đối với ô trống( không có nội dung) nên sử dụng thẻ <br> hoặc ‘&nbsp;’ thay cho khoảng trống.

5. Gộp cột, dòng trong bảng.


– Là việc tùy biến bảng bằng việc gộp các cột hay dòng lại với nhau.
– colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan.
– rowspan=“y”: Gộp y hàng tính từ hàng đang xét.
Lưu ý: Sau khi gộp phải loại bỏ số dòng( hoặc cột) để cân đối bảng.
Ví dụ:   

[Series Html] Bài 4: Tạo bảng trong Html - AnonyHome


Kết thúc bài 4 tại đây. Trong bài mình đã giới thiệu cho các bạn cách tạo bảng trong Html. Trong bài học tiếp theo chúng ta sẽ nghiên cứu về danh sách( list) trong Html.
Chúc các bạn học tập tốt! Mọi ý kiến các bạn vui lòng để lại trong mục bình luận bên dưới.

Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Chỉ với vài bước đơn giản,…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x