Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - tabelas

Para a criação de tabelas, as seguintes tags são utilizadas:

  • table: indica o início e o fim da tabela
  • thead: indica o início e o fim do cabeçalho da tabela
  • tbody: indica o início e o fim do corpo da tabela
  • tr: cria uma linha na tabela (seja no cabeçalho ou no corpo da tabela)
  • th: cria uma célula no cabeçalho da tabela, dentro de uma linha
  • td: cria uma célula no corpo da tabela, dentro de uma linha

Vamos aos exemplos!

Tabela simples com 3 linhas e 5 colunas (sendo 1 linha de cabeçalho)


<table>
        <thead>
                <tr>
                        <th>Coluna 1</th>
                        <th>Coluna 2</th>
                        <th>Coluna 3</th>
                        <th>Coluna 4</th>
                        <th>Coluna 5</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>Linha 1 Coluna 1</td>
                        <td>Linha 1 Coluna 2</td>
                        <td>Linha 1 Coluna 3</td>
                        <td>Linha 1 Coluna 4</td>
                        <td>Linha 1 Coluna 5</td>
                </tr>
                <tr>
                        <td>Linha 2 Coluna 1</td>
                        <td>Linha 2 Coluna 2</td>
                        <td>Linha 2 Coluna 3</td>
                        <td>Linha 2 Coluna 4</td>
                        <td>Linha 2 Coluna 5</td>
                </tr>
        </tbody>
</table>
Resultado
Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5
Linha 1 Col. 1 Linha 1 Col. 2 Linha 1 Col. 3 Linha 1 Col. 4 Linha 1 Col. 5
Linha 2 Col. 1 Linha 2 Col. 2 Linha 2 Col. 3 Linha 2 Col. 4 Linha 2 Col. 5

Tabela com colunas mescladas


<table>
        <thead>
                <tr>
                        <th>Coluna 1</th>
                        <th>Coluna 2</th>
                        <th>Coluna 3</th>
                        <th>Coluna 4</th>
                        <th>Coluna 5</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>Linha 1 Col. 1</td>
                        <td>Linha 1 Col. 2</td>
                        <td>Linha 1 Col. 3</td>
                        <td>Linha 1 Col. 4</td>
                        <td>Linha 1 Col. 5</td>
                </tr>
                <tr>
                        <td>Linha 2 Col. 1</td>
                        <td colspan="2">Col. mesclada, ocupando 2 Colunas</td>
                        <td>Linha 2 Col. 3</td>
                        <td>Linha 2 Col. 4</td>
                </tr>
                <tr>
                        <td>Linha 2 Col. 1</td>
                        <td>Linha 2 Col. 2</td>
                        <td>Linha 2 Col. 3</td>
                        <td>Linha 2 Col. 4</td>
                        <td>Linha 2 Col. 5</td>
                </tr>
        </tbody>
</table>
Resultado
Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5
Linha 1 Col. 1 Linha 1 Col. 2 Linha 1 Col. 3 Linha 1 Col. 4 Linha 1 Col. 5
Linha 2 Col. 1 Col. mesclada, ocupando 2 Colunas Linha 2 Col. 3 Linha 2 Col. 4
Linha 2 Col. 1 Linha 2 Col. 2 Linha 2 Col. 3 Linha 2 Col. 4 Linha 2 Col. 5

Tabela com linhas mescladas


<table>
        <thead>
                <tr>
                        <th>Coluna 1</th>
                        <th>Coluna 2</th>
                        <th>Coluna 3</th>
                        <th>Coluna 4</th>
                        <th>Coluna 5</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>Linha 1 Col. 1</td>
                        <td>Linha 1 Col. 2</td>
                        <td>Linha 1 Col. 3</td>
                        <td>Linha 1 Col. 4</td>
                        <td>Linha 1 Col. 5</td>
                </tr>
                <tr>
                        <--Esta linha tem uma coluna a menos, por causa da mesclagem-->
                        <td rowspan="2">Col. mesclada, ocupando 2 linhas</td>
                        <td>Linha 2 Col. 2</td>
                        <td>Linha 2 Col. 3</td>
                        <td>Linha 2 Col. 4</td>
                        <td>Linha 2 Col. 5</td>
                </tr>
                <tr>
                        <td>Linha 3 Col. 2</td>
                        <td>Linha 3 Col. 3</td>
                        <td>Linha 3 Col. 4</td>
                        <td>Linha 3 Col. 5</td>
                </tr>
                <tr>
                        <td>Linha 4 Col. 1</td>
                        <td>Linha 4 Col. 2</td>
                        <td>Linha 4 Col. 3</td>
                        <td>Linha 4 Col. 4</td>
                        <td>Linha 4 Col. 5</td>
                </tr>
        </tbody>
</table>
Resultado
Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5
Linha 1 Col. 1 Linha 1 Col. 2 Linha 1 Col. 3 Linha 1 Col. 4 Linha 1 Col. 5
Col. mesclada, ocupando 2 linhas Linha 2 Col. 2 Linha 2 Col. 3 Linha 2 Col. 4 Linha 2 Col. 5
Linha 3 Col. 2 Linha 3 Col. 3 Linha 3 Col. 4 Linha 3 Col. 5
Linha 4 Col. 1 Linha 4 Col. 2 Linha 4 Col. 3 Linha 4 Col. 4 Linha 4 Col. 5
Voltar ao Índice