Wanted to make it 2 rows & 2 columns but end up getting weird response-CodePudding

<tr id="section-6465178" >

  <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
    <!-- Button : BEGIN -->

    <header style="padding: 30px;
  text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>


    <section >
      <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 200px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
        <p>Earn Points</p>
        <p> Collect 1 point for every S$1 spent online</p>
    </section>
    </th>
    <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 200px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
      <p>Get Rewarded</p>
      <p> Enjoy special rewards by redeeming your accumulated FOB points</p>
    </th>
    <section >
      <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
        <p>Early Access</p>
        <p>Get early access to new product launches and sales promotions.</p>
      </th>
    </section>

    <section >
      <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
        <p>Tier Benefits</p>
        <p>Advance to next tier for more benefits and discounts.</p>
      </th>
    </section>
  </table>
  </th>
</tr>

I wanted to make it 2 rows 2 columns but seems like it has a conflict. Previously, I've tried div tags but couldn't work too.

result:

CodePudding user response：

You can stack the components by adding two table rows <tr> - so there are two table head (th) elements inside each new row.

The inline CSS seems to be causing some problems too. I didn't have time to clean it all up but just moved the important parts over to a separate CSS. Still needs more styling in order to get the font sizes right and import the Lora font correctly. Of course you could get good results with just positioned divs too instead of tables, maybe someone will post that solution.

tr, th {
  margin: 0 auto;
  text-align: center;
}

table {
  margin: 0 auto;
  text-align: center;
}

header {
padding: 30px;
text-align: center;
font-size: 35px;
color: #8c734b;
}

header.span {
  font-size: 20px;
  font-family: Lora;
}

th {
  mso-line-height-rule: exactly;
  border-radius: 1px;
  padding-top: 50px;
  padding-bottom: 20px;
  /* padding-left: 30px;
  padding-right: 200px; */
}

<tr id="section-6465178" >
  <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
    <!-- Button : BEGIN -->

    <header ><span >More on the friends of Bynd(FOB) Loyalty Programme</span></header>

    <section >
      
      <tr>
      
      <th ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
        <p>Earn Points</p>
        <p> Collect 1 point for every S$1 spent online</p>
   
    </th>
    </section>
  
   
    <th ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
      <p>Get Rewarded</p>
      <p> Enjoy special rewards by redeeming your accumulated FOB points</p>
  </th>
  </tr>

    <section >
    
    <tr>
      <th ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
        <p>Early Access</p>
        <p>Get early access to new product launches and sales promotions.</p>
      </th>
    </section>

    <section >
      <th ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
        <p>Tier Benefits</p>
        <p>Advance to next tier for more benefits and discounts.</p>
      </th>
    </tr>
    
    </section>
  </table>
  </th>
</tr>

CodePudding user response：

I found some errors on the structuring of the table. If you wonna create a table with 2 rows and 2 columns, here is a simple example:

<table>
  <tr>
    <td>Company</td>
    <td>Contact</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
  </tr>
</table>

Here some mistake:

The <tr></tr> should be inside the table. Probably the <tr></tr> was passed cause of is outside the table.
You probably forgot a <section></section> tag (not sure if it was wanted)
You have used only one <tr></tr> tag instead two.

Here is the solution code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
          <!-- Button : BEGIN -->
      
        <header style="padding: 30px;
        text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
      
        <tr id="section-6465178" >
            <section >
                <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 200px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
                    <p>Earn Points</p>
                    <p> Collect 1 point for every S$1 spent online</p>
                </th>
            </section>
            <section >
                <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 200px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
                    <p>Get Rewarded</p>
                    <p> Enjoy special rewards by redeeming your accumulated FOB points</p>
                </th>
            </section>
        </tr>
        <tr>
            <section >
                <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
                    <p>Early Access</p>
                    <p>Get early access to new product launches and sales promotions.</p>
                </th>
            </section>
      
            <section >
                <th  style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
                    <p>Tier Benefits</p>
                    <p>Advance to next tier for more benefits and discounts.</p>
                </th>
            </section>
        </tr>
    </table>
      
</body>
</html>

If it keeps getting messy then the problem is in your css file. I hope it helped you :)