Skip to main content
ashleighs112417
Known Participant
July 20, 2017
Answered

Made a 1 row, 2 column table, how to insert images?

  • July 20, 2017
  • 1 reply
  • 6545 views

I am SO new to this, and i have no idea what i'm doing really, and i feel like ive burned through every youtube tutorial trying to figure this out.....

here is the code for the 1 row 2 column table:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tbody>

    <tr>

      <td> </td>

      <td> </td>

    </tr>

  </tbody>

</table>

I want it to look like the attached picture. Each is its own piece though, and i will attach picture to just show you that as well.
When i select the first table, i go to my tab and click insert>image
but obviously this has to be wrong.....
I am getting large white space all around the image.
Also, i cant seem to stack the social media icons on top of the larger block holding the number and website. they just keep appearing side by side.
Any help is appreciated. Thank you.

This topic has been closed for replies.
Correct answer Jon Fritz

Take out the table's width, or change it to the total of the widths of the images in pixels.

100% means the table will be 100% of the width of its parent element (or the viewport) so when you're adding an image, the table is still 100% width, even if the image isn't.

In the right side cell, place a second table, 2 rows and 1 column then drop your social media icons into the top one and the phone number into the bottom one. Something like...

<table width="???????" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td>Big image here</td>

    <td><table border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td>social images here</td>

        </tr>

        <tr>

          <td>phone number image here</td>

        </tr>

      </table></td>

  </tr>

</table>


For the width="??????" make sure the table width is enough to fit all of the images horizontally. If you set the width to something lower than that number, the social icons will stack.

1 reply

Nancy OShea
Community Expert
Community Expert
July 20, 2017

Why are you using tables?  Is this going to be a web site or an email?

YouTube is not the most reliable resource.  Too often the tutorials are outdated or presenters are patently wrong.   There is no peer review or quality control process on YouTube.  Find tutorials on Lynda.com or Adobe TV where content is checked for accuracy.

Nancy

Nancy O'Shea— Product User & Community Expert
ashleighs112417
Known Participant
July 20, 2017

Because this is the process my manager had instructed me to do. So im doing it. But thanks...

ashleighs112417
Known Participant
July 20, 2017

Take out the table's width, or change it to the total of the widths of the images in pixels.

100% means the table will be 100% of the width of its parent element (or the viewport) so when you're adding an image, the table is still 100% width, even if the image isn't.

In the right side cell, place a second table, 2 rows and 1 column then drop your social media icons into the top one and the phone number into the bottom one. Something like...

<table width="???????" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td>Big image here</td>

    <td><table border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td>social images here</td>

        </tr>

        <tr>

          <td>phone number image here</td>

        </tr>

      </table></td>

  </tr>

</table>


For the width="??????" make sure the table width is enough to fit all of the images horizontally. If you set the width to something lower than that number, the social icons will stack.


sorry i suck so bad at this!!!!!! But why is there now a space between the social icons and phone number...?