Curso sobre HTML - Aula 15, nessa aula nós vamos ver como colocar Tabelas no seu site Web, como deixar elas ainda mais personalizadas com o CSS, ainda retorno um pouco no conceito de listas e personalizamos ainda mais nossas listas com o CSS

1. HTML 4.1 - Aula 15
Canal Effeccinco

2. Revisão da Aula Anterior
 Leiaute de Página
 Ponto Flutuante (float)
 Comando Clear
 Definir um tamanho fixo de página
 Definir uma posição da página
 Aprendemos sobre z-index

3. Conteúdo dessa Aula
 Nós já passamos por muitas coisas até chegar aqui, mas você já parou para
pensar que até agora não vimos nada na nossa página que remeta a uma
tabela, nós poderíamos organizar nossos produtos com tabelas e com seus
respectivos preços, por isso nessa aula nós vamos dar uma olhada em como
criar tabelas e daremos uma olhada em mais algumas listas.
 Então vamos lá vamos aprender como criar uma tabela no seu html?

4. Criando Tabelas
 Para criar uma tabela nós adicionamos o comando de tabela no html:
 <table></table>
 Dentro dessas tags então nós podemos incluir dados, para inserir uma linha na
tabela você usa o comando, que significa table row ou linha da tabela:
 <tr> </tr>

5. Criando Tabelas
 Ainda dentro das linhas você pode definir o titulo de cada coluna usando o
comando Table Header ou cabeçalho da coluna
 <th>Aqui é o seu Título</th>
 Se você quiser apenas preencher com dados na tabela você usa dentro da tr
os comando table data ou dados da tabela:
 <td>Equivale a cada coluna<td>

6. Colocando Legenda na tabela
 Você pode colocar um resumo na sua tabela descrevendo ela, é útil se seu site
for de acessibilidade isso faz com que programas leiam a descrição da sua
tabela, ajudando pessoas com alguma incapacidade visual, o sumary cria esse
resumo.
 <table sumary=“Aqui você descreve sua tabela”>
 Você ainda pode colocar uma legenda na tabela usando o comando:
 <caption> Aqui é exibida pelos navegadores</caption>

7. Definindo espaços de Bordas na Tabela
 As tabelas funcionam um pouco diferente do modelo de caixa, já que eles
possuem seu próprio espaçamento, mas caso você queira mudar o
espaçamento você pode usar um comando, e passar parâmetros em pixels,
para manipular na horizontal e na vertical, veja:
 Border-spacing: 10px 20 px;
 Outra forma de resolver essa questão das bordas e colocando um outro
comando que retira qualquer formatação de bordas da sua tabela, veja:
 Border-collapse: collapse;

8. Mesclando Linhas e colunas
 Você ainda pode mesclar linhas na sua tabela se você quiser, para isso você
usa o comando de rowspan dentro da td, informando o numero de linhas que
você quer mesclar:
 <td rowspan=“2” ></td>
 Para mesclar colunas você usa o comando celspan, e funciona da mesma
forma que o rowspan.
 <td celspan=“2”> </td>

9. Deixando suas Listas mais bonitas
 Você sabia que você ainda pode deixar suas lista mais personalizadas, existe
duas propriedades no CSS que você pode melhorar para mudar suas listas,
veja:
 List-style-type: disc;
 Circle;
 Square;
 None;

10. Criando ainda um marcador estilizado
 Você pode personalizar ainda mais seus marcadores, você pode colocar
marcadores que você criou, veja:
 List-style-image: url(caminhodaIMagem);
 Para listas ordenadas você pode definir as propriedades:
 Decimal, upper-alpha, lower-alpha, upper-roman, lower-roman.

11. Posicionando suas listas
 Existe um comando que você pode posicionar suas listas no seu site de forma
que ela fique alinhada:
 List-style-position: inside; - deixa alinhado sobre o marcador
 List-style-position: outside; - alinha sob o texto que estiver acima dela.

12. Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 https://www.youtube.com/watch?v=Tt_LiDpZSYA&feature=youtu.be
 Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e
compartilhe:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed
 Acesse o nosso Blog, e confira matérias mais completas.
 www.effeccinco.wix.com/effeccinco

13. Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capítulo 1 – Comece a entender o
HTML.
 SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo
Sites de e-Commerce. São Paulo: Makron Books,
2001, 598 p.