html change table row height

Question

I have a table I've created and I want to minimize the size of each row so that there's no white space under the first 3 lines - "Stunning luxury flower bouquets" etc. and also no white space under "ORDER BEFORE 12PM FOR NEXT DAY DELIVERY"

Can someone please tell me how to do this? I also want to move the table so that it starts where the logo is. How do I do this as well please?

You can view the table here - https://ffe-dev.flowersforeveryone.co.za/sea-point/

The code is -

table,
th,
td,
tr {
  border: 1px solid black;
}

h1 {
  font-size: 22px;
}

<html>

<head>
  <div class="text1">
    <table class="table_seapoint">
      <tr>
        <td rowspan="10"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/test_image.jpg" alt="" width="250" height="219" /> :</td>
        <td colspan="4">
          <h1 style="font-weight:lighter">STUNNING LUXUARY FLOWER BOUQUETS</h1>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <h1 style="font-weight:lighter">FRESHLY CUT AND HAND DELIVERED</h1>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <h1 style="font-weight:lighter">IN SEA POINT AND ACROSS THE WESTERN CAPE</h1>
        </td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="valign size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">BEST PRICE PROMISE </td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">100% MONEY BACK GUARANTEE</td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">QUICK AND EASY ONLINE ORDERING </td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">24/7 CUSTOMER SUPPORT</td>
      </tr>
      <tr>
        <td valign="top"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4337" /></td>
        <td valign="top" colspan="3" style="padding-left: 10px;">HAPPINESS ASSURED</td>
      </tr>
      <tr>
        <td colspan="4">
          <h1 style="font-weight:lighter">ORDER BEFORE 12PM FOR NEXT DAY DELIVERY</h1>
        </td>
      </tr>
      <tr>
        <td valign="top"> <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/phone-1.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4385" /> </td>
        <td valign="top" nowrap style="padding-left: 10px;">
          <B> 079 885 9609 </B>
        </td>
        <td valign="top" style="padding-left: 30px;"> <img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope-1.jpg" alt="" width="25" height="25" class="alignnone size-full wp-image-4386" /></td>
        <td valign="top" style="padding-left: 10px;"><b> hello@flowersforeveryone.co.za </b></td>
      </tr>
    </table>
</head>

</div>

<body>
  [recent_products per_page="3" columns="3" orderby="title" order="ASC" paginate="true" category="featured" width=300px]
</body>

</html>

(I'm going to get rid of the border once I get this thing right)

Your html wants to go within the body tags. Also you unless this is an email template, you should not use tables for layout — Pete, Aug 05 '19 at 10:05
Why isn't a table good? I thought it was the easiest way to deal with the alignment of these items? The reason I didn't put html in the body tag is because I am trying to get the photo gallery full size (it's not working yet).. but i'm trying to do this - https://stackoverflow.com/questions/57183774/wordpress-resizing-featured-products-on-a-second-page/57184253?noredirect=1#comment101197651_57184253 — Michelle, Aug 05 '19 at 10:16
Html needs to go within the body tag otherwise it is invalid (unless you are injecting it with js) and [this post](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) should answer your questions about tables — Pete, Aug 05 '19 at 10:25

score 1 · Answer 1 · answered Aug 05 '19 at 10:04

1

Remove margin-bottom for H1

.widget-area h1 {
  font-size: 22px;
  margin-bottom:0;
}

answered Aug 05 '19 at 10:04

Lalji Tadhani

14,041
3
23
40

score 1 · Answer 2 · answered Aug 05 '19 at 10:05

1

Add this css

td h1 {
    margin-bottom: 0px !important;
}

//start from top just below the logo

div#primary {
    margin-top: 0px !important;
}

answered Aug 05 '19 at 10:05

SHUBHAM SINGH

371
3
11

score 1 · Accepted Answer · answered Aug 05 '19 at 10:07

1

You need to remove "margin-bottom" for the first three lines.

table.table_seapoint h1 {
    margin-bottom: 0px;
}

answered Aug 05 '19 at 10:07

Harmenx

938
1
5
13

Cool.. thanks! How would I move the whole table across to the right? – Michelle Aug 05 '19 at 10:18

score 1 · Answer 4 · answered Aug 05 '19 at 10:09

1

remove the margin-bottom of h1 tags. hope this helps :)

answered Aug 05 '19 at 10:09

sumeshsn1

756
5
13

score 0 · Answer 5 · answered Aug 05 '19 at 10:06

The lsx.css file having space for head tags.. so u can add this css code..

css

.content-area h1, 
.content-area h2, 
.content-area h3, 
.content-area h4, 
.content-area h5, 
.content-area h6, 
.content-area .widget-title, 
.widget-area h1, .widget-area h2, 
.widget-area h3, .widget-area h4, 
.widget-area h5, .widget-area h6, 
.widget-area .widget-title {
 margin-bottom:0px;
}

html change table row height

5 Answers5