Tabela e Listas

Tabelas
A tabela é iniciada pela tag “<table>” e encerrada por “</table>”.
Toda tabela é composta por uma cabeça de Tabela “<thead>”, corpo da Tabela “<tbody>” e pé da tabela “<tfoot>”.
Na tabela temos que criar linhas “<tr>” e células “<th>”. No caso da célula ser um titulo de cabeçalho, utilizamos o “<th>”.
Para mesclar células, utilize os atributos colspan (mesclar colunas) ou rowspan (mesclar linhas) na célula.
Passos para criação da tabela:
1. Definir a tabela “<table>”
2. Criar a cabeça, corpo e pé da tabela “<thead>” , “<tbody>” e “<tfoot>”
3. Inserir as linhas da tabela dentro das partes da mesma “<tr>”
4. Criar as células dentro das linhas “<th>, <td>” (Aqui também mesclamos as células)
Exemplo de Tabela:
<table>
<thead>
<tr>
<th colspan=”2″>Lorem Ipsum</td>
</tr>
</thead>
<tbody>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Set Amet</td><td>33,00</td>
</tr>
</tfoot>
</table>
Listas
Lista de Definição: Precisa de um titulo.
<dl>
<dt>TV</dt>
<dd>Globo</dd>
<dd>MTV</dd>
<dd>SBT</dd>
<dt>Revista</dt>
<dd>Veja</dd>
<dd>Época</dd>
<dd>Isto É</dd>
</dl>
Lista Não-ordernada:
<ul>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
É possível utilizar outros tipos de marcadores para listas como “circle”, “disc” e “square”.
<ul type=”circle”>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
<ul type=”disc”>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
<ul type=”square”>
<li>Publicidade e Propaganda</li>
<li>Administração & Marketing</li>
<li>Direito</li>
</ul>
Lista Ordernada:
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
É possível utilizar outros tipos de marcadores para numeradores como “a” “A”, “i” “I” e “1″.
<ol type=”1″>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”a”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”A”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”i”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
<ol type=”I”>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>




Na empresa que trabalha, existe uma área ou profissional de Arquitetura de Informação?
View Results
   
Veja também:

Leave a Reply