Question 219196 in Html Question posted in
Some basic documentation can be found here.

styling a company logo and text with simple HTML

I want to put my company logo and text side by side using simple HTML. I dont want to use flexbox. I tried this in order to achieve it :

  <table style="background-color: cadetblue;width:100%;padding:10px">
            <tr>
                <td rowspan="3">
                    <img src="logo.png" height="80" width="80" />
                </td>
            </tr>
            <tr>
                <td class="name1">This is some text</td>
            </tr>
            <tr>
                <td class="name2">This is some text1</td>
            </tr>
        </table>

This is what I see with above HTML:

enter image description here

This is the style sheet:

<style>
  .name1 {
            font-size: 25px;
            color: #e9c46a;
           
        }

        .name2 {
            font-size: 25px;
            color: white;
        }
</style>

Everything looks good except, I want to reduce the space between logo and text. How can I do that. I cannot use flexbox.

Tags:

3

Answers


  1. 0

    To specify where content should be display in your td
    You can use attributed valign and align
    for example like

    <td valign="top" align="right">
<img src="yourImage">
</td>

    valign determine vertical position
    and
    align determine horizontal position

    Login or Signup to reply.
  2. 0

    You could try using the translateX CSS Property:

    Here I added the class logo to the image so I can apply the CSS property to it.

    .logo {
  transform: translateX(15vw);
}

.name1 {
  font-size: 25px;
  color: #e9c46a;
}

.name2 {
  font-size: 25px;
  color: white;
}
    <table style="background-color: cadetblue;width:100%;padding:10px">
  <tr>
    <td rowspan="3">
      <img src="logo.png" height="80" width="80" class="logo" />
    </td>
  </tr>
  <tr>
    <td class="name1">This is some text</td>
  </tr>
  <tr>
    <td class="name2">This is some text1</td>
  </tr>
</table>

    Check this w3schools page that explains 2d transforms.

    Link to Can I use

    Login or Signup to reply.
  3. 0

    You can simply add a width="80" HTML attribute to the leftmost td you have so the size of the td will fit the size of the logo img.

    <table style="background-color: cadetblue;width:100%;padding:10px">
            <tr>
                <td rowspan="3" width="80">
                    <img src="logo.png" height="80" width="80" />
                </td>
            </tr>
            <tr>
                <td class="name1">This is some text</td>
            </tr>
            <tr>
                <td class="name2">This is some text1</td>
            </tr>
        </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search