0

I want to create a table, the second column (which is represented by a single cell) is put in the center of a page. I am trying to use calc() function in order to do that, however it does not work. Here is my code:

.bio {
  text-align: center;
  margin: 0 auto;
  width: calc(100% - 200px);
}

img {
  height: 200px;
}
<table cellspacing="20">
  <tr>
    <td>
      <img src="https://placehold.it/200x200" alt="image of me">
    </td>
    <td class="bio">
      <h1>Heading</h1>
      <p>Some text</p>
    </td>
  </tr>
</table>

What's wrong with my code?

Bucket
  • 7,415
  • 9
  • 35
  • 45
ryabchenko-a
  • 67
  • 7
  • Is there any particular reason for using a table element? – Turnip Jul 14 '20 at 13:38
  • 2
    Tables should not be used for layout unless you are making an email template - this looks like it is layout, in which case you should use css instead. – Pete Jul 14 '20 at 13:39
  • but if you insist on using a table, you just need to give the first column a width of 200px, take the width off the second column and add a width of 100% to the table (if I'm understanding your problem correctly) – Pete Jul 14 '20 at 13:43
  • Turnip and Pete, Thank you for your suggestions. What I am doing is an exercise (which also shows how the pages were structured before the CSS), and I wanted to modify the layout a bit, so yes, I insist on using tables. – ryabchenko-a Jul 14 '20 at 13:57

1 Answers1

0

table {
  display: flex;
  justify-content: center;
  text-align: center;
}

img {
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
}
<table cellspacing="20">
  <tr>
    <td>
      <img src="https://placehold.it/200x200" alt="image of me">
    </td>
    <td class="bio">
      <h1>Heading</h1>
      <p>Some text</p>
    </td>
  </tr>
</table>
benhatsor
  • 1,863
  • 6
  • 20