Học Làm Web

Tự học thiết kế trang web từng bước từng bước một – bài 9

Tiếp theo bài 8, bài này ta xem xét đoạn mã sau:

MÃ: CHỌN TẤT CẢ
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tr>
<td>ô 1 bình thường</td>
<td>ô bình thường</td>
<td>ô bình thường</td>
<td>ô bình thường</td>
</tr>
<tr>
<td>ô bình thường</td>
<td colspan="1" rowspan="2">2 ô trộn thành một theo chiều dọc</td>
<td>ô bình thường</td>
<td>ô bình thường</td>
</tr>
<tr>
<td>ô bình thường</td>
<td>ô bình thường</td>
<td>ô bình thường</td>
</tr>
<tr>
<td>ô bình thường</td>
<td>ô bình thường</td>
<td>ô bình thường</td>
<td>ô bình thường</td>
</tr>
</table>

Kết quả của đoạn mã trên sẽ cho ta một table hình dáng như sau:

Hình ảnh
Hình dự phòng

Như vậy, mấu chốt vấn đề là bạn cần khảo sát kỹ đoạn mã:

MÃ: CHỌN TẤT CẢ
<td colspan="1" rowspan="2">

tồn tại ở bên trên để biết rowspan=”2″ chính là… thủ phạm để một ô kéo vượt qua 2 dòng.

Bây giờ để kết thức bài 9 này, và cũng là kết thúc bài học về table, bạn copy lại đoạn mã sau, bê vào trang web bạn đang thiết kế, nhớ đặt trong phạm vi <body> đặt ở đây </body> và save lại rồi xem với trình duyệt.

MÃ: CHỌN TẤT CẢ
<table style="text-align: left; width: 770px; height: 550px;" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td style="width: 100%; height: 120px; background-color: rgb(51, 153, 153);" colspan="3" rowspan="1">BANNER TRANG WEB ĐẶT Ở VỊ TRÍ NÀY</td>
</tr>
<tr>
<td style="width: 20%; background-color: rgb(153, 255, 153); height: 428px;"></td>
<td style="height: 428px;"></td>
<td style="width: 30%; background-color: rgb(255, 204, 204); height: 428px;"></td>
</tr>
</table>

Hãy tìm hiểu kỹ ví dụ trên, bạn sẽ có thể thiết kế nên giao diện của một trang web với 3 cột rồi đấy. Hình dáng nó như sau:

Hình ảnh

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: