Fazendo Tabelas HTML – aula 6

Iniciaremos uma tabela usando as tags <table> e finalizamos usando </table>

<table>…</table>

A seguir vamos separar ela em linhas e células (colunas).

Para criarmos as linhas usaremos as tags <tr> …linha… </tr>, e para cada linha faremos as colunas usando <td>..célula ..</td>. Segue exemplo:

<table>
<tr>
        <td>Linha 01, célula 01</td>
        <td>Linha 01, célula 02</td>
        <td>Linha 01, célula 03</td>
</tr>
<tr>
        <td>Linha 02, célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>
        <td>Linha 03, célula 01</td>
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

Fica assim:

Linha 01, célula 01	Linha 01, célula 02	Linha 01, célula 03
Linha 02, célula 01	Linha 02, célula 02	Linha 02, célula 03
Linha 03, célula 01	Linha 03, célula 02	Linha 03, célula 03

 

Para definir uma largura usaremos widht e para altura height e border para inserir a espessura da borda da tabela:

Para a tabela toda:

<table widht=”770px “  height=”430px”  border=”1”>   - largura de 770 pixel`s por altura de 430 pixel`s </table>

Para a célula:

<td width=”270 px” height=”50px” border=”1”>…….</td>

 Como faço para chegar ao resultado a seguir:

Linha 01, célula 01, 02  03
Linha 02, célula 01	Linha 02, célula 02	Linha 02, célula 03
Linha 03, célula 01	Linha 03, célula 02	Linha 03, célula 03

 

Todos nós sabemos que são 3 células em cada linha. Vamos juntar essas 3 células da primeira linha usando colspan formando uma única célula:

<table>
<tr>
        <td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
        <td>Linha 02, célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>
        <td>Linha 03, célula 01</td>
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

E para juntarmos duas células em uma mesma coluna?

Linha 01, célula 01
Linha 02, célula 01 Linha 03, célula 01	Linha 02, célula 02	Linha 02, célula 03
	Linha 03, célula 02	Linha 03, célula 03

 

Agora usaremos rowspan , no exemplo acima foi juntado as células 01 e 01 das linhas 02 e 03:

Na célula 01 da linha 02 digitaremos rowspan=”2” para juntarmos as duas células, e na linha 3 eliminaremos a célula 01.

<table>
<tr>
        <td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
        <td rowspan=”2”>Linha 02 – célula 01, Linha 03 – célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>     
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

Espaçamento:

cellspacing: para inserir um espaço entre cada célula;

cellpadding: espaço entre a borda da tabela e o texto dentro da célula.

<table cellpadding=”5px” cellspacing=”5px”>…..</table>

Jair Alievi

Montando Layout Site – Parte 5.4 (Menus horizontais CSS)

Agora sim, o que faltava para nosso layout ficar pronto. Menus em forma de lista utilizando css. Os tipo de listas vocês encontram no post “Criando LIstas HTML – aula 5″, já no nosso exemplo de site, foi feito em Xhtml. Espero que gostem!

Podem comentar a vontade!

Informações:
Montando Layout Site – Parte 5.4 (menus horizontais+css)
Compactado: Winrar
Windows Media Player
Tamanho: 8,79 Mb
Autor: Jair Alievi
Link para download: Easy-share

Criando Listas HTML – aula 5

Seugue abaixo como criar listas utilizando html, tem o código e o resultado:

Lista Numerada (ordenada) :

<ol>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>

</ol>

Fica assim:

1. Item 01
2. Item 02
3. Item 03
4. Item 04
5. Item 05
6. Item 06

Lista Não-numerada (Não-ordenada) :

<ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
        <li>Item 06</li>

</ul>

Fica assim:

• Item 01
• Item 02
• Item 03
• Item 04
• Item 05
• Item 06

Lista de Glossário:

<DL> Indica o início de uma lista em forma de um glossário
<DT>Termo a ser definido
<DD>Definição do termo

<dl>
          <dt>O que faz a tag UL ?</dt>
                  <dd>Cria uma lista com marcadores</dd>
          <dt>O que faz a tag OL ?</dt>
                  <dd>Cria uma lista ordenada utilizando números<dd>
</dl>

Fica assim:

O que faz a tag UL ?

Cria uma lista com marcadores

O que faz a tag OL ?

Cria uma lista ordenada utilizando números

 Misturando:

<dl>
<dt>Termo a ser definido</dt>
<dd>Definição do termo</dd>
         <ol>
                 <li>Item numerado 01</li>
                <li>Item numerado 02</li>
                       <ul>
                               <li>Item não ordenado (marcadores)</li>
                       </lu>
               <li>Item numerado 03</li>
         </ol>
<dt>Termo à definir</dt>
<dd>Definição do termo</dd>
</dl>

Fica assim: 

Termo a ser definido

Definição do termo

1. Item numerado 01
2. Item numerado 02
   • Item não ordenado (marcadores) 
3. Item numerado 03

Termo à definir

Definição do termo

Bom, é isso, essas listas vão ser muito úteis quando forem desenvolver páginas utilizando css, utilizadas muito para criação de menus.

Jair Alievi

40 Dicas Para Tornar Seu Site Mais Eficiente e Funcional

“Fusando” na net encontrei esse e-book em pdf com ”40 dicas muito úteis para o aperfeiçoamento no desenvolvimento de um site” , baixei e li , realmente são ótimas dicas, arquivo pequeno e rapidinho para baixar. Divirtam-se!

Tamanho: 40KB
Idioma: Português
Formato: Rar
Créditos: Grupo Cacupé
Link Download: Clique Aqui