Place two tables next to a div

Asked

Viewed 482 times

2

I have this code where creates two tables and a div and the tables are below the div:

<div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">
                <div id="calendar" class="col-centered">
                </div>
            </div>
  <table border="1">
  <Legend><strong>Dias de Atendimento</strong></Legend>
  <tr>
    <th>Dia</th>
    <th>Hora</th>
  </tr>
  <tr>
    <td>Terça-Feira</td>
    <td>14:30 às 17:30</td>
  </tr>
  <tr>
    <td>Quinta-Feira</td>
    <td>10:30 às 12:00</td>
  </tr>
  </table>
  <table border="1">
  <Legend><strong>Legenda</strong></Legend>
  <tr>
    <th>Cores</th>
    <th>Descrição</th>
  </tr>
  <tr>
    <td>Vermelho</td>
    <td>Indisponível</td>
  </tr>
  <tr>
    <td>Amarelo</td>
    <td>Vagas (sob Consulta)</td>
  </tr>
  <tr>
    <td>Laranja</td>
    <td>Alterações</td>
  </tr>
  </table>  
        </div>

Intended to place the tables next to the div as shown in the image with the empty square in red next to the div: inserir a descrição da imagem aqui

html

  • Dude is missing a tag </div> at the end of your code! Plus what is the version of Bootstrap at 3 or 4? You just want one table next to the other is this?

  • @hugocsl, I want the Call Day and Legend tables to be next to the calendar, in the empty square marked in red. It’s version 3. There’s no missing tag.

  • And no answer I gave are you not?? Just open the snippet of the answer...

1 answer

0


Here’s an example that can help you. I’ve put a style where the calendar tag is just to help you and see how it can look.

In addition to a tag <div> which was open without closing, you also have some semantic problems in HTML

The tag <legend> is inside the <table>, the tag <legend> should be used together with the tag <fieldset> and not on the table, I suggest you use one or <h5> in place. The tag <strong> to put bold is wrong, for this use the tag <b>, or don’t use any of them because the tag H already has bold by default in most browsers...

See an example that can help you. Need to Show as "Whole page" to see the result since you are using col-lg-*

#calendar {
    width: 100%;
    height: 200px;
    background-color: #f00;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">

    <div class="row ">

        <div class="col-lg-4 ">
            <Legend><strong>Dias de Atendimento</strong></Legend>
            <table border="1">
                <tr>
                    <th>Dia</th>
                    <th>Hora</th>
                </tr>
                <tr>
                    <td>Terça-Feira</td>
                    <td>14:30 às 17:30</td>
                </tr>
                <tr>
                    <td>Quinta-Feira</td>
                    <td>10:30 às 12:00</td>
                </tr>
            </table>
            <Legend><strong>Legenda</strong></Legend>
            <table border="1">
                <tr>
                    <th>Cores</th>
                    <th>Descrição</th>
                </tr>
                <tr>
                    <td>Vermelho</td>
                    <td>Indisponível</td>
                </tr>
                <tr>
                    <td>Amarelo</td>
                    <td>Vagas (sob Consulta)</td>
                </tr>
                <tr>
                    <td>Laranja</td>
                    <td>Alterações</td>
                </tr>
            </table>
        </div>
        <div class="col-lg-8 text-center">
            <div id="calendar" class="col-centered">
            </div>
        </div>

    </div>

</div>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.