Aula 4

Tabelas

Uma tabela em HTML consiste em células de tabela dentro de linhas e colunas. O seu conteúdo é escrito de linha em linha.

<table> – para identificar o início da tabela

<tr> – table rows – para identificar a linha da tabela

<td> – table data – para identificar uma célula(coluna) da tabela, na linha onde se insere.

<th> – semelhante ao <td> mas para cabeçalho da tabela

Atributos:

Colspan: Para fazer uma célula abranger várias colunas.

Rowspan: Para fazer um célula abranger várias linhas.

<caption> – define uma legenda de tabela e deve ser inserida imediatamente após a tag <table>.

SEMÂNTICA:

<tbody>, <thead> e <tfoot> – permitem distinguir entre o conteúdo principal, a primeira e a última linha de uma tabela.

<table border="1px">
            <caption>
                legenda da tabela
            </caption>
            <thead>
                <tr>
                    <th colspan="4">cabeçalho</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>col 1</td>
                    <td>col 2</td>
                    <td rowspan="2">col 3 e 4</td>
                </tr>
                <tr>
                    <td>col 1</td>
                    <td>col 2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>col 1</td>
                    <td>col 2</td>
                    <td>col 3</td>
                </tr>
            </tfoot>
        </table>

Exercício:

1. Crie uma tabela com 3 linhas utilizando dentro do bloco <table> duas vezes o bloco <tr>
2. Dentro do primeiro bloco <tr> crie 2 blocos <th> para definir os cabeçalhos. Dentro do bloco <th> coloque o texto: “Cabeçalho 1” e “Cabeçalho 2”.
3. Dentro do segundo e terceiro <tr>, insira 2 blocos de <td> e coloque dentro dos mesmos “Elementos 1”, “Elemento 2”, “Elemento 3” e “Elemento 4”.
4. Verifique o resultado.
5. Faça alterações para o conteúdo que desejar

Exercício:

1. Crie uma tabela para exibir informações sobre produtos. A tabela deve ter pelo menos 4 colunas: Produto, Descrição, Preço e Quantidade.
2. Adicione pelo menos 5 linhas *a tabela, representando diferentes produtos. Preencha as células com informações fictícias, mas realistas.
3. Utilize as tags apropriadas, como <table>, <tr>, <th> e <td>.
4. Inclua uma breve descrição acima da tabela, indicando que se trata de uma lista de produtos