WOO logo

Recomendações do Mago

Nesta página

Diretrizes de formatação

Introdução

  • Não envolva as tags <table> ou <h2> com tags <p> ou <div> .

  • Não utilize mais as tags <center>...</center> . Para centralizar um elemento, utilize <div align="center">...</div> .

  • Não utilize mais as tags <b>...</b> . Para destacar um texto em negrito, utilize <strong>...</strong> .

  • Não utilize mais as tags <i>...</i> . Para colocar algo em itálico, utilize <em>...</em> .

  • Use apenas as tags <p>...</p> para envolver texto que, de outra forma, estaria vazio.

  • Ao adicionar uma imagem dentro de um link para uma versão maior dessa imagem, use <a class="trans" ... ><img ... ></a> .

  • Para adicionar um cabeçalho de seção:

    <h2>Nome do cabeçalho</h2>

  • Para adicionar uma imagem que fique deslocada para a direita:

    <div class="image--right"><img src="..." /></div>

  • Para adicionar uma caixa para formatar exemplos de código (como visto nesta página):
    <pre>
	Exemplo de código aqui
</pre>
  • Para adicionar uma tabela de dados estreita com 50% de largura:
    <div class="box desk-50percent">
  <h3 class="box-title">Título da tabela</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Título da coluna 1</th>
		<th class="data-heading">Título da coluna 2</th>
	</tr>
	<tr>
		<td class="left_aligned">Esquerda</td>
		<td>Linha 1, Coluna 2</td>
	</tr>
	<tr>
		<td class="right_aligned">Direita</td>
		<td>Linha 1, Coluna 2</td>
	</tr>
	<tr>
		<td class="centered">Centro</td>
		<td>Linha 3, Coluna 2</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    O código acima produzirá a seguinte tabela centralizada:

    Título da tabela

    Título da coluna 1 Título da coluna 2
    Esquerda Linha 1, Coluna 2
    Certo Linha 1, Coluna 2
    Centro Linha 3, Coluna 2
  • Para adicionar uma tabela de dados com 75% de largura:
    <div class="box desk-75percent">
  <h3 class="box-title">Título da tabela</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Título da coluna 1</th>
		<th class="data-heading">Título da coluna 2</th>
	</tr>
	<tr>
		<td class="left_aligned">Esquerda</td>
		<td>Linha 1, Coluna 2</td>
	</tr>
	<tr>
		<td class="right_aligned">Direita</td>
		<td>Linha 1, Coluna 2</td>
	</tr>
	<tr>
		<td class="centered">Centro</td>
		<td>Linha 3, Coluna 2</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    O código acima produzirá a seguinte tabela centralizada:

    Título da tabela

    Título da coluna 1 Título da coluna 2
    Esquerda Linha 1, Coluna 2
    Certo Linha 1, Coluna 2
    Centro Linha 3, Coluna 2
  • Para adicionar uma tabela de dados padrão com largura de 100%:
    <div class="box">
  <h3 class="box-title">Título da tabela</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Título da coluna 1</th>
		<th class="data-heading">Título da coluna 2</th>
		<th class="data-heading">Título da coluna 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Esquerda</td>
		<td>Linha 1, Coluna 2</td>
		<td>Linha 1, Coluna 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Direita</td>
		<td>Linha 1, Coluna 2</td>
		<td>Linha 1, Coluna 3</td>
	</tr>
	<tr>
		<td class="centered">Centro</td>
		<td>Linha 3, Coluna 2</td>
		<td>Linha 3, Coluna 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    O código acima produzirá a seguinte tabela centralizada:

    Título da tabela

    Título da coluna 1 Título da coluna 2 Título da coluna 3
    Esquerda Linha 1, Coluna 2 Linha 1, Coluna 3
    Certo Linha 1, Coluna 2 Linha 1, Coluna 3
    Centro Linha 3, Coluna 2 Linha 3, Coluna 3
  • Para adicionar uma tabela de dados grande:
    <div class="box box--expandable">
  <h3 class="box-title">Título da tabela<span class="box-title-expand desk-visible">Expandir <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Título da coluna 1</th>
		<th class="data-heading">Título da coluna 2</th>
		<th class="data-heading">Título da coluna 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Esquerda</td>
		<td>Linha 1, Coluna 2</td>
		<td>Linha 1, Coluna 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Direita</td>
		<td>Linha 1, Coluna 2</td>
		<td>Linha 1, Coluna 3</td>
	</tr>
	<tr>
		<td class="centered">Centro</td>
		<td>Linha 3, Coluna 2</td>
		<td>Linha 3, Coluna 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    O código acima produzirá a seguinte tabela centralizada:

    Expandir título da tabela

    Título da coluna 1 Título da coluna 2 Título da coluna 3
    Esquerda Linha 1, Coluna 2 Linha 1, Coluna 3
    Certo Linha 1, Coluna 2 Linha 1, Coluna 3
    Centro Linha 3, Coluna 2 Linha 3, Coluna 3
  • Para adicionar uma tabela de dados extra grande:
    <div class="box box--expandable">
  <h3 class="box-title">Título da tabela<span class="box-title-expand desk-visible">Expandir <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Título da coluna 1</th>
		<th class="data-heading">Título da coluna 2</th>
		<th class="data-heading">Título da coluna 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Esquerda</td>
		<td>Linha 1, Coluna 2</td>
		<td>Linha 1, Coluna 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Direita</td>
		<td>Linha 1, Coluna 2</td>
		<td>Linha 1, Coluna 3</td>
	</tr>
	<tr>
		<td class="centered">Centro</td>
		<td>Linha 3, Coluna 2</td>
		<td>Linha 3, Coluna 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    O código acima produzirá a seguinte tabela centralizada:

    Expandir título da tabela

    Título da coluna 1 Título da coluna 2 Título da coluna 3
    Esquerda Linha 1, Coluna 2 Linha 1, Coluna 3
    Certo Linha 1, Coluna 2 Linha 1, Coluna 3
    Centro Linha 3, Coluna 2 Linha 3, Coluna 3

    Observe os nomes das classes para alinhar um cabeçalho de tabela (th) ou uma célula de tabela (td):

    • class="left_aligned" para alinhar à esquerda
    • class="right_aligned" para alinhar à direita
    • class="centered" para centralizar

    Por padrão, as células regulares da tabela são alinhadas à direita , para tornar o código menor ao exibir tabelas grandes com dados numéricos.

Escrito por: Michael Shackleford