Oi, hoje vamos falar sobre tabelas e
como você pode usá-las para exibir seus dados em seu site.
Então, como eu gosto de dizer,
é que nós realmente costumávamos considerar tabelas como sendo este tipo de idéia maligna.
Porque as pessoas não usavam mesas pela razão que deveriam.
Em vez disso, eles estavam usando tabelas para definir as coisas,
colocando-as bem na tela.
Isso começou a acontecer durante o tempo de HTML 2, talvez HTML 3.1.
E as pessoas diziam, eu realmente quero que minha página fique bonita e
eu não tenho meios para fazer isso, então eu vou fazer uma mesa enorme e
tipo de colocar tudo em diferentes linhas ou colunas.
Isso exclui completamente toda a idéia de separação de conteúdo do layout.
Além disso, isso torna realmente confuso para as pessoas que podem estar usando
dispositivos assistivos, porque eles estão se perguntando, isso é realmente um monte de dados,
ou há conteúdo que deve ser apenas tipo de formatado de forma regular.
Então vamos começar a falar de mesas.
E o que eu realmente quero fazer é enfatizar a idéia de que você só deve usar
tabelas se você tem algum tipo de dados sendo exibido.
Antes mesmo de começares a codificar uma única coisa,
preciso que desenhes o teu layout de como a tua mesa deve ser.
Agora, eu disse isso aos meus alunos uma e outra vez, e eles dizem sim, sim, e
então eles começam a codificar.
E então eles dizem sim, sim, e então eles começam a codificar.
E, depois da quarta ou quinta vez, eles percebem,
oh, é muito mais fácil escrever código limpo da primeira vez, do que corrigir código quebrado.
E então, eles começam e pensam, certo, quantas linhas e
colunas eu realmente preciso para representar todos os meus dados?
E então você vai um passo adiante e diz, bem, há alguma linha ou
coluna onde eu realmente preciso estender várias células, ou
o que chamamos de pequenas caixas na tabela?
Porque se sim, vai ser muito mais fácil se eu desenhei isso para descobrir
onde vou precisar de atributos especiais para fazer isso acontecer.
Porque uma das coisas mais importantes a saber quando você está fazendo tabelas é que
o navegador espera que haja o mesmo número de células em cada linha.
Se você não fizer isso, vai parecer muito bagunçado.
Uma vez que você decidiu como sua tabela deve ser,
então é hora de começar a pensar sobre as tags.
Você começa com a tag tabela e é basicamente apenas um elemento recipiente que
vai conter todos os outros atributos e todas as outras tags dentro dele.
Você vai ter a linha da tabela e, em seguida, aqui para td, eu tenho colunas, mas
o que eu realmente acho que seria melhor é pensar nisso como células da tabela, não realmente
colunas porque o que você está fazendo é falar sobre cada caixa individual.
Então, dentro da tabela, você vai ter uma ou mais linhas de tabela.
E, em seguida, dentro de cada linha da tabela, você vai ter um ou mais elementos TD, de modo que
as colunas ou as células.
Então aqui está o código para criar uma tabela muito simples.
Embora pareça muito complicado e como se houvesse um monte de coisas acontecendo aqui.
A maior parte disso é apenas informação para o navegador.
Quando olhamos para a página real que é gerada, você verá que é muito
limpo e simples.
Então eu tenho o meu código para a
minha tabela do lado de fora e, em seguida, cada uma das minhas linhas de código aqui é uma linha.
Eu tenho o meu tr start e o meu tr fim.
E, em seguida, dentro de cada linha eu tenho três elementos, um, dois,
três que estão dentro da tag td.
E eu vou te dizer agora que quando eu escrevi este código parecia
bom, mas eu meio que estraguei tudo porque eu esqueci de colocar na minha etiqueta final.
Então certifique-se de que quando você está codificando isso, você está sendo muito limpo e conciso.
E se você fizer isso corretamente, isso criará uma tabela simples,
como eu disse, com nove elementos nela.
Um, dois, três, quatro, cinco, seis, sete, oito, nove.
Isto é o mais simples que você pode obter, até onde a mesa vai.
Agora, em alguns casos, você pode querer adicionar o que chamamos de cabeçalhos de tabela ao seu código.
Títulos de tabela é a idéia de que no topo de cada coluna, ou mesmo no topo ou
no início de cada linha, você tem algum tipo de texto que é negrito, que indica que
não são dados, este é realmente o nome dos dados que estamos olhando.
Agora está tudo bem, quero dizer que não está bem, mas o que algumas pessoas fariam é que eles
simplesmente faziam esses elementos regulares de TD e talvez torná-los ousados.
Então as pessoas que estão olhando para ele podem dizer, oh, ei, olha.
Isto é ousado, por isso deve ser mais importante.
Mas nós realmente queremos evitar fazer isso.
Em vez de usar um TD com algum tipo de fonte em negrito,
queremos usar uma tag semântica TH, que significa cabeçalho da tabela.
Então aqui essas três linhas de código são exatamente as mesmas de antes, mas
eu adicionei uma nova linha, onde em vez de td eu tenho th.
Então eu tenho a linha um, linha dois, linha três, etc
E o que você pode ver aqui é que o que nós temos é esta pequena tabela agradável
no topo de cada um, que é ambos visualmente permite que o usuário saiba que
estes são cabeçalhos, mas também semanticamente transmite essa mesma informação.
Então uma das coisas que eu mencionei antes, quando você está projetando sua mesa
é que você quer decidir se você vai estar abrangendo várias células.
Pode ser o caso que a mesa que você quer fazer não é uma espécie de
grade perfeita do dedo do pé tic tac, ou perfeita nove por nove.
Assim, você pode combinar várias linhas e ou
várias colunas usando os atributos de extensão de linha e coluna.
Dentro do seu elemento, você incluiria rowspan igual a dois se você quisesse abranger
duas linhas, ou a extensão da coluna é igual a cinco se você quisesse que ela abranja cinco colunas.
Tudo bem, então deixe-me ir em frente e mostrar-lhe um exemplo com algum código e
novamente, eu percebo que se você está olhando para isso em alguma pequena tela que isso
realmente parece um monte de informações para digerir.
Mas não é muita coisa acontecendo.
Eu tenho uma tabela simples, onde eu tenho meus títulos de tabela com o nome da criança e
, em seguida, o nome do pai.
E então eu vou em frente e eu começo a colocar em uma criança, e
com cada criança, eu incluo seus pais.
Então, aqui, eu tenho rodagem igual a dois para Catherine,
o que significa que eu realmente quero que minha célula Catherine ocupe duas linhas. O
mesmo com a cela do Edward.
Maggie, eu saí completamente sozinha.
Então vamos apenas olhar para o resultado final, e eu acho que isso é realmente se
nós cadeia para trás, ele vai ajudar você a entender o que este código está fazendo.
Então, novamente, eu tenho o nome da criança e o nome do pai, e
aqui estão as duas células onde eu fiz a extensão da linha.
E você pode ver, ele realmente levou várias fileiras porque neste caso,
Catherine e Edward ambos tinham dois pais que queríamos juntar.
Novamente, não é um conceito difícil, mas é o caso que se você não estava pensando sobre
isso, e nós voltamos para o seu código e apenas começamos a lançar
rowspan e columnspan dentro, ele fica muito confuso e difícil de depurar.
Uma das coisas que você deve ter notado,
no topo da tabela, eu incluí um atributo de borda.
A razão pela qual eu fiz isso é porque eu acho que é muito
mais fácil ver essa envergadura aqui porque eu tenho as linhas em torno de cada célula.
Então, você pode usar o atributo border para ir em frente e
colocar linhas entre cada uma de suas células.
E é muito comum fazer isso.
Mas, novamente, em seu HTML, eu tento evitar o estilo.
É algo que podemos adicionar mais tarde se você decidir aprender mais sobre CSS.
Mas é um atributo que é tão comumente usado que eu queria ir
em frente e colocá-lo lá para que você pudesse ver o que estava acontecendo.
Em seguida, vamos falar sobre legendas.
Então, como vinculamos texto a uma tabela específica?
O que as pessoas costumavam fazer era colocar em algum tipo de cabeçalho, h2 ou h3 e
colocavam logo acima ou logo abaixo da mesa.
Então, visualmente, se você estivesse olhando para ele, você poderia meio que descobrir, oh,
isso combina com a mesa.
Mas, novamente, eu realmente quero empurrá-lo para usar etiquetas semânticas.
Então, em vez de fazer isso, você pode ir em frente e
usar a etiqueta de legenda dentro da tabela e
ele vai ajudar todos a saber que oh esta legenda vai com esta tabela específica.
Então, vamos em frente e rever.
Número um, tabelas só devem ser usadas para dados tabulares.
Não use isso para layout.
Dois, desenhe sua mesa antes de codificar sua tabela.
Vai poupar-te tanto sofrimento no final, prometo-te isso.
Finalmente, e esta é a terceira e mais importante coisa que espero que você saia com,
é que você precisa verificar se há tags não fechadas.
Uma das coisas que é ótimo nos navegadores quando você está desenvolvendo
localmente, você está digitando seu código e testando e olhando para ele, é que
seu navegador geralmente pode descobrir o que você queria fazer, mesmo que você tenha feito asneira.
Tudo bem.
E tabelas são um bom exemplo onde você pode esquecer de fechar algumas tags,
mas seu navegador sabe o que você queria fazer.
Mas mais tarde, se você decidir fazer uma tabela, e você vai carregá-la, e
você realmente precisa ter certeza de que os dados lá são válidos e representados bem.
Uma das piores coisas que você pode fazer é deixar suas etiquetas fechadas.
Portanto, certifique-se de validar seu código,
sempre que você escrever uma tabela ou realmente sempre que você escrever qualquer código.
E você realmente será capaz de ter certeza de que você está escrevendo o melhor código que você pode.