<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>เรียน Mac, Web design, Graphic design, Final cut &#187; tableless-layout</title>
	<atom:link href="http://www.ischool.in.th/blog/tag/tableless-layout/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ischool.in.th</link>
	<description>Ignite Inspiration</description>
	<lastBuildDate>Tue, 22 Nov 2011 04:41:37 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Tableless Layout คืออะไรกันแน่ มาเรียนทำ Web แบบนี้กัน</title>
		<link>http://www.ischool.in.th/blog/2010/03/tableless-layout/</link>
		<comments>http://www.ischool.in.th/blog/2010/03/tableless-layout/#comments</comments>
		<pubDate>Wed, 03 Mar 2010 03:26:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS Training]]></category>
		<category><![CDATA[Cool Design]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[tableless-layout]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.ischool.in.th/?p=2321</guid>
		<description><![CDATA[การสร้างเว็บไซน์ โดยใช้ table ให้น้อยที่สุดหรือไม่ใช้เลย สำหรับเทคนิค Tableless นี้ บางคนก็เรียกว่า Tableless layout หรือไม่ก็ CSS Layout เพราะเราจะใช้ CSS เข้ามาแสดงบทบาทแทนที่ตารางในการจัดการโครงสร้างเว็บไซต์]]></description>
			<content:encoded><![CDATA[<p><strong>Tableless Layout</strong> คือ การสร้างเว็บไซน์ โดยใช้ table ให้น้อยที่สุดหรือไม่ใช้เลย สำหรับเทคนิค Tableless นี้ บางคนก็เรียกว่า <strong>Tableless layout </strong>หรือไม่ก็<strong> CSS Layout</strong> เพราะเราจะใช้ <strong>CSS</strong> เข้ามาแสดงบทบาทแทนที่ตารางในการจัดการโครงสร้างเว็บไซต์ โดย CSS นั้นจะทำการควบคุมแท็กต่างๆ เช่น <strong>&lt;div&gt; หรือ &lt;span&gt; </strong> ว่าควรจะมีขนาดเท่าใด ตำแหน่งอยู่ตรงไหน ใช้รูปแบบอักษรอะไร ขนาดเท่าไร ใช้สีอย่างไร ฯลฯ ดังนั้นการใช้เทคนิค Tableless ในการพัฒนาเว็บไซต์นี้จะได้ผลลัพธ์ที่สำคัญมากประการหนึ่งคือ การแยกแยะส่วนข้อมูล และส่วนที่ใช้ควบคุมการแสดงผลออกจากกัน เมื่อต้องการแก้ไขส่วนของการแสดงผลเราก็เพียงเข้าไปแก้ในส่วนที่ใช้ควบคุม ซึ่งในที่นี้ก็คือ CSS ที่เป็นตัว mock up layout ในทุกๆหน้าเท่านั้นนั้นเอง</p>
<h2>แล้วอย่างนี้ควรใช้ Table เมื่อไหรดี</h2>
<p>เราจะให้ table ก็ต่อเมื่อ เนื้อหาในเว็บไซน์มีการแสดงผลแบบเป็นแถว เป็นคอลัมน์ แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel การใช้ table ก็ยังสะดวกกว่าการใช้ div อย่างมาก</p>
<h2>ตัวอย่างการเปรียบเทียบการการเขียนโครงสร้างแบบ Table Layout และ Tableless Layout</h2>
<p><img class="aligncenter size-full wp-image-2327" title="plan-css" src="http://www.ischool.in.th/wp-content/uploads/2010/03/plan-css.jpg" alt="plan-css" width="300" height="225" /></p>
<h3><strong>การเขียนโครงสร้างแบบ Table</strong></h3>
<p><span style="color: #333;">&lt;table width=”100%” &gt;<br />
&lt;tr&gt;&lt;td height=”86″&gt;Banner + Logo&lt;/td&gt;&lt;/tr&gt;<br />
&lt;tr&gt;&lt;td height=”71″&gt;Menu&lt;/td&gt;&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;table width=”100%”&gt;<br />
&lt;tr&gt;<br />
&lt;td height=”152″&gt;Sidebar&lt;/td&gt;<br />
&lt;td&gt;Content&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</span></p>
<h3><strong>การเขียนโครงสร้างแบบ Tableless</strong></h3>
<p><span style="color: #333;">&lt;div&gt;<br />
&lt;div&gt;Banner + logo&lt;/div&gt;<br />
&lt;div&gt;Menu&lt;/div&gt;<br />
&lt;div&gt;Sidebar&lt;/div&gt;<br />
&lt;div&gt;Content&lt;/div&gt;<br />
&lt;/div&gt;</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ischool.in.th/blog/2010/03/tableless-layout/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

