Как изменить расположение таблицы в html?

Question

Как с помощью чистого html переместить две нижние таблицы, чтобы они были расположены справа, параллельно двум верхним? код:

<html>
    <head>
        <title>HTML таблицы</title>
    </head>
    <body bgcolor='#B3C8DF'>
        <center>
            <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
                <tr>
                    <th rowspan='3'>1</th>
                    <th colspan='2'>2</th>
                </tr>
                <tr>
                    <td align='center'><b>5</b></td>
                    <td align='center'><b>6</b></td>
                </tr>
            </table>
                <br>
            <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
                <tr>
                    <th colspan='2'>1</th>
                    <th rowspan='2'>2</th>
                </tr>
                <tr>
                    <td align='center' colspan='2'><b>3</b></td>
                </tr>
                <tr>
                    <td align='center' colspan='3'><b>5</b></td>
                </tr>
            </table>
                <br>
            <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
                <tr>
                    <th colspan='3'>1</th>
                </tr>
                <tr>
                    <td align='center' rowspan='3'><b>3</b></td>
                    <td align='center' colspan='2'><b>4</b></td>
                </tr>
                <tr>
                    <td align='center' colspan='2'><b>6</b></td>
                </tr>
            </table>
                <br>
            <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
                <tr>
                    <th colspan='3'>1</th>
                </tr>
                <tr>
                    <td align='center' colspan='2'><b>3</b></td>
                    <td align='center' colspan='2'><b>4</b></td>
                </tr>
                <tr>
                    <td align='center'colspan='3'><b>5</b></td>
                </tr>
            </table>
        </center>
    </body>
</html>

Answer 1

.container {display: flex; width: 100%; max-width: 340px; margin: 0 auto;}
.table {width: 50%;}

table {margin-bottom: 10px;}

<div class="container">
  <div class="table">
    <center>
      <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
        <tr>
          <th rowspan='3'>1</th>
          <th colspan='2'>2</th>
        </tr>
        <tr>
          <td align='center'><b>5</b></td>
          <td align='center'><b>6</b></td>
        </tr>
      </table>
      <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
        <tr>
          <th colspan='2'>1</th>
          <th rowspan='2'>2</th>
        </tr>
        <tr>
          <td align='center' colspan='2'><b>3</b></td>
        </tr>
        <tr>
          <td align='center' colspan='3'><b>5</b></td>
        </tr>
      </table>
    </center>
  </div>
  <div class="table">
    <center>
      <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
        <tr>
          <th colspan='3'>1</th>
        </tr>
        <tr>
          <td align='center' rowspan='3'><b>3</b></td>
          <td align='center' colspan='2'><b>4</b></td>
        </tr>
        <tr>
          <td align='center' colspan='2'><b>6</b></td>
        </tr>
      </table>
      <table width='150' border='2' bordercolor='black' cellspacing='0' cellpadding='8'>
        <tr>
          <th colspan='3'>1</th>
        </tr>
        <tr>
          <td align='center' colspan='2'><b>3</b></td>
          <td align='center' colspan='2'><b>4</b></td>
        </tr>
        <tr>
          <td align='center' colspan='3'><b>5</b></td>
        </tr>
      </table>
    </center>
  </div>
</div>

БЛОГ НА HUSL

Как изменить расположение таблицы в html?

Ответы (1 шт):