1

Como fazer tabelas mais complexas em html e utilizar o bootstrap? pesquisei pela web a fora, mas não consegui compreender muito bem. como eu posso criar essa tabela em HTML, e usar bootstrap. inserir a descrição da imagem aqui

Alguém poria me dar pelo menos um norte, para q eu possa criar essa tabela em HTML, e usar as estilizações do bootstrap

2

1 Resposta 1

2

Aqui mesmo na documentação tem descrito isso https://getbootstrap.com/docs/4.3/content/tables/#bordered-table na verdade vc tem que usar colspan ou rowspan dependendo de como quer expandir as células da tabela, e isso não tem nada a ver com o Bootstrap em si...

inserir a descrição da imagem aqui

Qui tem um exemplo

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

</head>

<body>

   
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Heading</th>
                        <th scope="col" colspan="3" class="text-center">Heading</th>
                        <th scope="col">Heading</th>
                        <th scope="col">Heading</th>
                        <th scope="col">Heading</th>
                        <th scope="col">Heading</th>
                        <th scope="col">Heading</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </tbody>
            </table>
        </div>
    

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

2
  • Pois é, o meu problema maior, é na estruturação do html, para montar essa table 28/08/2019 às 14:49
  • 1
    @RafaelPassos ta ai o exemplo, vc pode começar a sua a partir dele. E estudo sobre colspan e rowspan. Isso vai te ajudar pt.stackoverflow.com/questions/400703/…
    – hugocsl
    28/08/2019 às 14:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .