Put two tables next to a div

Question

Put two tables next to a div

Navigation

#1 by (0 votes)

2

I have this code where it 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>

I wanted to put the tables next to the div as shown in the image with the empty square in red next to the div:

html

asked by anonymous 06.09.2018 / 16:00

1 answer

Configure API by Action MVC5 Problem fetching the most recent result of a group in a query in two tables with PHP and MySQLi

score 0 · Accepted Answer

Here is an example that can help you. I put a style where the calendar tag is just to help you and visualize how you can stay.

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

The <legend> tag is within <table> , the <legend> tag should be used along with the <fieldset> tag and not the table, so I suggest you use one or <h5> instead. The <strong> tag to put bold is wrong, so use the <b> tag, or do not use any of them because the H tag already has bold by default in most browsers ...

See an example that might help you. You need to View "All 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>