Aligning a table at the center of another table

Frustration has been brewing within me all week as I grapple with the task of sending out an important emailer soon. The challenge lies in aligning these product images next to their descriptions at the center, a feat that seems impossible to achieve within the confines of the template passed on by the agency.

I've experimented with various display properties and tried numerous other techniques like adding top padding (which seems effective visually but fails during testing as it stubbornly remains attached to the top of the table). This HTML-based emailer contains inline CSS elements, and although there is a specified class for the tables, the 'global' CSS attribute needed seems to be elusive within this cluttered HTML code.

Admittedly, I lack experience in handling such tasks, so apologies if my inquiry lacks clarity. Attached along are screenshots highlighting the issue at hand.

The persistent problem can be seen in how the product images adamantly remain aligned to the top of the table, defying my every attempt to centralize them alongside the relevant descriptions:

.

<tr>
  <td align="center" style="padding:0px 0px 50px 0px">
    <table align="center" border="0" cellpadding="0" cellspacing="0" class="m-dw" dir="rtl" width="540">
      <tbody>
        <tr>
          <th align="left" class="m-db m-dw" dir="ltr" valign="top" width="270">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="center"><img align="middle" alt="" src="https://d15knpe7ll4tpk.cloudfront.net/users/assets/139/images/649_EZVIZ_Camera_Range_Launch/cc599-250.png" style="width: 250px; max-width: 258px; display: block;" width="250"></td>
                </tr>
              </tbody>
            </table>
          </th>
          <th align="left" class="m-db m-dw" dir="ltr" valign="middle" width="270">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="center" class="p-t20">
.
.
. (remaining content unchanged)

htmlcsshtml-table

Answer №1

Opt for 

style="vertical-align: middle;"
over valign="top" on the th that holds the sub-table with the image:

<tr>
  <td align="center" style="padding:0px 0px 50px 0px">
    <table align="center" border="0" cellpadding="0" cellspacing="0" class="m-dw" dir="rtl" width="540">
      <tbody>
        <tr>
          <th align="left" class="m-db m-dw" dir="ltr" style="vertical-align: middle;" width="270">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="center"><img align="middle" alt="" src="https://d15knpe7ll4tpk.cloudfront.net/users/assets/139/images/649_EZVIZ_Camera_Range_Launch/cc599-250.png" style="width: 250px; max-width: 258px; display: block;" width="250"></td>
                </tr>
              </tbody>
            </table>
          </th>
          <th align="left" class="m-db m-dw" dir="ltr" valign="middle" width="270">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="center" class="p-t20">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tbody>
                        <tr>
                          <td style="font-family: Helvetica, Arial, sans-serif; font-size:18px; font-weight:bold; line-height:24px; color:#004b93; text-align:left;"><strong><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">CC599<br>
                                                                                                        EZVIZ C3W Huskey Air Wi-Fi Camera 0</span></span><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">1</span></span><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;">80p 2.8mm Fixed Lens</span></span></strong></td>
                        </tr>
                        <tr>
                          <td style="padding:18px 0px 0px 0px; font-family: Helvetica, Arial, sans-serif; font-size:10.16px; font-weight:normal; line-height:16.9px; color:#; text-align:left;"><strong><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px;"><span style="color:#616262; font-weight:bold">Features:</span></span></span></strong>
                            <ul>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px;"><span style="color:#616262; font-weight:">Wi-Fi Bullet Camera</span></span>
                                </span>
                              </li>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">1080p Resolution</span></span>
                                </span>
                              </li>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">Stand-Alone Camera</span></span>
                                </span>
                              </li>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">Two-way audio up to 5 meters</span></span>
                                </span>
                              </li>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">30m IR Illumination</span></span>
                                </span>
                              </li>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">2.8mm Fixed Lens</span></span>
                                </span>
                              </li>
                              <li><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#696969;"><span style="font-size:13px;">IP66</span></span>
                                </span>
                              </li>
                            </ul>
                            <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:13px; color:#696969;">Hikvision code: CS-CV310-A0-1B2WFR (2.8mm)</span></span>
                          </td>
                        </tr>
                        <!-- Button:: change/replace the button URL twice -->
                        <tr>
                          <td align="left" style="padding:20px 0px 0px 0px">
                            <table align="left" border="0" cellpadding="0" cellspacing="0" width="115">
                              <tbody>
                                <tr>
                                  <td align="center">
                                    <div>
                                      <!--[if mso]>
                                                                                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f" fillcolor="#0a4a93">                                                                                      <w:anchorlock/>                                                                                     <center>                                                                                        <![endif]--><a href="#" style="background-color:#0a4a93;color:#ffffff;display:inline-block;font-family: Helvetica, Arial, sans-serif;font-size:12.8px;font-weight:bold; letter-spacing:0.50px; text-transform:uppercase; line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;"
                                        target="_blank">Order now </a>
                                      <!--[if mso]>
                                                                                        </center>                                                                                       </v:rect>                                                                                       <![endif]-->
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                        <!-- End Button -->
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </th>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

Please note: The cell containing the sub-table is a th in your code, but semantically, this doesn't make sense - it certainly doesn't contain a header of any sort, which is what th is typically used for.

Additionally, I'm unsure why there is a nested table with only one row and cell - you could instead place the image directly into the parent cell (which I referred to as a th, although it should be a td) and center it within that space.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The utilization of `ngSwitch` in Angular for managing and displaying

I am brand new to Angular and I'm attempting to implement Form Validation within a SwitchCase scenario. In the SwitchCase 0, there is a form that I want to submit while simultaneously transitioning the view to SwitchCase 1. The Form Validation is fun ...

htmlangulartypescript

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

htmlcssangularangular-material

Creating an Interactive Image Gallery with PHP

I need help merging my gallery template with my PHP code to display images fetched from a database. The gallery code is provided below: <body> <section class="gallery-block cards-gallery"> <div class="container&qu ...

phphtmlmysqlmysqlibootstrap-4

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

HTML: <html> <head> <body onload="document.getElementById('a').style.display='block';"> <div id="a" align="center" onclick="document.location.reload();" style="display: block; cursor: pointer;"> <img width="9 ...

javascripthtmlcssseleniumselenium-webdriver

What is the best way to display a description overlay on an adjacent image when hovering over it?

Seeking assistance or guidance in the right direction. I have a desire to showcase a grid of images with hover-over functionality for additional information, similar to what can be seen here. Could someone advise if this task is manageable with pure CSS ...

jquerycsshover

"Enjoying the convenience of a stationary header while browsing on your smartphone

Hey there! I'm currently facing an issue with my website's fixed horizontal nav bar when zooming in on a mobile device. After doing some research, it seems the only solution is to implement some javascript. I came across a jquery fix (see below) ...

javascriptcssangularjsangularjs-directiveangularjs-scope

Iterating over a range of values with _.each()

Can someone help me figure out why my syntax is incorrect for applying two values from different iteratees (day.classes and event.part) on line 5? <div class="days"> <div class="headers"> <% _.each(daysOfTheWeek, function(day) { %&g ...

javascripthtmlunderscore.jsclndr.js

Can PhoneGap be used to create HTML5 applications from scratch?

Despite diligently searching through the PhoneGap website and their support group, I am still coming up empty-handed in my quest for an answer: My current project involves creating an application that functions as a pure HTML5 application, capable of runn ...

androidiphoneipadhtmlcordova

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

jqueryhtmlcss

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

phphtmlajaxdatabase

Dynamically Loading External JavaScript Files Depending on User Input

Looking for guidance on how to dynamically load a single javascript file out of several options based on user input in an HTML code. Any suggestions on how to achieve this task? Thank you! ...

javascripthtml

Move a div element as you scroll down the page

I currently have a div that appears when a user scrolls down a page. When clicked, it sends you back to the top of the page. Right now, it simply fades in and out, but I would like it to slide in from the right side of the page. Below is my existing code: ...

jquerycsshtmljquery-animate

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

javascripthtmlcss

Grammarly is seamlessly inserting padding into my body element

After setting up my website on GitHub, I ran into an issue where the Grammarly Chrome extension was automatically adding a padding-top attribute to the body tag. <body data-new-gr-c-s-check-loaded="14.1028.0" data-gr-ext-installed="" ...

htmlcsstwitter-bootstrap

The Angular Function has stopped working out of the blue following the implementation of Jquery Ajax

As a newcomer to php programming, I am facing an issue with my Angular Function not functioning properly when incorporating a jQuery ajax method post to update values in the database. Below is my angular code within HTML: <tfoot ng-app="kembalianApp" ...

phpjqueryhtmlangularjsajax

Insert a hyperlink button using InnerHtml

I am facing an issue with displaying a list item that contains a tab and a link button: <li runat="server" id="liActivityInvoices"><a href="#tabActivityInvoices">Invoices</a><asp:LinkButton runat="server" ID="btnLoadInvoice" OnClick=" ...

javascriptc#jqueryhtmlasp.net

What is the best way to toggle a div and dynamically load content into it while it's open?

I am looking to create a toggle effect where a div opens, loads a page within it, and then can be closed again. My goal is to achieve this functionality with multiple links on the page. <div id="main-nav"> <div id="menu-container"&g ...

javascriptjqueryhtmlcss

Obtaining <script> and <div> elements from Plotly with Python

Seeking advice on the best way to extract <script> and <div> tags from the HTML output generated by Plotly's offline client. Ideally looking for a built-in method, but open to creating a custom solution if needed. I have experience with B ...

pythonhtmlplotly

The Codepen demo for SemanticUI is not functioning properly

Click here to view the example on CodePen $('.ui.sidebar').sidebar({ context: $('.bottom.segment') }) .sidebar('attach events', '.menu .item'); I am currently trying to replicate this specific functiona ...

javascripthtml

Avoid reloading the page in PHP when the browser back button is clicked

I've built an HTML form where the values are passed to a second page using POST method. On the second page, I have an edit button that, when clicked, redirects back to the HTML form page with the user's typed values. However, my dilemma is figuri ...

javascriptphphtml