Thiet ke web, Thiết kế web

Video học thiết kế web
học web

Video học Joomla

Video học Photoshop

Video học SEO

Tại sao nên chọn công ty
Thiết kế Web PAH

» Giá thiết kế web tốt nhất, đáp ứng mọi yêu cầu của quý khách, với kinh nghiệm có được nhờ thiết kế web cho hơn 450 khách hàng trong & ngoài nước
» Thiết kế website ấn tượng! Website quý khách sẽ được thiết kế ấn tượng, nổi bật theo yêu cầu của từng khách hàng!
» Thiết kế web theo chuẩn SEO (tối ưu web lên Top 10 Google & các bộ máy tìm kiếm khác)
» Video clip hướng dẫn quản lý website độc quyền.

Thiết kế layout nên dùng thẻ <table> hay CSS?

Chúng ta sẽ nghiên cứu thử thiết kế một giao diện đơn giản như sau

Bannner

left menu

center content

right ads

Cách 1: sử dung table

<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" colspan="3" bgcolor="#FFCCFF">Banner</td>
</tr>
<tr>
<td width="80" bgcolor="#CCFFFF">left menu</td>
<td>center content</td>
<td width="80" bgcolor="#FFFF99">right ads</td>
</tr>
<tr>
<td colspan="3" bgcolor="#99FFCC">copyight</td>
</tr>
</table>

Cách 2: sử dụng CSS

<div style="height:30px; width:360px; background:#FFCCFF; ">Bannner</div>
<div style="float:left; width:80px; background:#CCFFFF; ">left menu</div>
<div style="float:left; width:200px;">center content</div>
<div style="float:left; width:80px; background:#FFFF99; ">right ads</div>
<div style="clear:left; width:360px; background:#99FFCC; ">copyright</div>

Bạn đã thấy đó nếu ta dùng Cách 1 thì mã dài hơn và trình duyệt web cần phải đọc đến thẻ đóng </table> sau đó mới hiển thị ra kết quả, nếu chúng ta có nhiều table lồng nhau thì đòi hỏi trình duyệt phải xử lý nhiều hơn nữa. Còn dùng Cách 2, chúng ta thấy mỗi thẻ </div> đóng sẽ kết thúc một lần xử lý, lúc đó trang web sẽ hiển thị từng phần độc lập (banner, left, center, ads, copyright), sẽ giúp trang web down nhanh hơn, vì trình duyệt xử lý từng cặp thẻ <div></div> chứ không đọc hết một lần rồi mới trả về kết quả như thẻ table.

Người Viết Bài: Phan Long Quý

Tìm kiếm Google