<!DOCTYPE html>
    <html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
    <head>
<title>10 lý do để học CSS ,DIV thay cho Table</title>
<meta name="description" content="10 lý do để học CSS ,DIV thay cho Table - Savefile - Tin Tức - https&#x3A;&#x002F;&#x002F;mangvn.org&#x002F;savefile&#x002F;Thiet-ke-Web&#x002F;10-ly-do-de-hoc-CSS-DIV-thay-cho-Table-367.html">
<meta name="author" content="MangVN">
<meta name="copyright" content="MangVN [admin@vinades.vn]">
<meta name="generator" content="NukeViet v4.5">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:title" content="10 lý do để học CSS ,DIV thay cho Table">
<meta property="og:type" content="website">
<meta property="og:description" content="Savefile - Tin Tức - https&#x3A;&#x002F;&#x002F;mangvn.org&#x002F;savefile&#x002F;Thiet-ke-Web&#x002F;10-ly-do-de-hoc-CSS-DIV-thay-cho-Table-367.html">
<meta property="og:site_name" content="MangVN">
<meta property="og:url" content="https://mangvn.org/savefile/Thiet-ke-Web/10-ly-do-de-hoc-CSS-DIV-thay-cho-Table-367.html">
<link rel="shortcut icon" href="https://mangvn.org/favicon.ico">
<link rel="canonical" href="https://mangvn.org/savefile/Thiet-ke-Web/10-ly-do-de-hoc-CSS-DIV-thay-cho-Table-367.html">
<link rel="alternate" href="https://mangvn.org/rss/" title="Tin Tức" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Tin-nhanh-Cong-nghe/" title="Tin Tức - Tin nhanh Công nghệ" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Virut-Hacker-Bao-mat/" title="Tin Tức - Virut, Hacker & Bảo mật" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/CNTT/" title="Tin Tức - CNTT" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Vien-thong/" title="Tin Tức - Viễn thông" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/May-tinh/" title="Tin Tức - Máy tính" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Dien-thoai/" title="Tin Tức - Điện thoại" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/May-anh/" title="Tin Tức - Máy ảnh" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Thu-thuat-Phan-mem/" title="Tin Tức - Thủ thuật - Phần mềm" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Phan-mem-Tin-hoc/" title="Tin Tức - Phần mềm Tin học" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Thu-thuat-tin-hoc/" title="Tin Tức - Thủ thuật tin học" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Thiet-ke-Web/" title="Tin Tức - Thiết kế Web" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Kien-thuc-co-ban/" title="Tin Tức - Kiến thức cơ bản" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/PHP-HTML-JavaScript/" title="Tin Tức - PHP, HTML & JavaScript" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Quang-cao-tang-thu-nhap/" title="Tin Tức - Quảng cáo tăng thu nhập" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Tao-Web-bang-NukeViet/" title="Tin Tức - Tạo Web NukeViet" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Ban-tin-an-ninh/" title="Tin Tức - Bản tin an ninh" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Tin-tuc-NukeViet/" title="Tin Tức - Tin tức NukeViet" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Nhan-vat-su-kien/" title="Tin Tức - Nhân vật & sự kiện" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Huong-dan-su-dung/" title="Tin Tức - Hướng dẫn sử dụng" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/He-thong-NukeViet-20/" title="Tin Tức - Hệ thống NukeViet 2.0" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/He-thong-NukeViet-10/" title="Tin Tức - Hệ thống NukeViet 1.0" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/NukeViet-co-ban/" title="Tin Tức - NukeViet cơ bản" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Web-Internet/" title="Tin Tức - Web & Internet" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Thu-thuat-Internet/" title="Tin Tức - Thủ thuật Internet" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Dich-vu-tien-ich/" title="Tin Tức - Dịch vụ & tiện ích" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Website-nen-vao/" title="Tin Tức - Website nên vào" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Thong-tin-khuyen-mai/" title="Tin Tức - Thông tin khuyến mại" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/thuong-mai-dien-tu/" title="Tin Tức - Thương mại điện tử" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Hau-truong/" title="Tin Tức - Hậu trường" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Blog-Admin/" title="Tin Tức - Blog Admin" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Cong-tac-vien/" title="Tin Tức - Cộng tác viên" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Chuyen-cong-nghe/" title="Tin Tức - Chuyện công nghệ" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Chuyen-kinh-doanh/" title="Tin Tức - Chuyện kinh doanh" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Cuoc-song-quanh-ta/" title="Tin Tức - Cuộc sống quanh ta" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Cuoi-thu-gian/" title="Tin Tức - Cười thư giãn" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Lang-nghe-va-suy-ngam/" title="Tin Tức - Lắng nghe và suy ngẫm" type="application/rss+xml">
<link rel="alternate" href="https://mangvn.org/rss/Kien-thuc-Song/" title="Tin Tức - Kiến thức Sống" type="application/rss+xml">
<link rel="preload" as="style" href="https://mangvn.org/assets/css/font-awesome.min.css" type="text/css">
<link rel="preload" as="style" href="https://mangvn.org/themes/default/css/bootstrap.min.css" type="text/css">
<link rel="preload" as="style" href="https://mangvn.org/themes/default/css/style.css" type="text/css">
<link rel="preload" as="style" href="https://mangvn.org/themes/default/css/style.responsive.css" type="text/css">
<link rel="preload" as="style" href="https://mangvn.org/themes/default/css/news.css" type="text/css">
<link rel="preload" as="style" href="https://mangvn.org/themes/default/css/custom.css" type="text/css">
<link rel="preload" as="script" href="https://mangvn.org/assets/js/jquery/jquery.min.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/assets/js/language/vi.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/assets/js/DOMPurify/purify3.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/assets/js/global.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/assets/js/site.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/themes/default/js/news.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/themes/default/js/main.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/themes/default/js/custom.js" type="text/javascript">
<link rel="preload" as="script" href="https://mangvn.org/themes/default/js/bootstrap.min.js" type="text/javascript">
<link rel="stylesheet" href="https://mangvn.org/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://mangvn.org/themes/default/css/bootstrap.min.css">
<link rel="stylesheet" href="https://mangvn.org/themes/default/css/style.css">
<link rel="stylesheet" href="https://mangvn.org/themes/default/css/style.responsive.css">
<link rel="StyleSheet" href="https://mangvn.org/themes/default/css/news.css">
<link rel="stylesheet" href="https://mangvn.org/themes/default/css/custom.css">
<style type="text/css">
	body{background: #fff;}
</style>
    </head>
    <body>
<div id="print">
	<div id="hd_print">
		<h2 class="pull-left">MangVN</h2>
		<p class="pull-right"><a title="MangVN" href="https://mangvn.org/">https://mangvn.org</a></p>
	</div>
	<div class="clear"></div>
	<hr />
	<div id="content">
		<h1>10 lý do để học CSS ,DIV thay cho Table</h1>
		<ul class="list-inline">
			<li>Thứ ba - 25/12/2007 10:34</li>
			<li class="hidden-print txtrequired"><em class="fa fa-print">&nbsp;</em><a title="In ra" href="javascript:;" onclick="window.print()">In ra</a></li>
			<li class="hidden-print txtrequired"><em class="fa fa-power-off">&nbsp;</em><a title="Đóng cửa sổ này" href="javascript:;" onclick="window.close()">Đóng cửa sổ này</a></li>
		</ul>
		<div class="clear"></div>
		<div id="hometext">
						<div class="pull-left imghome">
				<img alt="10 lý do để học CSS ,DIV thay cho Table" src="https://mangvn.org/assets/news/2007_12/1198611263.nv.gif" width="100" class="img-thumbnail" />
			</div>
			Xin giới thiệu đến bạn 10 lý do, những tiện ích cơ bản để học CSS, DIV thay cho Table khi xây dựng Website của bạn
		</div>
		<div id="bodytext" class="clearfix">
			<span id="tdStoryBody" class="content">

  <p align="justify"><strong>1. Xây dựng một nền tảng để thay thế </strong>các

phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C)

tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các

dạng "hack" thẻ HTML để tạo hiệu quả cho website Với tôi, CSS mang lại

hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản.

Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp

muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của

coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ

thuộc vào coder. </p>

  <p align="justify"><strong>2. Tăng tốc độ website. 

      <br /></strong>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. 

    <br />Theo cơ sở của DOM thì:

    <br />- Table: web browser phải load cả &lt;table&gt;...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.

    <br />- Div: chỉ cần load &lt;div&gt;..</div> là đã có thể dựng được DOM tree và hiển thị. 

    <br />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.

    <br />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, <strong>nhưng</strong> CSS được load 1 lần, sau đó được cache trên client

    <br /></p>

  <p align="justify"><strong>3.Thời gian phát triển website nhanh hơn

      <br /></strong>Thô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. </p>

  <p align="justify"><strong>4. Typography thể hiện ngầu hơn

      <br /></strong>CSS

có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể

kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ -

tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và

nhiều nhiều hơn thế. </p>

  <p align="justify"><strong>5. Dễ viết

      <br /></strong>Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.</p>

  <p align="justify"><strong>6.Khả năng phát triển. 

      <br /></strong>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 -&gt; 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. </p>

  <p align="justify"><strong>7. Thiết kế dành cho in ấn cũng đẹp như dành cho web</strong>. CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint </p>

  <p align="justify"><strong>8. Dễ kiểm soát</strong> 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.</p>

  <p align="justify"><strong>9</strong>. <strong>Các trang web tách biệt phần thiết kế và nội dung.</strong>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. </p>

  <p align="justify"><strong>10.</strong><strong>Cải thiện vị trí trong các website tìm kiếm.</strong>Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag

định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm

index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của

website. 

    <br />

    <br />(Nguồn mauthietke; &nbsp;<a target="_blank" href="http://www.sessions.edu/faculty/interviews/Schmitt_ReasonsCSS.asp"><u><span style="color: rgb(128, 0, 128);">http://www.sessions.edu/</span></u></a>)</p></span>
		</div>
				<div id="author">
						<p>
				<strong>Nguồn tin:</strong>
				3CdotCom
			</p>
		</div>
	</div>
	<div id="footer" class="clearfix">
		<div id="url">
			<strong>URL của bản tin này: </strong><a href="https://mangvn.org/savefile/Thiet-ke-Web/10-ly-do-de-hoc-CSS-DIV-thay-cho-Table-367.html" title="10 lý do để học CSS ,DIV thay cho Table">https://mangvn.org/savefile/Thiet-ke-Web/10-ly-do-de-hoc-CSS-DIV-thay-cho-Table-367.html</a>

		</div>
		<div class="clear"></div>
		<div class="copyright">
			&copy; MangVN
		</div>
		<div id="contact">
			<a href="mailto:admin@vinades.vn">admin@vinades.vn</a>
		</div>
	</div>
</div>
        <div id="timeoutsess" class="chromeframe">
            Bạn đã không sử dụng Site, <a onclick="timeoutsesscancel();" href="https://mangvn.org/#">Bấm vào đây để duy trì trạng thái đăng nhập</a>. Thời gian chờ: <span id="secField"> 60 </span> giây
        </div>
        <div id="openidResult" class="nv-alert" style="display:none"></div>
        <div id="openidBt" data-result="" data-redirect=""></div>
<div id="run_cronjobs" style="visibility:hidden;display:none;"><img alt="cron" src="/index.php?second=cronjobs&amp;p=x8P760Zi" width="1" height="1" /></div>
<script src="https://mangvn.org/assets/js/jquery/jquery.min.js"></script>
<script>var nv_base_siteurl="/",nv_lang_data="vi",nv_lang_interface="vi",nv_name_variable="nv",nv_fc_variable="op",nv_lang_variable="language",nv_module_name="news",nv_func_name="savefile",nv_is_user=0, nv_my_ofs=-4,nv_my_abbr="EDT",nv_cookie_prefix="nv4c_b41EI",nv_check_pass_mstime=1738000,nv_area_admin=0,nv_safemode=0,theme_responsive=1,nv_recaptcha_ver=2,nv_recaptcha_sitekey="6LfaEikpAAAAAB7BnT8L5ijh2CCG0esJquuWj9ZJ",nv_recaptcha_type="image",XSSsanitize=1;</script>
<script src="https://mangvn.org/assets/js/language/vi.js"></script>
<script src="https://mangvn.org/assets/js/DOMPurify/purify3.js"></script>
<script src="https://mangvn.org/assets/js/global.js"></script>
<script src="https://mangvn.org/assets/js/site.js"></script>
<script src="https://mangvn.org/themes/default/js/news.js"></script>
<script src="https://mangvn.org/themes/default/js/main.js"></script>
<script src="https://mangvn.org/themes/default/js/custom.js"></script>
<script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Organization",
            "url": "https://mangvn.org",
            "logo": "https://mangvn.org/uploads/logo-mangvn.png"
        }
        </script>
<script src="https://mangvn.org/themes/default/js/bootstrap.min.js"></script>
</body>
</html>