học cách sử dụng tag <div> thay cho <table>

by **HuyLord** 14/9/2008, 9:14 pm

trong khi làm homepage cho anh EA thì mình nhận ra rằng thiết kế 1 website = tag <table> mặc dù rất tiện lợi, dễ dùng nhưng nó đã không còn phù hợp trong thời đại này nữa.Khi mình đang tìm cấu trúc template cho hompage, view source các trang nc' ngoài, các designer đều dùng DIV để thiết kế.

Đây là lí do để học CSS + tag <div> thay cho <table>:

1. Tăng tốc độ website.
Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.

Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

2.Thay đổi website nhanh hơn
Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sử dụng nó sẽ được thay đổi theo.

3.Khả năng phát triển.
Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.

4. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.

5. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.

6. Cải thiện vị trí trong các website tìm kiếm.
Các bạn nên nhớ rằng sử dụng table thì các công cụ tìm kiếm không thể sử dụng được.

by **HuyLord** 14/9/2008, 9:16 pm

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>3 Columns</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <style type="text/css"> div {text-align:center;} html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bg.gif); background-position:top right; background-repeat:repeat-y; background-color:#CCCCFF; font-family:Papyrus, Rockwell, Poor Richard, Times New Roman, serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-color:#CCCCCC; margin:0; padding:0; height:80px; } h1, p {margin:0; padding:0;} #left { float:left; width:200px; } #main { position:relative; margin-left:200px; } #right { float:right; width:200px; } #content { padding:5px; margin-right:200px; text-align:justify; } #footer { height:80px; background-color:#cccccc; margin:0; padding:0; margin-top:-80px; } #clearfooter { clear:both; height:80px; overflow:hidden; } </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Three columns with a header and a footer</h1> </div> <div id="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <div id="main"> <div id="right"> <p>right</p> <p>right</p> <p>right</p> <p>right</p> <p>right</p> <p>right</p> </div> <div id="content"> <p><strong>Brown's peace offer to PM </strong><br /> <br /> <strong>Patrick Wintour and Michael White <br /> Monday January 10, 2005 <br /> <a href="http://www.guardian.co.uk">The Guardian </a></strong><br /> <br /> Gordon Brown and Tony Blair yesterday pulled back from the brink of mutual destruction after rowing over a detailed account, inspired by Mr Brown's allies, alleging that Mr Blair reneged on a repeatedly offered promise to stand down before the general election in favour of the chancellor. </p> <p>A new book claims Mr Brown has frequently told Mr Blair since: "There is nothing that you could say to me now that I could ever believe." It also suggests the chancellor turned down an offer last September by Mr Blair to chair the party's national election press conferences. </p> <p>Mr Brown yesterday took the unusual step of calling in broadcasters to promise unity and that he would play a full role in the election campaign. That will include an election poster launch with the election coordinator, Alan Milburn, and deputy prime minister, John Prescott, tomorrow. He said he would "not comment on gossip, books, rumours or innuendo in books", adding: "The reason is that we should not be distracted or diverted from the central set of issues facing the nation ahead. </p> <p>"It is very important that we all do what we can in a unified way to ensure the election of a Labour government. That is the only motivation I have. That is my purpose in politics." </p> <p>He could not explain why the account by Sunday Telegraph City editor Robert Peston had come out at this time, but promised he would play his part in Labour's national campaign. </p> <p>The unity call was greeted with scepticism by senior Blairites. One said: "Well, let us hope it is true, but it does not sit very well with what we read in the weekend papers. His people did not just cooperate with this [Peston's] account, they cooperated very closely." </p> </div> </div> <div id="clearfooter"></div> </div> <div id="footer"> <h2>This is a footer</h2> </div> </body> </html>

bạn save thành 1 file HTML để học cách sử dụng CSS và DIV để tạo cột và hàng như table. Thực ra div như là 1 chìa khoá vạn năng vậy. mọi tag html đều có thể thay thế = div nếu ta biết sử dụng nó.

by **duongnhon15** 14/9/2008, 9:37 pm

Trùi ui ngồi dịch nãy giờ ai dè là vụ cướp huhuhu! À bạn hướng dẫn cụ thể hơn dc hem! Chứ nào giờ sài tag

Code:: <table>

nay sang

Code:: <div>

<DIV> hơi lạ với lại còn cái CSS nữa thì mù!@_@

by **HuyLord** 14/9/2008, 9:39 pm

cách thay thế <div> cho <table> đơn giản nhất:

<TABLE><TR>
<TD>
<IMG SRC="ảnh 1.jpg" WIDTH=209 HEIGHT=149 ALT=""></TD>
<TD>
<IMG SRC="ảnh 2.jpg" WIDTH=438 HEIGHT=92 ALT=""></TD>
<TD>
<IMG SRC="ảnh 3.jpg" WIDTH=153 HEIGHT=149 ALT=""></TD>
</TR></TABLE>

chuyển sang <div>:

1.file CSS:

html, body, #wrap {
width: 100%;
margin: 0px;
padding: 0px;
}
#trai {
background-image: url(ảnh 1.jpg);
width: 209px;
height: 149px;
position: relative;
float: left;
}
#giua {
background-image: url(ảnh 2.jpg);
width: 438px;
height: 92px;
position: relative;
float: left;
}
#phai {
background-image: url(ảnh 3.jpg);
width: 153px;
height: 149px;
position: relative;
float: left;
}

trang HTML:

<div id="header">

<div id="trai"></div>
<div id="giua"></div>
<div id="phai"></div>

</div>

by **HuyLord** 14/9/2008, 9:45 pm

Learn CSS Positioning in Ten Steps:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

by **duongnhon15** 14/9/2008, 9:48 pm

Vậy là nguyên 1 cấu trúc

Code:: [table][tr][td][/td][/tr][/table]

Thay = CSS và cả tag

Code:: <div></div>

Theo như bạn nói thì vậy có thề ngắn hơn và tốc độ nhanh hơn gấp đôi! Nhưng thời gian bỏ ra cũng gấp đôi!

by Ga 14/9/2008, 9:51 pm

Trời ơi, code gì mà vỡ hết khung thế này....

by **HuyLord** 14/9/2008, 9:53 pm

mình lấy cho bạn 1 ví dụ nhé:

khi bạn edit 1 thanh row = CSS trong FORUM của bạn nhanh hơn hay edit background từng tag <td> trong <table> trong template nhanh hơn

:happy:

ps: đề nghị duongnhon vô hiệu HTML của bài viết T_T

by **duongnhon15** 14/9/2008, 9:59 pm

Xin lỗi mình edit tắt rùi !_!

by **duongnhon15** 14/9/2008, 10:10 pm

OK mình hiểu rùi cám ơn nha!Forum mình toàn sài giờ edit sợ hư code quá tốt nhất copy ta word rùi làm lại (^-^).
Nhưng khi sử dụng tag

Code:: <table broder="0">

có thể chia ra >3 cột ko thấy đường kẻ được còn tag

Code:: <div>

<DIV> chia ra bằng cách nào với chỉ 3 lệnh là left,right,center?

by **HuyLord** 14/9/2008, 10:32 pm

left, right, center đối với div giống là số hiệu phân biệt div này với div kia thui.(chỉ là 1 cái tên). cột và hàng chủ yếu dựa vào width, height, float

Đây là 1 ví dụ để chia thành 5 cột:

Code:: <head><style> html, body, #wrap { width: 100%; margin: 0px; padding: 0px; } #cot1 { width: 209px; height: 149px; position: relative; float: left; } #cot2 { width: 438px; height: 92px; position: relative; float: left; } #cot3 { width: 153px; height: 149px; position: relative; float: left; } #cot4 { width: 153px; height: 149px; position: relative; float: left; } #cot5 { width: 153px; height: 149px; position: relative; float: left; } }</style> </head> <body> <div id="header"> <div id="cot1">aaaa</div> <div id="cot2">bb</div> <div id="cot3">cc</div> <div id="cot4">đ</div> <div id="cot5">đ</div> </div>

by Sponsored content

học cách sử dụng tag <div> thay cho <table>

học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>

Re: học cách sử dụng tag <div> thay cho <table>