Estrutura HTML

Construa Tabelas Incríveis com HTML em 12 Horas

Sobre a Aula

Chegamos no final do curso e para colocar em teste o que aprendemos vamos criar um projeto de uma tabela complexa.

vou guiá-lo passo a passo na criação de uma tabela para um estoque de roupas usando HTML, CSS e JavaScript. Vamos dividir isso em três partes: a estrutura HTML, o estilo CSS e a interatividade com JavaScript.

Comecemos criando a estrutura básica do HTML. Teremos dois blocos principais, um para a entrada de dados e outro para exibir o estoque.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Estoque de Roupas</title>
</head>
<body>
    <!--Entrada de dados-->
    <h1>Adicionar Produtos</h1>
    <div class="input-section">
        <label for="productID">ID:</label>
        <input type="text" id="productID">

        <label for="productName">Nome:</label>
        <input type="text" id="productName">

        <label for="productDescription">Descrição:</label>
        <input type="text" id="productDescription">

        <label for="productPrice">Preço:</label>
        <input type="text" id="productPrice">

        <button onclick="addToStock()">Adicionar ao Estoque</button>
    </div>

    <!--Armazenamento dos Produtos-->
    <div class="stock-section">
        <h2>Estoque</h2>
        <table id="stockTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nome</th>
                    <th>Descrição</th>
                    <th>Preço</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <!-- A tabela de estoque será preenchida dinamicamente com JavaScript -->
        </table>
    </div>
  <script src="script.js"></script>
</body>
</html>

Próximo passo, vamos dar cores a esse projeto.

Siga-me

Entrar na conversa