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

Html – How can i vertically align columns in a table using liquid

i have been browsing here for probably 10 years, dont know how it took this long to make an account to ask my own question. Here it is:

I have the following liquid code:

<table data-mce-fragment="1" width="100%">
<td data-mce-fragment="1" style="width: 50%;">{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems' }} Windows Compatible Operating Systems<br><br>
{{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}</td>
<td data-mce-fragment="1" style="width: 50%;">{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems' }} Mac Compatible Operating Systems<br><br>
{{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}</td>
</tr>
</tbody>
</table>

It is outputting like my attached image.

It is vertically unaligned.

Question is, how can I get the windows column vertically align to top with the mac column?

Im assuming Mac column is higher up due to longer text.

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    That worked great!. Next request.

    Here is updated code:

    <body>
  <table data-mce-fragment="1" width="100%" height="100%">
    <tbody>
      <tr>
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems' }} &nbsp;<b>Windows Compatible Operating Systems</b><br><br>
        {{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}
        </td>
        
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems' }} &nbsp;<b>Mac Compatible Operating Systems</b><br><br>
        {{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

    New screenshot attached.

    How can I get each the windows and mac headers vertically aligned center with their corresponding image?

    enter image description here


  2. 0

    I don’t know liquid Library, but you can use the below solution when your application only works on web browser.

    Use vertical-align options for each td tag. vertical-align option might work if you didn’t change td tag’s display property.

    (documentation for vertical-align, https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)

    <body>
  <table data-mce-fragment="1" width="100%" height="100%">
    <tbody>
      <tr>
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems' }} Windows Compatible Operating Systems<br><br>
        {{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}
        </td>
        
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems' }} Mac Compatible Operating Systems<br><br>
        {{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}
        </td>
      </tr>
    </tbody>
  </table>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search