<?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>Leandro Rodrigues &#187; html</title>
	<atom:link href="http://www.lrodrigues.com/blog/category/html/feed" rel="self" type="application/rss+xml" />
	<link>http://www.lrodrigues.com/blog</link>
	<description>programação web, música e eletrônica</description>
	<lastBuildDate>Mon, 07 Dec 2009 12:56:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Use tabelas!</title>
		<link>http://www.lrodrigues.com/blog/html/use-tabelas</link>
		<comments>http://www.lrodrigues.com/blog/html/use-tabelas#comments</comments>
		<pubDate>Mon, 30 Nov 2009 07:26:36 +0000</pubDate>
		<dc:creator>leandro</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[semântica]]></category>
		<category><![CDATA[table]]></category>
		<category><![CDATA[tableless]]></category>

		<guid isPermaLink="false">http://www.lrodrigues.com/blog/?p=74</guid>
		<description><![CDATA[Porque usar tabelas quando necessário em um site tableless.]]></description>
			<content:encoded><![CDATA[<p>Outro dia vi no twitter o <a href="http://www.pinceladasdaweb.com.br/blog/" title="Blog Pinceladas da Web" target="_blank">Pedro Rogério</a> (<a href="http://www.twitter.com/pinceladasdaweb" title="twitter @pinceladasdaweb">@pinceladasdaweb</a>), referência em html5 e webstandarts, criticar a montagem do html do orkut todo em div. Ele tava com razão.<br />
Coincidentemente, na mesma semana, na empresa onde eu trabalho, estavamos discutindo sobre usar div ou table em um trecho do sistema onde há uma listagem de ítens cadastrados em forma de tabela. Também optei por não usar div naquela situação. Vejamos porquê:</p>
<p><span id="more-74"></span></p>
<p>A tag <strong>DIV</strong> significa divisão de texto, uma seção de texto ou conteúdo. Ela (sempre) deve ser usada para a montagem geral do layout do seu site. Neste caso não deve-se utilizar tabelas &#8211; pelo amor de deus &#8211; como se usava antigamente.<br />
Apesar da abolição da tag <strong>TABLE</strong> para a montagem geral dos sites (tableless), esta tag ainda existe e deve ser usado para dados tabulados, dados que normalmente se apresentariam em forma de tabela mesmo. Ela apresenta uma vantagem semântica e de implementação, inclusive, quando empregada no uso correto.<br />
No meu caso, como se tratavam de listagem de ítens, poderia usar a tag <strong>UL</strong> em caso de amostragem do nome do ítem ou com <strong>TABLE</strong> quando é apresentado de forma de uma tabela.</p>
<h3>Uma boa tabela deve ter:</h3>
<ol>
<li><strong>Sumário:</strong> O atributo summary especifíca um resumo do conteúdo da tabela</li>
<li><strong>Caption quando necessário:</strong> A tag caption pode ser usada quando deseja imprimir o título da tabela</li>
<li><strong>thead, tfoot e tbody quando necessário:</strong> A tag thead engloba as linhas pertencem ao cabeçalho, tbody ao corpo e tfoot ao rodapé. o não uso fará que todas as linhas sejam do corpo da tabela</li>
<li><strong>Uso correto de th e td:</strong><strong> td define uma célula comum e th uma célula de título, normalmente usada no cabeçalho da tabela</strong></li>
</ol>
<h3>Exemplo de uso destas recomendações:</h3>
<p><pre><pre name="code" class="html">
&lt;table summary=&quot;Lista de compras&quot;&gt;
&nbsp;&nbsp;&lt;caption&gt;Compras&lt;/caption&gt;
&nbsp;&nbsp;&lt;thead&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Quantidade&lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Unidade&lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Produto&lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Preço&lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&nbsp;&nbsp;&lt;/thead&gt;
&nbsp;&nbsp;&lt;tbody&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;5&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Und&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Peras&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0,00&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;5&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Kg&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Arroz&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0,00&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;7&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Fls&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Alface&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0,00&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&nbsp;&nbsp;&lt;/tbody&gt;
&nbsp;&nbsp;&lt;tfoot&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th colspan=&quot;3&quot;&gt;Total:&lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0,00&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&lt;/table&gt;
</pre></pre> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.lrodrigues.com/blog/html/use-tabelas/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
