CODEWITHSUNDEEP
htmlcsshtml-tableformatalignment
Hamza Waqar
Hamza Waqar

Reputation: 25

How to align tables along side text in html CSS

This is what I want my output to be

    <table border="1" style="border-collapse:collapse">
        <tr>
            <td width="35" height="20"></td>
            <td width="35" height="20"></td>
        </tr>
    </table>

I know that I've to create three tables using above code side by side but the question is how can I use hyphen between them and write DOB text on the left side of the first tables. This is my assignment and I've to do this using tables only.

Upvotes: 1

Views: 367

Answers (1)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Flex boxs would be the best solution.

First you need to wrap all of the elements in a div

The we can turn that div into a flex container with display:flex

We use align-items and justify-content`` for the alignment of the flex items.

Hope this helps:)

#dob {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 360px;
}

#dob h4{
  margin:0;
}
<div id='dob'>
  <h4>Date of Birth:</h4>
  <table border="1" style="border-collapse:collapse">
    <tr>
      <td width="35" height="20"></td>
      <td width="35" height="20"></td>
    </tr>
  </table>
  <span>-</span>
  <table border="1" style="border-collapse:collapse">
    <tr>
      <td width="35" height="20"></td>
      <td width="35" height="20"></td>
    </tr>
  </table>
  <span>-</span>
  <table border="1" style="border-collapse:collapse">
    <tr>
      <td width="35" height="20"></td>
      <td width="35" height="20"></td>
    </tr>
  </table>

</div>

Upvotes: 3

Related Questions