HTML table vertical align text

Question

I have the following table and I am trying to vertically align the text for "BEST PRICE PROMISE", "100% MONEY BACK GUARANTEE" etc so they are vertically aligned with the tick marks and I also want to remove the padding at the bottom of these cells?

Can someone please tell me how I can do this?

The url is https://ffe-dev.flowersforeveryone.co.za/sea-point-flower-delivery/

Thanks

<table class="table_seapoint" border="1px">
    <tbody>
    <tr>
        <td rowspan="10">
            <img style="display:block;"
                 width="309px"
                 height="324px"
                 src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/smile_sea_point.jpg"
                 alt="Sea Point Flowers">
        </td>
        <td colspan="4">
            <h1 style="font-weight:lighter;font-size:26px;">
                STUNNING LUXURY FLOWER BOUQUETS
            </h1>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <h1 style="font-weight:lighter;font-size:26px;">
                FRESHLY CUT AND HAND-DELIVERED IN
            </h1>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <h1 style="font-weight:lighter;font-size:26px;">
                SEA POINT AND ACROSS THE WESTERN CAPE
            </h1>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg"
                 alt="Flowers Sea Point"
                 width="50"
                 height="50">
        </td>
        <td style="padding-left: 10px;" colspan="3">
            <h2 style="font-weight:lighter;font-size:22px;">BEST PRICE PROMISE</h2>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg"
                 alt="Flowers Sea Point" width="50" height="50">
        </td>
        <td align="left" style="padding-left: 10px;" colspan="3">
            <h2 style="font-weight:lighter;font-size:22px;">
                100% MONEY BACK GUARANTEE
            </h2>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg"
                 alt="Flowers Sea Point" width="50" height="50">
        </td>
        <td align="left" style="padding-left: 10px;" colspan="3">
            <h2 style="font-weight:lighter;font-size:22px;">
                QUICK AND EASY ONLINE ORDERING
            </h2>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg"
                 alt="Flower Delivery Sea Point" width="50" height="50">
        </td>
        <td align="left" style="padding-left: 10px;" colspan="3">
            <h2 style="font-weight:lighter;font-size:22px;">
                24/7 CUSTOMER SERVICE
            </h2>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tick_mark.svg"
                 alt="Flower Delivery Sea Point" width="50" height="50">
        </td>
        <td align="left" style="padding-left: 10px;" colspan="3">
            <h2 style="font-weight:lighter;font-size:22px;">
                HAPPINESS ASSURED
            </h2>
        </td>
    </tr>
    <tr>
        <td colspan="4" nowrap="nowrap">
            <h1 style="font-weight:lighter;font-size:26px;">
                ORDER BEFORE 12 NOON FOR NEXT DAY DELIVERY
            </h1>
        </td>
    </tr>
    <tr>
        <td align="right">
            <img class="alignnone size-full wp-image-4385"
                 src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/telephone.svg"
                 alt="" width="50" height="50"/>
        </td>
        <td align="left" nowrap="nowrap">
            <b> 079 885 9609 </b>
        </td>
        <td align="right">
            <img class="alignnone size-full wp-image-4386"
                 src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope.svg"
                 alt="" width="50" height="50"/>
        </td>
        <td align="left">
            <b> hello@flowersforeveryone.co.za </b>
        </td>
    </tr>
    </tbody>
</table>

Answer 1

Align td vertically in middle and remove h2 margin-bottom

td, th{vertical-align: middle;}
h2{margin-bottom: 0}

TO make envelope clickable add an anchor tag to envelope image

<tr>
<td align="right"><img class="alignnone size-full wp-image-4385" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/telephone.svg" alt="" width="50" height="50" scale="0"></td>
<td align="left" nowrap="nowrap"><b> 079 885 9609 </b></td>
<td align="right">

<a href="mailto:"><img class="alignnone size-full wp-image-4386" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope.svg" alt="" width="50" height="50" scale="0"></a></td>
<td align="left"><b> hello@flowersforeveryone.co.za </b></td>
</tr>

Answer 2

The default margin-bottom of <h2> is causing this. If you set the margin-bottom to 0 and add vertical-align: middle to your data cells ( <td> ) it should be aligned in the middle.