Tabelas

Aula sobre tabelas.

M – Vamos falar de tabelas html?
MEG – se achas interessante

é para tu perceberes como as tabelas que eu criei para a fachada funcionam e como se pode notar se algo vai interferir nas mesmas
sim, mas então vamos a elas, nada de teoria.

eu tenho de explicar a teoria para poderes perceber a tabela

em HTML uma tabela é criada assim

<table>

<tr>

</tr>

</table>

Essas duas tags têm de ficar entre as outras, n
~
aou otu ?o

ou tu dás aula ou eu…

sim,

ESSA é uma tabela com 3 linhas
tudo o que está dentro desses dois tags forma a tabela…
então, uma tabela é formada por linhas, que são definidas assim

tudo o que está dentro disso é uma linha

cada linha pode ter N colunas. Uma coluna é definida assim…

conforme disse, cada linha pode ter N colunas… uma coluna é definida assim

tudo o que está dentro disso está numa coluna

ah, antes de falar em coluna…

este é um exemplo de uma tabela com 3 linhas

</table>

essa é uma tabela com 1 linha e 2 colunas

se eu quero escrever na primeira coluna eu faço isso

<table>
<tr>
<td>CONTEÚDO DA PRIMEIRA COLUNA</td> <td>CONTEÚDO DA SEGUNDA COLUNA</td>
</tr>
</table>

SE a tabela possui duas colunas, todas as linhas tem de ter 2 tds… exemplo

<table>
<tr>
<td>CONTEÚDO DA PRIMEIRA COLUNA, primeira linha</td> <td>CONTEÚDO DA SEGUNDA COLUNA primeira linha</td>
</tr>

<tr>
<td>CONTEÚDO DA PRIMEIRA COLUNA, segunda linha</td> <td>CONTEÚDO DA SEGUNDA COLUNA, segunda linha</td>
</tr>
</table>

tens de ter o mesmo número de tds em todas, para que a tabela tenha o mesmo número de colunas em todas as linhas… se não fazes isso, o HTML baralha todo e destroi o visual…

existe um caso especial… digamos que queiras fundir duas colunas, ou seja, duas células adjacentes…

nesse caso, a primeira linha teria uma célula única… o comando para fazer isso é

<table>
<tr>
<td colspan=”2″>essa célula agora ocupa 2 colunas, ou seja, possui o dobro da largura, na primeira linha</td>
</tr>

<tr>
<td>CONTEÚDO DA PRIMEIRA COLUNA, segunda linha</td> <td>CONTEÚDO DA SEGUNDA COLUNA, segunda linha</td>
</tr>
</table>

colspan=”2″ diz: faça a fusão desta célula com a próxima na mesma linha…

percebeste até agora?

é para eu responder?
sim, colspan=”2″ – ordem de fundir, mas, meu!, eu ainda n tive tempo de memorizar ponta de corno!…………………………….

sim, guarda essa explicação… TR = linha TD = coluna…

um exemplo simples de CSS…

CSS, como sabes, é uma instrução para que algo tenha uma determinada aparência…

por exemplo

.estiloItalico {
font-style: strong;
}

esse estilo, quando aplicado a um elemento (tag) fará tudo dentro desse elemento ser escrito em itálico…
se
então, se eu fiz

o nome sou eu quem defino, eu quero chamar esse estilo de estiloItalico e italic é a ordem em HTML

se eu quero agora aplicar isso a uma coluna da tabela eu faço

<table>
<tr>
<td class=”estiloItalico”>TUDO O QUE EU ESCREVER AQUI VAI SER MOSTRADO EM ITÁLICO</td>
</tr>

td representa uma coluna da tabela
eu mandei o HTML vincular essa coluna ao estiloItalico
estiloItalico diz que todas as letras são itálicas

logo, se eu escrever dentro da coluna, tudo o que for escrito vai ser escrito em itálico

qual é a vantagem de usar um estilo… se um dia eu quiser mudar tudo o que estiver em itálico para negrito eu simplesmente mudo o estilo lá em cima

strong = negrito = bold

não sei porque resolveram chamar de strong, mas enfim…

então eu posso ter diferentes classes para diferentes colunas, ou vincular a tabela inteira ao novo estilo

agora, tudo o que eu escrever em qualquer coluna, em qualquer linha, vai ser itálico.
por isso, tudo o que tu escreves nas minhas tabelas da fachada respeitam o que eu defini nos estilos para aquelas tabelas… vamos ver…. abre o wordpress