Tại sao không nên dùng Table trong thiết kế website ?

Sau đây là những lý do thiết kế web nên từ bỏ việc sử dụng table và chuyển sang dùng CSS:

   + Table làm gia tăng kích thước của site dẫn đến việc tiêu tốn băng thông không cần thiết.

   + Tiêu tốn thời gian hiệu chỉnh hơn so với việc dùng CSS nếu website có thay đổi.

   + Những người khiếm thị hoặc những người truy cập website bằng DTDD hay PDA sẽ không được hiển thị đúng.

Cuối cùng, tiêu chuẩn web theo W3C hiện tại là sử dụng CSS và tin tốt lành là tất cả các trình duyệt đều hỗ trợ chuẩn này.

Tại sao CSS tốt hơn?

Thiết kế web thiết kế layout với CSS có một số thuận lợi đối với việc SEO Web, điển hình là việc có thể đặt nội dung trước các mã lệnh khác bằng thẻ DIV ( luôn nhớ rằng việc bố trí những  nội dung quan trọng bao gồm từ khóa lên phần đầu của trang web luôn làm gia tăng sự nổi bật của từ khóa ).

Thiết kế web CSS giúp giảm bớt kích thước của trang web và khách tham quan (visitor) không cần phải tải về những dữ liệu mang tính chất trình bày khi xem mỗi trang vì chúng đã được lưu trong bộ nhớ tạm (cache) của trình duyệt.

Những thuận lợi khi dùng CSS

    + Đồng bộ định dạng và dùng chung cho tất cả các trang.

    + Vẫn có thể dùng CSS ngoài mục đích SEO Web.

    + Website sẽ được tổ chức chặt chẽ và dễ bảo trì.

Tóm lại, việc thiết kế web dùng thẻ DIV nói riêng hay CSS nói chung thay thế cho các table lồng nhau sẽ làm giảm đáng kể kích thước trang, tổ chức website được chặt chẽ hơn, dễ bảo trì hơn và gia tăng tính khả dụng.

Một điểm không thuận lợi khi sử dụng CSS là chúng ta phải học về nó, tuy nhiên, điều này không quá khó cho các webmaster.

Cả hai phương pháp, table lồng nhau và CSS đều được quan tâm khi nói về SEO Web. Nhưng chúng ta đã biết, các robot sẽ quét qua toàn bộ mã trong các trang web mà chúng viếng thăm, tuy nhiên, nếu  số lượng mã quá lớn, các robot có thể không tiếp cận trọn vẹn, từ đó, việc bố trí nội dung sao cho các robot có thể tiếp cận là một điều khá quan trọng và điều này chắc chắn việc dùng CSS sẽ làm tốt hơn.

Bây giờ chúng ta sẽ xem qua vài bước thực tế về việc sử dụng thẻ DIV so với table để nâng cao sức hấp dẫn cho các công cụ tìm kiếm ( SEO Web ).

Tối ưu hóa trang web dựa trên table

Khi một trang web được tạo ra khi dùng table, thông thườngng phần nội dung chính sẽ nằm ở ô dưới cùng bên phải của table. Các robot quét 1 trang web theo chiều từ trái sang phải và từ trên xuống dưới sẽ đi qua rất nhiều đoạn mã trước khi tiếp cận được nội dung này. Để tránh điều này, chúng ta phải bố trí nội dung vào những ô đầu tiên nằm ở phần trên của table và cách tốt nhất là đưa nội dung lên trên mã HTML bằng cách dịch chuyển phần menu từ trái sang phải (menu thường được bố trí bên trái).

- See more at: http://lmt.com.vn/home/php/tim-hieu-php/item/717-tai-sao-khong-nen-dung-table-trong-thiet-ke-website.html#sthash.iNXwyeL4.dpuf

Đổ bóng thẻ DIV với CSS3

Thuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính khá
hữu dụng và được sử dụng nhiều trong quá trình viết CSS. Với thuộc tính
này bạn có thể tạo cho các thành phần trong website của mình hiệu ứng
bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được hỗ trợ trên toàn bộ
các trình duyệt hiện tại, thuộc tính này chỉ được hỗ trợ từ Safari 3+,
Firefox 3.1 (Alpha), Chrome, Opera và IE 9+.
#yourdiv {

box-shadow: thamso1, thamso2, thamso3, mau;

}

1. thamso1: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về phía phải của đối tượng.
2. thamso2: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về phía trên của đối tượng.
3. thamso3: Độ rộng hay còn gọi là độ dày của bóng đổ.
4. màu: Màu sắc của phần bóng đổ.

EX:
#yourdiv {

background: #eee;

box-shadow: 5px 5px 5px #666;

-moz-box-shadow: 5px 5px 5px #666;

-webkit-box-shadow: 5px 5px 5px #666;

margin-right: 5px;

padding: 20px;

}

-----

#yourdiv {

background: #eee;

box-shadow: -5px -5px 5px #666;

-moz-box-shadow: -5px -5px 5px #666;

-webkit-box-shadow: -5px -5px 5px #666;

margin-right: 5px;

padding: 20px;

}

box-shadow

box-shadow: -5px -5px 5px #666;

Đổ bóng thẻ DIV với CSS3..

1. Ví dụ:
   Chúng ta thực hiện việc đổ bóng về phía phải – dưới:
   

   	box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; Đối số 1: Qui định đổ bóng theo chiều ngang (đơn vị px). Đối số 2: Qui định đổ bóng theo chiều dọc (đơn vị px). Đối số 3: Độ rộng của bóng đổ (đơn vị px). Đối số 4: Màu của bóng đổ.

Bóng đổ về phía trên – trái: Chỉ cần thực hiện với dấu (-) ở trước là dc kết quả mong muốn:

box-shadow: -5px -5px 5px #666;

-moz-box-shadow: -5px -5px 5px #666;

-webkit-box-shadow: -5px -5px 5px #666;


box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);

-moz-box-shadow:0px 0px 6px rgba(0, 0, 0, 10);

-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);

Tạo góc bo tròn bằng CSS

1. Bo tròn 4 gốc:
   
   -moz-border-radius: 10px;
-webkit-border-radius: 10px;
   
   Code:
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   width:350px;
   background-color:#999999;
   border:1px #0066FF solid;
   height:100px;
   
   ex :
   
   <html>
   <head></head><style type="text/css">
   botron{
   
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   width:350px;
   background-color:#999999;
   border:1px #0066FF solid;
   height:100px;
   
   }
   
   </style>
   <body>
   <div id="botron"></div>
   </body>
   </html>
    
   

2. Bo tròn góc trên trái

-moz-border-radius-topleft:10px;
   -webkit-border-top-left-radius:10px;
   
   
   
   
   
   
3. Bo góc tròn dưới trái   
   
   -moz-border-radius-bottomleft:10px;
   -webkit-border-bottom-left-radius:10px;
   
   
   
   
4. Bo góc tròn trên phải  
   
   -moz-border-radius-topright:10px;
   -webkit-border-top-right-radius:10px;
   
   
   
   
   
5. Bo tròn góc dưới phải   

-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;

                   

               




** at 07/22/2012 10:44 am comment

nhưng sao khi mình viết thẻ không có gợi ý là sao hả bạn. có phải add gì nữa ko

hoadiepdo99 at 07/22/2012 07:54 pm reply

minh vi du cho ban xem do [img]1[/img]

** at 07/22/2012 10:38 am comment

à mình làm đc rồi.cảm ơn nhé

** at 07/22/2012 10:23 am comment

bạn ơi, sao mình ko làm đc bo tròn góc vậy.đây là css mấy vậy bạn

Mở cửa sổ mới

<a href="http://google.com/" onclick="window.open(this.href, 'popupwindow',
  'width=400,height=300,scrollbars,resizable');
  return false;">      

Lợi ích sử dụng css

CSS là gì?
CSS là viết tắt của từ Cascading Style Sheet. CSS là ngôn ngữ định dạng cho các tài liệu được viết bằng HTML, XHTML, ...
CSS dùng để làm gì?
CSS dùng để định dạng các đối tượng trên website như: văn bản, hình ảnh, table, ... Bạn chỉ cần tạo ra một mẫu định dạng cho đối tượng rồi áp dụng chúng cho các đối tượng cùng loại mà không hề phải định dạng lại.

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.
   Theo cơ sở của DOM thì:
   - Table: web browser phải load cả <table>…</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
   - Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
   Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
   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. Thời gian phát triển website nhanh hơnThông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.
3. Dễ kiểm soát thông qua vị trí các thành phần trên web. iệc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn
4. Các trang web tách biệt phần thiết kế và nội dung.
5. Thể hiện 1 phông cách chuyên nghiệp

Màu đường viền , và màu nền cho thẻ

Đặt đoạn css vào the style, ta đặt tên class thẻ< input >: TextBox, <textarea>: select

<style type="text/css">   
  
.TextBox, .select, {
        border: solid 1px #8AAFE1;
        color: #0E4380;
       
        background:-moz-linear-gradient(center top , #FFFFFF, #BBD3F2) repeat scroll 0 0 #FFFFFF;
       width:400px;
}
</style>

Bo tròn 4 góc viền với border-radius

<style type="text/css">

#idbtn{
border-radius:4px;
width:90px;
border:1px #8AAFE1 solid;
}
#idd{

border-radius:4px;
width:300px;
border:1px #8AAFE1 solid;
}
</style>

<table>
    <tr>
        <td>Nhập tên</td>
        <td><input  type="text"  id="idd"/></td>
    </tr>
    <tr>
        <td>Nhập email</td>
        <td><input  type="text"  id="idd"/></td>
    </tr>
    <tr>
        <td>Nhập địa chỉ</td>
        <td><textarea id="idd" rows="5"></textarea></td>
    </tr>
    <tr>
    <td></td>
    <td><input  id="idbtn" type="button" value=" Submit "/>
    </td>
    </tr>
</table>