Curso de Web Design | Como Criar uma Tabela Dinâmica - Parte 01: O Html5
Saber trabalhar com as três linguagens web iniciais (html5, css3, javascript) combinando suas forças é essencial.
E, aqui no portal Cursos Guilherme estou começando pelo exercício como criar uma tabela dinâmica uma série de vídeos mostrando como utiliza-las em conjunto para produzir projetos web.
Caso queira aprender como criar esta mesma tabela de um outro modo usando também a linguagem php, te convido a participar do meu curso de web design, no qual ensino do zero html5, css3, javascrip, php e mysql.
Curso de Web Design | Como Criar uma Tabela Dinâmica – Parte 01 – O Html5
Para iniciar a produção do exercício da tabela, começarei apresentando a estrutura html5. Então, no vídeo abaixo você aprenderá como construir a estrutura html do projeto.
Neste momento é preciso bastante atenção, pois se o html estiver errado, problemas acontecerão no css e no javascript. Clique aqui e veja as aulas sobre o css e js!
Afinal, tanto os estilos css como os script js atuam sobre o html para mostrarem o seu “trabalho”.
Quer Baixar o Arquivo Html5 da Aula?
Para baixar o arquivo html que criei durante a aula, basta digitar o teu email no campo abaixo e clicar no botão.
Treine com Mais Projetos Web com Html5, Css3, Javascript e Php!
Os projetos aqui das aulas webdesign do portal Cursos Guilherme são uma demonstração das coisas que ensino no curso Do Zero a WebDesigner com Guilherme.
Pois, para ajudar na divulgação do meu curso, para que as pessoas conheçam o meu trabalho, a minha forma de ensinar, decidi postar no youtube e aqui no portal alguns dos exercícios que ensino no curso. Clique Aqui e Vejas Todos os Exercícios Postados no Curso!
Sendo que lá no curso ensino também como construir a arte, o visual (design) do projeto de maneira fácil, como usar html5, css3, php e javascript para alcançar melhores resultados e várias outras coisas que aqui no portal não falei.
Então, se você quer aprender muito mais fazendo outros exercícios que te ensinam a montar projetos aplicáveis à área comercial, Clique Aqui e Venha Participar do Curso!
O que é uma Tabela?
A tabela é uma estrutura organizada, rígida, de fácil leitura que permite que os dados, as informações sejam exibida ao leitor de forma compreensível seguindo uma estrutura de grade.
Com certeza, você já deve estar acostudamo(a) a criar tabelas, pois sejam nas aulas da escola (ensino fundamental ou médio) ou nas aulas de informática (excel, word ou power point) você já deve ter visto ou até feito alguma.
O segredo e ponto forte da tabela em si, é a sua inflexilidade quase absoluta, ou seja, não importa o que você colocará dentro dela, ela tende a manter o mesmo visual, e em parte isso é bom e é ruim, dependendo da prospota e objetivos do projeto.
Como Criar uma Tabela no Html5 da Forma Correta?
Para criar uma tabela com html5 é bem simples, em geral, precisamos de 3 tag html: table, tr, td.
Estas tags serão utilizadas para compor a estrutura das tabelas, o qual seguirá a seguinte lógica: container, linha, celula.
O que é a Tag Table, Tr e Td? Nossas Auxiliares de Criação de Tabela, Linha e Coluna!
Para criar uma tabela no html5 só é preciso utilizar a tag table, pois ela é o container, o bloco, a caixa, que diz ao html que você está querendo construir uma tabela. Contudo, estando vazia não ajuda muito, certo?
Então, com o uso da tag tr (Table Row = linha da tabela) criamos as linhas da tabela, e com ajuda da tag td (Table Data) criaremos por fim a células. Quer conhecer outras Tags para Tabela? Clique Aqui!
Criamos a tabela com a tag table, as linhas com a tag tr e as células com a tag td, mas e as colunas como criamos?
As colunas serão “criadas” automaticamente pela inserção das tag td, pois de modo bem generalizado, se eu tiver 4 tds terei 4 colunas.
Na vídeo aula acima você conseguirá entender melhor como isso funciona na prática.
Como Criar uma Tabela Dinâmica – Parte 02 e 03: Css3 e Js!
Se você gostou da proposta da tabela e já fez a estrutura html mostrada no vídeo te convido a ver as aulas da parte 02 e da parte 03 desta série.
Na vídeo aula da parte 02 ensino como você pode criar os estilos css que atuarão na table usando o css3 e na aula da parte 03 ensino como criar os códigos javascript. Clique e Veja os Vídeo sobre o Css e Js da Tabela!
Dúvidas E Sugestões, Deixe Seu Comentário!
Espero que tenha gostado deste artigo, e que tenha apreciado o primeiro vídeo da série como criar uma tabela dinâmica com html5, css3 e javascript.
E, como de praxe, se tiver qualquer dúvida pode entrar em contato comigo, basta me enviar um email pelo chat, ou deixar um comentário aqui no portal.
Quer Ser um Desenvolvedor Front-End e Back-End?
Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 31 Horas de Aulas em Vídeo e mais de 100 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!
