<?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>艾德的部落格天空 &#187; Table</title>
	<atom:link href="http://edblog.net/archives/tag/table/feed" rel="self" type="application/rss+xml" />
	<link>http://edblog.net</link>
	<description>亂寫、亂拍、亂來。 --- 持續亂改更新中 ---</description>
	<lastBuildDate>Mon, 05 Dec 2011 08:03:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>CSS分享-骨架篇</title>
		<link>http://edblog.net/archives/2262</link>
		<comments>http://edblog.net/archives/2262#comments</comments>
		<pubDate>Wed, 03 Feb 2010 06:19:26 +0000</pubDate>
		<dc:creator>Eduardo</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[DIV]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Table]]></category>

		<guid isPermaLink="false">http://edblog.net/?p=2262</guid>
		<description><![CDATA[CSS一直都是很奇妙的技術，我相信現在還有許多網頁設計師不知道CSS是有多麼的美妙、美味。table排版是早期的做法，由於table是以巢狀的方式包覆，如果一層一層的table包來包去，包到最後可能連設計師自己都不知道再包啥鬼的。小弟艾德我就看過table包table又包table，然後裡面還有tabl(泣)，包了不知道幾層，也不知道如何去改，最後我砍掉重做頁面反而還更快。 為什麼table切版不太好？如果主機及使用者的電腦都不錯，頻寬流量也夠大，可能感覺不到table包來包去的可怕性；若使用者頻寬小、電腦效能差，那麼流覽網站可能就囧大了，開個幾十秒才開得出網頁，耐心可能早已被空白畫面給耗光了。因為表格必須讀取到&#60;/table&#62;之後才會顯示，所以巢狀包覆越多越雜，頁面loading時間則越久，對於使用者端負擔更大。曾經看過某政府機關的資料報表，是以網頁table方是一直重複呈現，看看html原始碼大概有一萬多行以上，使用IE開啟的時間約3分多鐘，真是太可怕了！ 雖然說用CSS+DIV的方式來寫網頁對於網站絕對是有益的，但是花費的時間相對也較多；如果是製作活動頁這類型的網頁，那麼倒是覺得Photoshop切一切後輸出成網頁反而比較省時省工，因為活動結束後網頁就撤掉了，也沒用。 以蓋房子的方式來看，HTML就是網站的骨架，每一吋骨架都需要細膩的打造，穩固的根基可以讓網站每次改版都可以降低花費的時間。骨架不能寫死，所以需要透過CSS來設定骨架的大小、骨架外皮的顏色及樣式。一個網站的架構如果做得好，透過更換CSS則可以將網站的整個風格更換，特別是全球一整年有許多節慶，像是中華文化的農曆過年、情人節、萬聖節及聖誕節等重要節慶，如果有這樣的需求，CSS更顯得重要。(請愛用CSS)<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Styleneat – 讓CSS更有組織架構" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F1921&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8079004.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Styleneat – 讓CSS更有組織架構</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS資源分享與近期動向" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F763&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS資源分享與近期動向</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WordPress 架設後的思考" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F542&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WordPress 架設後的思考</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Tab Generator 按鈕生成器" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F991&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8079013.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Tab Generator 按鈕生成器</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>CSS一直都是很奇妙的技術，我相信現在還有許多網頁設計師不知道CSS是有多麼的美妙、美味。table排版是早期的做法，由於table是以巢狀的方式包覆，如果一層一層的table包來包去，包到最後可能連設計師自己都不知道再包啥鬼的。小弟艾德我就看過table包table又包table，然後裡面還有tabl(泣)，包了不知道幾層，也不知道如何去改，最後我砍掉重做頁面反而還更快。</p>
<p><img class="size-full wp-image-2268 alignleft" title="3column" src="http://edblog.net/wp-content/uploads/2010/02/3column.jpg" alt="" width="317" height="283" />為什麼table切版不太好？如果主機及使用者的電腦都不錯，頻寬流量也夠大，可能感覺不到table包來包去的可怕性；若使用者頻寬小、電腦效能差，那麼流覽網站可能就囧大了，開個幾十秒才開得出網頁，耐心可能早已被空白畫面給耗光了。因為表格必須讀取到&lt;/table&gt;之後才會顯示，所以巢狀包覆越多越雜，頁面loading時間則越久，對於使用者端負擔更大。曾經看過某政府機關的資料報表，是以網頁table方是一直重複呈現，看看html原始碼大概有一萬多行以上，使用IE開啟的時間約3分多鐘，真是太可怕了！</p>
<p>雖然說用CSS+DIV的方式來寫網頁對於網站絕對是有益的，但是花費的時間相對也較多；如果是製作活動頁這類型的網頁，那麼倒是覺得Photoshop切一切後輸出成網頁反而比較省時省工，因為活動結束後網頁就撤掉了，也沒用。</p>
<p>以蓋房子的方式來看，HTML就是網站的骨架，每一吋骨架都需要細膩的打造，穩固的根基可以讓網站每次改版都可以降低花費的時間。骨架不能寫死，所以需要透過CSS來設定骨架的大小、骨架外皮的顏色及樣式。一個網站的架構如果做得好，透過更換CSS則可以將網站的整個風格更換，特別是全球一整年有許多節慶，像是中華文化的農曆過年、情人節、萬聖節及聖誕節等重要節慶，如果有這樣的需求，CSS更顯得重要。(請愛用CSS)</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Styleneat – 讓CSS更有組織架構" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F1921&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8079004.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Styleneat – 讓CSS更有組織架構</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="CSS資源分享與近期動向" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F763&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">CSS資源分享與近期動向</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WordPress 架設後的思考" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F542&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WordPress 架設後的思考</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Tab Generator 按鈕生成器" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fedblog.net%2Farchives%2F991&from=http%3A%2F%2Fedblog.net%2Farchives%2F2262">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8079013.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Tab Generator 按鈕生成器</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table><p><script type="text/javascript"><!--
google_ad_client = "pub-0799927170161891";
/* 336x280, ??? 2009/4/8 */
google_ad_slot = "0733953819";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p> ]]></content:encoded>
			<wfw:commentRss>http://edblog.net/archives/2262/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

