Aulas

Curso de HTML Básico – Aula 05 | Listas e Tabelas

por: Bernardo Collet

atualizado há 10 meses atrás

Curso de HTML Básico Aula 05 - Listas e Tabelas

Criação de lista ordenada (<ol>) e não ordenada (<ul>).

Primeiramente, aqui está o exemplo de como criar uma lista ordenada <ol> (ordered list) e não ordenada <ul> (unordered list):

<!DOCTYPE html>
<html>
<head>
    <title>Criação de Listas</title>
</head>
<body>
    <h1>Listas Ordenadas e Não Ordenadas</h1>
    
    <h2>Listas Ordenadas</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    
    <h2>Listas Não Ordenadas</h2>
    <ul>
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
    </ul>
    
    <h2>Listas com Níveis de Aninhamento</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
    
    <h2>Listas Ordenadas com Tipos de Numeração</h2>
    <ol type="I">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    
    <h2>Listas Não Ordenadas com Estilos Personalizados</h2>
    <ul style="list-style-type: square;">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Neste exemplo, utilizamos a tag <ol> para criar uma lista ordenada e a tag <ul> para criar uma lista não ordenada. Enfim, dentro dessas tags, utilizamos a tag <li> para definir cada item da lista.

Entretanto, você também pode aninhar listas dentro de outras listas, como demonstrado no exemplo. Isso é útil para criar hierarquias e estruturar informações mais complexas.

Além disso, é possível personalizar a numeração das listas ordenadas usando o atributo type, que aceita valores como "A" (maiúsculas), "a" (minúsculas), "I" (algarismos romanos maiúsculos) e "i" (algarismos romanos minúsculos).

Para as listas não ordenadas, você pode personalizar o estilo de marcadores utilizando o atributo style e o CSS. Então, utilizamos o estilo square para criar marcadores quadrados.

Lembre-se de que esses são apenas exemplos de uso das tags <ol> e <ul>. A criação de listas pode variar de acordo com a necessidade e o design do seu projeto.

Utilização de lista aninhada.

Aqui está um exemplo do conteúdo da aula sobre a utilização de listas aninhadas:

<!DOCTYPE html>
<html>
<head>
    <title>Listas Aninhadas</title>
</head>
<body>
    <h1>Listas Aninhadas</h1>
    
    <h2>Listas Ordenadas Aninhadas</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2
            <ol>
                <li>Subitem 2.1</li>
                <li>Subitem 2.2</li>
            </ol>
        </li>
        <li>Item 3
            <ol>
                <li>Subitem 3.1</li>
                <li>Subitem 3.2
                    <ol>
                        <li>Subitem 3.2.1</li>
                        <li>Subitem 3.2.2</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
    
    <h2>Listas Não Ordenadas Aninhadas</h2>
    <ul>
        <li>Item A</li>
        <li>Item B
            <ul>
                <li>Subitem B.1</li>
                <li>Subitem B.2</li>
            </ul>
        </li>
        <li>Item C
            <ul>
                <li>Subitem C.1</li>
                <li>Subitem C.2
                    <ul>
                        <li>Subitem C.2.1</li>
                        <li>Subitem C.2.2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

Neste exemplo, utilizamos listas aninhadas tanto para listas ordenadas <ol> quanto para listas não ordenadas <ul>. As listas aninhadas permitem criar hierarquias e estruturar informações de forma organizada.

No caso das listas ordenadas aninhadas, utilizamos a tag <ol> para criar a lista principal e as sublistas dentro dos itens com a tag <li>. Enfim, isso nos permite ter níveis de aninhamento, como exemplificado no código.

Desse modo, para as listas não ordenadas aninhadas, utilizamos a tag <ul> para criar a lista principal e as sublistas dentro dos itens com a tag <li>. Essas sublistas podem ser aninhadas conforme necessário.

As listas aninhadas são úteis para estruturar informações com várias camadas de subitens, como tópicos e subcategorias. Elas ajudam a organizar e apresentar o conteúdo de maneira clara e hierárquica.

Em suma, lembre-se de que esse é apenas um exemplo de como utilizar listas aninhadas. Enfim, a complexidade e a quantidade de aninhamentos podem variar dependendo da estrutura e das necessidades do seu projeto.

Construção de tabelas com as tags <table>, <tr> e <td>.

Aqui está um exemplo do conteúdo da aula sobre a construção de tabelas utilizando as tags <table>, <tr>, e <td>:

<!DOCTYPE html>
<html>
<head>
    <title>Construção de Tabelas</title>
</head>
<body>
    <h1>Construção de Tabelas</h1>
    
    <table>
        <caption>Título da Tabela</caption>
        <thead>
            <tr>
                <th>Coluna 1</th>
                <th>Coluna 2</th>
                <th>Coluna 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Dado 1</td>
                <td>Dado 2</td>
                <td>Dado 3</td>
            </tr>
            <tr>
                <td>Dado 4</td>
                <td>Dado 5</td>
                <td>Dado 6</td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

Enfim, utilizamos a tag <table> para criar a tabela. Dentro da tabela, temos a tag <caption>, que permite adicionar um título descritivo à tabela.

A estrutura da tabela é dividida em três seções principais: <thead>, <tbody> e <tfoot>. O <thead> contém as informações do cabeçalho da tabela, especificamente com a tag <tr> (linha da tabela) e <th> (célula de cabeçalho). O <tbody> contém as informações do corpo da tabela, também com a tag <tr> e <td> (célula de dados). O <tfoot> é opcional e contém informações do rodapé da tabela, seguindo a mesma estrutura de <tr> e <td>.

Dentro das tags <tr>, temos as células da tabela representadas pelas tags <td> para dados regulares e <th> para cabeçalhos.

Por último, lembre-se de que esse é apenas um exemplo básico de como construir uma tabela. Ou seja, você pode adicionar mais colunas, linhas ou personalizar a aparência utilizando CSS para atender às necessidades do seu projeto.

Woocommerce

Otimização de Desempenho para sua Loja WooCommerce: Estratégias Eficientes

Descubra como otimizar sua loja no WooCommerce para aumentar vendas e a satisfação do cliente. Estratégias e dicas eficazes!
Elementor

Elementor vs. Outros Construtores de Página: Qual a Melhor Escolha para o seu Site?

Construtores de Página: Descubra as vantagens do Elementor em comparação com outros construtores e encontre a ferramenta ideal para você.