<?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>thought snippets &#187; tableless</title>
	<atom:link href="http://blog.u-blue.com/tag/tableless/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.u-blue.com</link>
	<description>a little bit of everything</description>
	<lastBuildDate>Tue, 08 Nov 2011 03:42:46 +0000</lastBuildDate>
	<language>TH</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>เว็บไซต์&#8230;ไม่ใส่ตาราง</title>
		<link>http://blog.u-blue.com/2008/11/06/tableless-website/</link>
		<comments>http://blog.u-blue.com/2008/11/06/tableless-website/#comments</comments>
		<pubDate>Thu, 06 Nov 2008 03:15:04 +0000</pubDate>
		<dc:creator>nice</dc:creator>
				<category><![CDATA[webdev]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[tableless]]></category>

		<guid isPermaLink="false">http://u-blue.com/blog/?p=1</guid>
		<description><![CDATA[มันเริ่มจากการอ่านเว็บไปเรื่อยๆและเจอกระแส tableless html layout มานาน แต่ก็บอกตัวเองว่าไม่มีเวลาสักทีที่จะเปลี่ยนสไตล์การเขียนเว็บของตัวเองจาก &#8220;old school html&#8221; ที่เน้นใช้ตารางในการจัดหน้า html มาเป็น css based layout ที่ใช้ div และ css เป็นหลัก บอกว่าไม่มีเวลาจริงๆแล้วก็เป็นข้ออ้างนั่นแหละ เพราะการเปลี่ยนจากสิ่งที่คุ้นเคยมาใช้อะไรใหม่ๆมันต้องเรียนรู้อะไรมากมาย ทำให้ไม่อยากจะเปลี่ยนแปลงอะไรในบางจังหวะของชีวิตที่ยึดเอาความขี้เกียจเป็นที่ตั้ง จนกระทั่งได้จังหวะก็เริ่มมาศึกษาจริงๆจัง กว่าจะเขียนได้คล่องก็ไม่ง่ายแต่ก็ไม่ได้ยากมากมายอย่างที่คิดไว้ มันคืออะไรบ้างนะ? &#8220;table based html&#8221; หรือที่เรียกกันว่า old school html table ก็คือการจัดหน้าเว็บโดยใช้ html table หรือ ตาราง เป็นหลัก ซึ่งเป็นการเขียนแบบที่ทำกันมานานแล้ว จะจัดหน้าหรือกำหนดอะไรก็มันจะใส่ลงไปในโค้ทส่วนของตารางเลย &#8220;css based layout&#8221;คือการใช้ cascading style sheet เข้ามาช่วยในการกำหนด layout และใช้ตารางเฉพาะส่วนที่เนื้อหามันเป็นตารางจริงๆ เช่น ตารางเปรียบเทียบ แมทริกซ์ต่างๆ โดยมักจะแยกไฟล์ css ]]></description>
			<content:encoded><![CDATA[<p>มันเริ่มจากการอ่านเว็บไปเรื่อยๆและเจอกระแส tableless html layout มานาน แต่ก็บอกตัวเองว่าไม่มีเวลาสักทีที่จะเปลี่ยนสไตล์การเขียนเว็บของตัวเองจาก &#8220;old school html&#8221; ที่เน้นใช้ตารางในการจัดหน้า html มาเป็น css based layout ที่ใช้ div และ css เป็นหลัก บอกว่าไม่มีเวลาจริงๆแล้วก็เป็นข้ออ้างนั่นแหละ เพราะการเปลี่ยนจากสิ่งที่คุ้นเคยมาใช้อะไรใหม่ๆมันต้องเรียนรู้อะไรมากมาย ทำให้ไม่อยากจะเปลี่ยนแปลงอะไรในบางจังหวะของชีวิตที่ยึดเอาความขี้เกียจเป็นที่ตั้ง จนกระทั่งได้จังหวะก็เริ่มมาศึกษาจริงๆจัง กว่าจะเขียนได้คล่องก็ไม่ง่ายแต่ก็ไม่ได้ยากมากมายอย่างที่คิดไว้</p>
<p><span id="more-1"></span></p>
<h1>มันคืออะไรบ้างนะ?</h1>
<blockquote><p><strong>&#8220;table based html&#8221;</strong> หรือที่เรียกกันว่า old school html table ก็คือการจัดหน้าเว็บโดยใช้ html table หรือ ตาราง เป็นหลัก ซึ่งเป็นการเขียนแบบที่ทำกันมานานแล้ว จะจัดหน้าหรือกำหนดอะไรก็มันจะใส่ลงไปในโค้ทส่วนของตารางเลย</p></blockquote>
<blockquote><p><strong>&#8220;css based layout&#8221;</strong>คือการใช้ cascading style sheet เข้ามาช่วยในการกำหนด layout และใช้ตารางเฉพาะส่วนที่เนื้อหามันเป็นตารางจริงๆ เช่น ตารางเปรียบเทียบ แมทริกซ์ต่างๆ โดยมักจะแยกไฟล์ css ออกจากโค้ทส่วนของเนื้อหาเว็บไซต์</p></blockquote>
<h1>ดีกว่ายังไง?</h1>
<ol>
<li><strong>โหลดเร็วกว่า</strong> จากเดิมที่ในไฟล์ html จะต้องมีการกำหนดรูปแบบการแสดงผลที่ตาราง แต่หากเขียนแบบ css จะกำหนดการแสดงผลไว้ในไฟล์ css แยก ทำให้สามารถใช้ร่วมกันได้ในหลายๆหน้า และไฟล์ดังกล่าวจะถูกเก็บไว้ใน catch ของบราวเซอร์ และไม่ถูกโหลดซ้ำๆหลายๆหน ทำให้ผู้ใช้งานเปิดเว็บได้เร็วขึ้นและประหยัดแบนวิธของเซิฟเวอร์ได้อีกด้วย</li>
<li><strong>แก้ไขรูปแบบการแสดงผลง่าย</strong> หากต้องการแก้ก็ไม่ต้องไปนั่งแก้ทั้งเว็บ เพียงแค่แก้ในไฟล์ css ก็จะส่งผลไปถึงทุกๆหน้า</li>
<li><strong>เกิดผลดีต่อ search engine และโปรแกรมช่วยเหลือคนพิการ(ประเภท screen reader) </strong>ทำให้อ่านเนื้อหาในเว็บเราได้ดีขึ้น การใช้ css จะลดโค้ทส่วนการแสดงผลออกไปจากหน้า html ทำให้โปรแกรมเข้าถึงเนื้อหาจริงได้ง่ายขึ้น อีกทั้งการใช้ html tag ที่มีความหมาย(sementic) เช่น h1, h2, p ทำให้โปรแกรมเข้าใจเนื้อหาในเว็บเรามากขึ้น และเว็บมาสเตอร์สามารถกำหนดได้ว่าอยากให้โปรแกรมมองว่าส่วนไหนสำคัญ</li>
<li><strong>search engine friendly</strong> ยกตัวอย่างเช่น หากเราออกแบบเว็บให้มีเมนูย่อยด้านซ้ายและเนื้อหาอยู่ด้านขวาและเราต้องการเน้นเนื้อหาด้านขวามากกว่าซ้าย หากใช้ตาราง โค้ทของเราจะมีเนื้อหาส่วนเมนูย่อยด้านซ้ายขึ้นมาก่อน และด้านขวามาทีหลัง ทำให้ search engine ให้ความสำคัญกับเนื้อหาที่มาก่อนมากกว่า แต่หากใช้ css เราสามารถเขียนเนื้อหาด้านขวาให้มาก่อน และด้านซ้ายมาหลัง จากนั้นจึงค่อยจัดการแสดงผลให้อยู่ในตำแหน่งที่ต้องการได้ โดยรักษาลำดับความสำคัญของเนื้อหาที่มีต่อ search engine ไว้ได้ครบถ้วน</li>
<li><strong>out of the box</strong> หากใช้ css  layout จนคล่องแล้วจะพบว่ามีวิธีการเขียนมากมายที่ทำให้สามารถเขียนเว็บไซต์ได้โดยไม่ถูกจำกัดโดยระบบของตาราง เช่น การซ้อนวัตถุต่างๆเป็นชั้นๆที่ตำแหน่งเดียวกันได้ การกำหนดให้วัตถุใดๆอยู่กับที่ก็ทำได้ และการจัดรูปแบบอื่นๆอีกมากมายตามแต่จะจินตนาการได้เลยทีเดียว</li>
<li><strong>อื่นๆอีกมากมาย</strong> เช่น การที่โค้ท html ไม่รก ก็ทำให้ใช้งานคู่กับการเขียนภาษาโปรแกรมเช่น php แทรกลงไปได้ง่ายขึ้น ไม่ต้องสู้รบกับ tr th td เป็นต้น</li>
</ol>
<h1>มันยากกว่าใช้ table?</h1>
<p>สำหรับคนที่เคยเขียนเว็บโดยใช้ table เป็นหลัก มันก็จะเกิดความยากขึ้นแน่ๆ เพราะต้องมานั่งเรียนรู้ เปลี่ยนวิธีคิด วิธีขึ้นโครงของเว็บซะใหม่ แต่หากตั้งใจจริงมันจะยากแค่ชั่วคราวเท่านั้น หลังจากฝึกใช้จนคุ้นเคยแล้วก็จะพบว่าบางอย่างยังจะทำได้ง่ายกว่าใช้ html table เสียอีก แต่ก็จริงอยู่ว่าบางส่วนจะพบว่าใช้ html table จะทำได้ง่ายกว่า และเสียเวลามากหากใช้ css เช่น การทำฟอร์มกรอกข้อมูล ซึ่งถ้าเจอปัญหาตรงนี้ จะกลับไปใช้ตารางบ้างก็คงไม่ว่าอะไรกัน</p>
<h1>คุ้มหรือไม่?</h1>
<p>ต้องยอมรับว่าการใช้ css ทำให้ทำเว็บได้ลำบากมากกว่าใช้ html table โดยเฉพาะช่วงแรกๆ คือใช้เวลามากกว่า และต้องวางแผนรูปแบบมาเป็นอย่างดี ไม่นับเวลาที่เสียไปในการเรียนรู้กว่าจะใช้ได้จนคล่อง จนบางครั้งหากมีงานเร่งรีบก็ต้องหันกลับไปใช้ตารางบ้างเหมือนกัน อีกทั้งหากต้องทำงานร่วมกับผู้อื่นก็อาจจะไม่ใช่ทุกคนที่สามารถใช้ css ได้อย่างคล่องแคล่ว ฉะนั้นไม่ใช่ว่าจะใช้ css มันไปทุกสถานการณ์โดยไม่ดูตาม้าตาเรือ ของทุกอย่างมีข้อดีและเสียของมันอยู่ การใช้ระบบตารางก็ไม่ใช่จะเป็นความผิดอาญาอะไร เพราะงั้น เลือกใช้เครื่องมือให้ถูกกับงานก็คงเป็นทางออกที่ดีที่สุดนั่นเอง</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.u-blue.com/2008/11/06/tableless-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

