Table - bố cục một trang web sử dụng bảng

Table - một yếu tố rất quan trong trong các Website đẹp. Table cho phép bạn có một sự chính xác đến từng pixel trong bố cục của Homepage. Với Table bạn có thể trang trí và bố cục trang web của mình như một tờ báo với nhiều cột khác nhau. Table làm cho trang web của bạn có một layout sinh động hơn. Trang này chỉ đề cập tới những cái cơ bản nhất của Table.
Cặp TAG tạo ra một Table. Như bạn biết, một Table được tạo ta từ nhiều dòng và mỗi dòng lại có thể chứa nhiều ô. Mỗi cặp TAG tạo ra một dòng, trong dòng ấy bạn có thể sử dụng nhiều cặp TAG để có nhiều ô. Cũng như

, và thực ra là một TAG đơn, không cần đến và nhưng nếu cẩn thận, ta vẫn nên dùng nó như một cặp TAG.

Dòng 1 - ô 1	Dòng 1 - ô 2	Dòng 1 - ô 3
Dòng 2 - ô 1	Dòng 2 - ô 2	Dòng 2 - ô 3

HTML Code của bảng trên được viết như sau:

Code:

<table border="1" bordercolor="red" width="80%" align="center" cellpadding="10" cellspacing="5" bgcolor="gray">
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 2</td>
<td width="34%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 3</td>
</tr>
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 2 - ô 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 2 - ô 2</td>
<td width="34%" bgcolor="#feedd1" align="left">Dòng 2 - ô 3</td>
</tr>
</table>

cho biết chiều rộng của table này là 100%, con số này không có một giá trị cố định, nó sẽ thay đổi theo mức rộng của màn ảnh của người đến xem, như vậy người xem không phải scroll ngang. Nhưng khi bạn dùng một giá trị cố định, chẳng hạn: width="800", Table này sẽ luôn luôn rộng chừng ấy pixel, bất kể màn ảnh là 800 hay 1024 pixels.

cho biết, ô đó chiếm 33% chiều rộng của dòng. hướng bảng vào trung tâm của trang web, định hướng toàn bộ nội dung của một ô. align có thể mang các giá trị sau: "left" (gía trị mặc định - không cần viết cũng được), "center" (trung tâm), "right" (phải) bgcolor có thể sử dụng cho trang web (), toàn bộ table () hoặc từng ô ( ) border="1" bordercolor="red" có nghĩa: bảng có khung với độ dày 1, màu đỏ Bạn có thể định khoảng cách giữa nội dung và khung trong một ô bằng cellpadding, cellpadding="10" có nghĩa là text cách khung 10 pixels. Tương tự như vậy với khoảng cách giữa các ô trong bảng (cellpadding): cellspacing="5" có nghĩa là các ô của table cách nhau 5 pixels Dòng 1 - ô 1 Dòng 1 - ô 2 Text Text Text Text Dòng 2 - 1 ô Trong table trên, bạn thấy các ô có chiều cao và chiều rộng khác nhau, chính xác hơn là ô bên trái, phía dưới rộng bằng 2 ô trên, ô bên phải lại cao bằng hai ô bên trái nó. Ðiều đó được thực hiện bởi colspan và rowspan (xem HTML Code) Code: <table border="1" cellpadding="10" bordercolor="#FF0000" width="80%" cellspacing="5"> <tr> <td width="33%" valign="top" bgcolor="#E8E8E8">Dòng 1 - ô 1</td> <td width="33%" valign="top" bgcolor="#E8E8E8">Dòng 1 - ô 2</td> <td width="34%" valign="top" bgcolor="#feedd1" rowspan="2"> <table width="100%" cellpadding="5" cellspacing="5" border="0"          bgcolor="white"> <tr> <td width="50%" bgcolor="#e8e8e8">Text</td> <td width="50%" bgcolor="#e8e8e8">Text</td> </tr> <tr> <td width="50%" bgcolor="#e8e8e8">Text</td> <td width="50%" bgcolor="#e8e8e8">Text</td> </tr> </table> </td> </tr> <tr> <td width="66%" valign="top" bgcolor="#ffcc99" colspan="2">Dòng 2 - 1 ô</td> </tr> </table> Và đặc biệt nữa là trong ô bên phải, bạn lại thấy một table nữa có hai dòng, mỗi dòng hai ô. Như vậy, bạn có thể lồng một table trong một table khác. Cũng còn rất nhiều thủ thuật trình bày nữa nhưng tôi nghĩ, nếu sử dụng những kỹ thuật trên cùng với một chút sáng tạo, bạn cũng đã đạt được rất nhiều rồi. Có một điều cần lưu ý là Netscape Version 2 không thể hiện được một table nền tối với chữ sáng. Nhưng bạn không cần ngại bởi ngày nay chắc chẳng ai dùng NS 2 nữa. tridung.de Được sửa bởi *LoveMe* ngày Fri Sep 09, 2011 4:18 pm; sửa lần 3. (Reason for editing : thiet ke web) LikeDislike Similar topics Similar topics » Thiết kế web bằng frontpage nè.. mình tự viết :p » Mot so hinh anh lam bang pho toshop » Cách dùng mạo từ "the"(English) Nhạc hay Đăng Nhập Tên truy cập: Mật khẩu: Quên mật khẩu Đăng nhập tự động mỗi khi truy cập Or November 2024 Mon Tue Wed Thu Fri Sat Sun         1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30   Calendar 10 Câu tỏ tình hay nhất 1/ Liệu cha của em có phải là một tay trộm hay không? Vì ông ấy đã lấy cắp những vì sao trên trời và đưa chúng vào mắt em. 2/ Khi ngã từ thiên đường xuống trần gian em có đau không? 3/ Hẳn là em đã mỏi nhừ, vì em chạy trong tâm trí anh suốt cả ngày. 4/ Xin lỗi tôi đã làm mất số điện thoại của mình. Tôi có thể mượn số của cô được không 5/ Cô có tin vào tình yêu từ cái nhìn đầu tiên không, hay để tôi đi qua một lần nữa 6/ Xin lỗi cô, cô có hôn người lạ không? Không à? Vậy thì hãy để tôi tự giới thiệu nhé. 7/ Chân em có đau khi chạy suốt đêm trong giấc mơ của anh không? 8/ Tôi mới tới thành phố này. Liệu em có thể chỉ dẫn cho tôi đến căn hộ của em được không? 9/ Xin hỏi cô có bản đồ không? Tôi cứ bị lạc hoài trong đôi mắt cô. 10/ Điều duy nhất đôi mắt em chưa nói cho anh biết là tên của em. Chọn Diễn Đàn||--News|   |--Thông báo từ diễn đàn|   |--Thông tin việc làm|   |--Hòm thư góp ý|   |--Khoa Học Giáo Dục|   |--Tổng Hợp|   |   |--Cơ Khí Chế Tạo|   |   |--Điện-Điện Tử|   |   |   |--Tài Liệu|   |--CLB tiếng anh|   |--Chuyên mục hỏi đáp|   |--Thí nghiệm điện|   |--Thí nghiệm nhất thứ|   |   |--Thí nghiệm máy biến áp|   |   |--Thí nghiệm máy cắt điện|   |   |   |--Thí nghiệm nhị thứ|   |--Văn Hóa Giải Trí    |--Âm nhạc Việt Nam    |   |--Âm nhạc hot    |   |--Guitar Club    |   |--Nhạc Chế -Audio    |   |--Album Đàm Vĩnh Hưng    |       |--Giao Lưu LàmQuen    |--Tranh Ảnh    |   |--Ảnh Thành Viên    |   |--Ảnh Người Đẹp    |       |--Phim Hay    |--Blogger    |   |--Truyện Thơ    |   |--Danh Ngôn    |   |--Trắc Nghiệm Vui    |       |--Du Lịch Hôm nay: Thu Nov 28, 2024 8:47 am Free forum | Invision | Free forum support | Báo cáo lạm dụng | Cookies | Thảo luận mới nhất