Sân Chơi Tuổi Trẻ -> Bai viet

Table - xây dựng cấu trúc một trang web sử dụng table

Phần 4: Table - xây dựng cấu trúc một trang web sử dụng table

Table nghĩa tiếng việt là "Bảng", đây là một phần quan trọng và không thể thiếu đối với hầu hết các website. Nó cho phép bạn xây dựng cấu trúc một trang web theo một trình tự do bạn sắp đặt. Để tạo ra một table bạn dùng cặp thẻ lệnh <table></table>

I. Một cấu trúc table cơ bản có dạng như sau:

<table border="1" width="40%" cellspacing="0" cellpadding="4" bgcolor="#F4F4F4">
<tr>
<td>
Table nghĩa tiếng việt là "Bảng", đây là một phần quan trọng và không thể thiếu đối với hầu hết các website. Nó cho phép bạn xây dựng cấu trúc một trang web theo một trình tự do bạn sắp đặt.
<br />www.sanchoituoitre.vn
</td>
</tr>
<tr>
</table>

Và đây là kết quả:

Giải thích đoạn code trên:

+ boder="1" là để tạo đường viền cho table có độ dày là 1.

+ width="40%" cho biết table này rộng 40%, khi bạn để giá trị theo dạng phần trăm thì dù người truy cập dùng trình duyệt nào thì kết quả table hiển thị vẫn chiếm 40% màn ảnh. ở đây bạn có thể thay giá trị trên bằng số cố định width="750" thì nó vẫn luôn rộng 750 pixels dù cho có thay đổi trình duyệt.

+ cellspacing="0" cho biết độ dày giữa ô và table

+ cellpadding="5" cho biết độ dày giữa text và ô

+ bgcolor="#F4F4F4" cho biết màu nền của bảng

+ Cặp thẻ <tr></tr> là định dạng dòng, ở đây chỉ có 1 cặp thẻ nên kết quả là 1 dòng.

+ Cặp thẻ <td></td> là định dạng ô, ở đây cũng chỉ có 1 cặp thẻ nên kết quả là 1 ô.

II. Dòng và ô:

Ví dụ 1:

Và đây là kết quả:

Giải thích đoạn code:

Đoạn code trên sử dụng 2 cặp thẻ <tr></tr> thì cho ra 2 dòng:

+ Trong cặp thẻ <tr></tr> thứ 1 có 2 cặp thẻ <td></td>, cho ra 2 ô
+ Trong cặp thẻ <tr></tr> thứ 2 lại có 2 cặp thẻ <td></td>, cho ra 2 ô

Ví dụ 2:

Kết quả:

Hy vọng qua bài viết này bạn sẽ nắm bắt được phần nào khái niệm về table, phần còn lại chủ yếu là bạn phải biết lập luận và phải biết hình dung ra giao diện. Ở các phần tiếp theo của bài viết có thể mình sẽ cho một số trang web mẫu để dễ dàng tiếp thu hơn.

Written by lyhuuloi (Bản quyền thuộc sanchoituoitre.vn)

Mời đón xem tiếp phần... 5 !

------------------------------------------------------------------
Thảo luận tại diễn đàn: [Tut] HTML cơ bản