styling a company logo and text with simple HTML

July 30, 2023

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:

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.

>Solution :

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>