<?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>omiga &#187; 表格</title>
	<atom:link href="http://omiga.org/blog/archives/tag/%e8%a1%a8%e6%a0%bc/feed" rel="self" type="application/rss+xml" />
	<link>http://omiga.org/blog</link>
	<description>简单就好</description>
	<lastBuildDate>Thu, 26 Apr 2012 04:18:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>标准化你的表格</title>
		<link>http://omiga.org/blog/archives/35</link>
		<comments>http://omiga.org/blog/archives/35#comments</comments>
		<pubDate>Fri, 23 Nov 2007 21:44:34 +0000</pubDate>
		<dc:creator>omiga</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[table]]></category>
		<category><![CDATA[web标准]]></category>
		<category><![CDATA[表格]]></category>

		<guid isPermaLink="false">http://omiga.org/?p=35</guid>
		<description><![CDATA[“div+css”极度盛行的今天，很多人已经忘了在HTML里还有table呃～，也有很多人记得只是不愿再想起。单纯为了div而完全抛弃table的做法绝对是不可取的。table没什么错，初衷就是用来显示数据的，错在很多人在那个年代把它用在了布局上，而且用滥了。 在table广泛用于布局的时代，或许很多人眼中table就是，其实不然，即使早在HTML4之前，至少就有了， 标签，HTML4开始引入&#60;thead&#62;,&#60;tbody&#62;,&#60;tfoot&#62;,&#60;col&#62;,&#60;colgroup&#62;标签。微软更是为table完美的数据表现添加了大量的扩展属性。当然了，如果表格单纯用于页面布局，这些标签或者属性基本是一无是处。但是当table回归它本来地位时，这一切变得重要。 &#60;caption&#62;：用于指定可选的表格外加标题，内容通常显示在表格上方或者下方以表明表格的内容，默认居中显示。 &#60;th&#62;：设置表格的标题，浏览器以不同的样式显示标题，一般将标题居中，并以黑体显示。 &#60;thead&#62;：其内容组成表格的标题，它可以包含&#60;tr&#62;,&#60;th&#62; 、 和&#60;td&#62; 。除了便于组织和应用样式外，为这些内容分组的优点在于这样可能在多个页面中重复某些元素，主要体现在打印表格中。 &#60;tfoot&#62;：与&#60;thead&#62;标签类似，其用于在表格中创建一个页脚，亦可在多页上出现。 &#60;tbody&#62;：指定表格正文，并可以出现多次（&#60;thead&#62; 、&#60;tfoot&#62;只可在表格中出现一次）。 熟悉各标签相应功能后，那么构建一个合理的用于呈现数据的表格，就变得很简单了。各尽其用，最大限度地表示出数据间的关系，这才是table真正用途之所在。那么我们可以构建如下完美数据表格。 wondger&#8217;s blog Category ID Category Name Description 1 简单生活 我的简单生活 2 web相关 web应用，业界新闻 3 设计制作 web标准，web设计 查看代码效果 合理的数据表格呈现，远不止构建一个合理的代码结构，更要在数据的视觉表现上做一定的设计。比如标题与正文内容的区分，数据的显示方式，对齐原则等，设计者大可自由发挥。 BTW:啥是标准啊？我相信很多人回答不上来。尽管很多人都自称是css高手，div+css高手，在一个web标准的群里问，没人吭声，都是潜水王，都忘了这个世界除了70%的水，还有30%的空气。我也不知道啥是标准，绝大多数用户也不知道。但是我知道大谈标准化的今天，标准化并不是都是为了用户而标准化，相反更多地是在为计算机标准化。计算机笨，只认识代码，管他什么结构，表现，seo，大部分是为计算机做的。国外用人工搜索引擎工作时，不会去查看源代码。个人对标准化在HTML这部分的理解是，用最合理的标签和结构去呈现最适合的内容，纯属个人观点！意见相左者就当我在YY～··· © omiga for omiga, 2007. &#124; Permalink &#124; 3 comments &#124; Add to del.icio.us Post tags: HTML, table, web标准, 表格]]></description>
			<content:encoded><![CDATA[<p>“div+css”极度盛行的今天，很多人已经忘了在HTML里还有table呃～，也有很多人记得只是不愿再想起。单纯为了div而完全抛弃table的做法绝对是不可取的。table没什么错，初衷就是用来显示数据的，错在很多人在那个年代把它用在了布局上，而且用滥了。</p>
<p>在table广泛用于布局的时代，或许很多人眼中table就是，其实不然，即使早在HTML4之前，至少就有了， 标签，HTML4开始引入&lt;thead&gt;,&lt;tbody&gt;,&lt;tfoot&gt;,&lt;col&gt;,&lt;colgroup&gt;标签。微软更是为table完美的数据表现添加了大量的扩展属性。当然了，如果表格单纯用于页面布局，这些标签或者属性基本是一无是处。但是当table回归它本来地位时，这一切变得重要。</p>
<p>&lt;caption&gt;：用于指定可选的表格外加标题，内容通常显示在表格上方或者下方以表明表格的内容，默认居中显示。</p>
<p>&lt;th&gt;：设置表格的标题，浏览器以不同的样式显示标题，一般将标题居中，并以黑体显示。</p>
<p>&lt;thead&gt;：其内容组成表格的标题，它可以包含&lt;tr&gt;,&lt;th&gt;<br />
、 和&lt;td&gt; 。除了便于组织和应用样式外，为这些内容分组的优点在于这样可能在多个页面中重复某些元素，主要体现在打印表格中。</p>
<p>&lt;tfoot&gt;：与&lt;thead&gt;标签类似，其用于在表格中创建一个页脚，亦可在多页上出现。</p>
<p>&lt;tbody&gt;：指定表格正文，并可以出现多次（&lt;thead&gt; 、&lt;tfoot&gt;只可在表格中出现一次）。      熟悉各标签相应功能后，那么构建一个合理的用于呈现数据的表格，就变得很简单了。各尽其用，最大限度地表示出数据间的关系，这才是table真正用途之所在。那么我们可以构建如下完美数据表格。</p>
<table border="1" cellspacing="2" align="center" bordercolor="#cccccc">
<caption>wondger&#8217;s blog</caption>
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>简单生活</td>
<td>我的简单生活</td>
</tr>
<tr>
<td>2</td>
<td>web相关</td>
<td>web应用，业界新闻</td>
</tr>
<tr>
<td>3</td>
<td>设计制作</td>
<td>web标准，web设计</td>
</tr>
</tbody>
</table>
<p><a href="http://omiga.org/lab/table/table1.html" target="_blank">查看代码效果</a></p>
<p>合理的数据表格呈现，远不止构建一个合理的代码结构，更要在数据的视觉表现上做一定的设计。比如标题与正文内容的区分，数据的显示方式，对齐原则等，设计者大可自由发挥。</p>
<p>BTW:啥是标准啊？我相信很多人回答不上来。尽管很多人都自称是css高手，div+css高手，在一个web标准的群里问，没人吭声，都是潜水王，都忘了这个世界除了70%的水，还有30%的空气。我也不知道啥是标准，绝大多数用户也不知道。但是我知道大谈标准化的今天，标准化并不是都是为了用户而标准化，相反更多地是在为计算机标准化。计算机笨，只认识代码，管他什么结构，表现，seo，大部分是为计算机做的。国外用人工搜索引擎工作时，不会去查看源代码。个人对标准化在HTML这部分的理解是，用最合理的标签和结构去呈现最适合的内容，纯属个人观点！意见相左者就当我在YY～···</p>
<hr />
<p><small>© omiga for <a href="http://omiga.org/blog">omiga</a>, 2007. |
<a href="http://omiga.org/blog/archives/35">Permalink</a> |
<a href="http://omiga.org/blog/archives/35#comments">3 comments</a> |
Add to
<a href="http://del.icio.us/post?url=http://omiga.org/blog/archives/35&title=标准化你的表格">del.icio.us</a>
<br/>
Post tags: <a href="http://omiga.org/blog/archives/tag/html" rel="tag">HTML</a>, <a href="http://omiga.org/blog/archives/tag/table" rel="tag">table</a>, <a href="http://omiga.org/blog/archives/tag/web%e6%a0%87%e5%87%86" rel="tag">web标准</a>, <a href="http://omiga.org/blog/archives/tag/%e8%a1%a8%e6%a0%bc" rel="tag">表格</a><br/>
</small></p>]]></content:encoded>
			<wfw:commentRss>http://omiga.org/blog/archives/35/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

