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 view of the Google map is filled with numerous rounded tiles

Map divided into 3x3 tiles I am looking to customize the appearance of my map and remove all spaces and rounded corners to create a seamless, undivided visual. Is there a way to modify a map tile attribute to achieve this effect? Below is the code snippet ...

javascriptcssgoogle-mapsmatrixgoogle-api

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...

javascriptjqueryhtmlcss

Using Jquery: Removing the strikethrough effect upon the second click!

Currently in the process of learning Jquery and experimenting with using a button to apply a "text-decoration" to a list item upon clicking. However, I encountered an issue where I couldn't figure out how to use the same button to remove the "text-dec ...

jquerycss

App builder shows raw HTML code instead of generating a dynamic table

I am currently working on an application that requires gathering data in a csv format from Google Sheets and importing it into App Inventor. Additionally, I need to include HTML code to display the table in a more visually appealing way. Here is what the ...

androidhtmlgoogle-sheetssamsung-mobileapp-inventor

Updating a Specific Database Entry in Django Using Multiple Field Values

Hey there, I'm still learning the ropes and haven't had much time to really dive into it yet. My end goal is to create a "check-in/check-out" system by updating a timestamp from NULL to the current time based on employee number and work area. He ...

pythonhtmldjango

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

cssreactjsmaterial-ui

A guide on transforming HTML into a variable using JavaScript

Having trouble converting HTML to a JavaScript variable. This is my HTML code: <div onclick="openfullanswer('2','Discription part','This is the code part');"> I want to create this HTML code dynamically, but I&apo ...

javascriptjqueryhtml

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

htmlcss

The use of the `foreach` loop

How can I change the position index to start at 1 instead of 0? I want the first name to be listed as number 1 and end at number 50. Is there a way to fix this issue? Here is my code: <html> <head> <title>SEATPLAN</title> &l ...

phphtml

The ajax response is returning the entire page's html code instead of just the text content from the editor

I've been working with CKEditor and I'm using AJAX to send the editor's content via POST method. However, when I try to display the response in a div, the HTML for the entire page is being returned instead of just the editor's content. ...

javascriptphphtmlajaxckeditor

Issue with Jquery change event not functioning as expected

My webpage consists of the following HTML code: <form id="fileuploadform"> <input type="file" id="fileupload" name="fileupload" /> </form> Accompanied by this snippet of jQuery code: $(':file').change(function(){ var ...

javascriptjqueryhtml

What is the best way to choose a specific section of a string using JQuery?

When utilizing the .html() function to retrieve html code, I encounter a need to extract a specific segment of the string. var newImgAdr = $(this).html(); The variable newImgAdr currently consists of: <img class="thumbnail-holder image-responsive cen ...

jqueryhtml

Arrange two absolute divs side by side without overlapping each other

I have a specific layout configuration: <div id="container"> <div class="left"> 1 </div> <div class="left"> 1 </div> <div class="right"> 2 </div> </div> My goal is to stack the left divs on top ...

htmlcss

CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...

cssreactjs

Exploring techniques for creating realistic dimensions in CSS

My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...

javascripthtmlcssunits-of-measurementppi

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

htmlcss

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Introduction screen in a JQuery mobile application for Android devices

I'm currently working on an Android app that utilizes jQuery Mobile within my web-based application. I have multiple pages in the app and I am considering adding a splash screen to display when loading a new page or while the page is being loaded. Any ...

androidjqueryhtmljquery-uijquery-mobile

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...

htmlcss