Struggling with my HTML table styling

I attempted to construct the table below using two tables side by side, each with a width of 300, but due to the layout, when I attempt to create it as one table (which is my goal), the heights on the left and right become jumbled up because the cells on the left extend to the height of the cells on the right.

How can I achieve this? (This is for an HTML email newsletter, so no divs are allowed.)

I prefer the two-table layout to be in one table

 <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: left; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-top-left.png" width="300" height="74" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td height="163" style="border-collapse: collapse;vertical-align: top;">
<p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0; color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">Content left</p>
</td></tr>
<tr><td valign="top" style="border-collapse: collapse;">
<img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;" border="0" src="images/content-bottom-left.png" width="300" height="75">
</td></tr>
<tr><td valign="top" style="background-color: #a4000f; height: 148px; border-collapse: collapse;" bgcolor="#a4000f">
<img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: right; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;"><img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"></td></tr>
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td width="292" height="158" valign="top" style="background-color: #a4000f; padding-top: 0; padding-left: 0; padding-bottom: 0; padding-right: 8px; height: 160px; border-collapse: collapse;margin-top:0;" bgcolor="#a4000f">
<p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left; color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;" align="left">The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
</td></tr>
</table>
htmlcss

Answer №1

To create a layout with two columns in an email, I suggest using a table with one row and two cells. Each cell can contain the content for each column.

If you want to add padding around the text, you can nest another table inside each cell.

Here's a basic example:

Using a single table:

<table width="600">
  <tr>
    <td width="300">
      <img src="top_left.png"><br>
      Text goes here<br>
      <img src="left.png"><br>
      <img src="bottom_left.png">
    </td>
    <td width="300">
      <img src="top_right.png"><br>
      <img src="right.png"><br>
      More text goes here
    </td>
  </tr>
</table>

Using two tables:

<table width="600">
  <tr>
    <td width="300">
      <table>
        <tr><td><img src="top_left.png"></td></tr>
        <tr><td style="padding: 20px;">text goes here</td></tr>
        <tr><td><img src="left.png"></td></tr>
        <tr><td><img src="bottom_left.png"></td></tr>
      </table>
    </td>
    <td width="300">
      <table>
        <tr><td><img src="top_right.png"></td></tr>
        <tr><td><img src="right.png"></td></tr>
        <tr><td style="padding: 20px;">more text goes here<td></tr>
      </table>
    </td>
  </tr>
</table>

(Please note that I have omitted additional HTML email styling details such as display:block and specific image widths and heights, but you can customize those as needed.)

Answer №2

If you want to create a table with 5 rows and 2 columns, all with the same height, you can use the following HTML code:

<table>
    <tr height="20%">
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
    <tr height="20%">
        <td></td>
        <td></td>
    </tr>
</table>

If you need to align the content within the cells, you can specify alignment options either for the entire table or for specific cells.

Edit

Keep in mind that you cannot specify different heights for two cells in the same row. You can use the rowspan attribute to achieve this.

Sample code

<table>
    <tr>
        <td>Content</td>
        <td rowspan="2">Content</td>
    </tr>
    <tr>
        <td>Content</td>
    </tr>
</table>

Feel free to adjust this code to fit your specific needs.

Answer №3

Illustration of a single table containing two columns with stacked content:

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top" width="300">
            <div>
                <img align="top" border="0" src="images/content-top-left.png" width="300" height="74"
                    style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0;
                    color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">
                    Content on the left</p>
            </div>
            <div>
                <img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;"
                    border="0" src="images/content-bottom-left.png" width="300" height="75" />
            </div>
            <div>
                <img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top;
                    outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
        </td>
        <td valign="top" width="300">
            <div>
                <img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none;
                    text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138"
                    style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
            </div>
            <div>
                <p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left;
                    color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;"
                    align="left">
                    The content on the right<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
            </div>
        </td>
    </tr>
</table>

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 added class is not being successfully applied to the ClassList

I'm currently working on a page where I want the colors of a button and the background to switch when the button is clicked. document.querySelector("body.light").classList.toggle("dark"); document.querySelector("button.dark").classList.toggle("light" ...

javascriptcss

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

Vue unable to load material icons

The icons npm package "material-icons" version "^0.3.1" has been successfully installed. "material-icons": "^0.3.1" The icons have been imported as shown below. <style lang="sass"> $material-icons-font-path: '~material-icons/iconfont/'; ...

cssvue.jssassvuejs2google-material-icons

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

htmlcssreactjsmaterial-ui

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

javascriptjquerycsshandlerresizable

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

Once the page is refreshed, the checkbox should remain in its current state and

I have a challenge with disabling all checkboxes on my page using Angular-Js and JQuery. After clicking on a checkbox, I want to disable all checkboxes but preserve their state after reloading the page. Here is an example of the code snippet: $('# ...

javascriptjqueryhtmlangularjscheckbox

Unusual SASS results observed while utilizing extends functionality

Having issues with my SASS files: _android.scss: $width: 111px; @import 'child'; .android .child { @extend %child; } _ios.scss: $width: 999px; @import 'child'; .ios .child { @extend %child; } _child.scss: %child { wi ...

csssass

Generate unique avatars with a variety of predefined image sets

Instead of solving my problem, I am seeking guidance on it: I have a project to create an Avatar maker in C# using a vast collection of categorized images. The concept is simple, but I lack experience in image manipulation through code, so I need some ad ...

c#cssasp.net-mvcimage-manipulationavatar-generation

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

Is it possible to apply CSS based on a component's displayName?

Are you a CSS pro? I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected: #ComponentDisplayName * { -webkit-user-select: text; -moz-user-sel ...

javascripthtmlcssreactjscss-selectors

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

htmlcssless

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

When it comes to loading jQuery, HTML5Boilerplate and other sources[citation needed] have a standard process that many are familiar with: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window. ...

javascriptjqueryhtmlperformancehtml5boilerplate

What is the best way to utilize XPATH effectively within scrapy?

Explore more here Check out this link too: https://i.stack.imgur.com/8bhzV.png If you are struggling with finding the red marked box number, take a look at the image on this link: https://i.stack.imgur.com/mca05.png Don't worry, I have provided my ...

pythonhtmlxpathscrapy

Ways to align content on navbar (Bootstrap 5)

I am currently working on a minimal navbar design using Bootstrap 5. In this setup, there are two main elements - the 'navbar-brand' for the logo/brand and the navigation links. My goal is to have the brand/logo aligned all the way to the left, ...

htmlcssbootstrap-4bootstrap-5

What is the process for incorporating a scrolling feature into my HTML page?

I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...

htmlcss

What steps can I take to deactivate input and stop it from being accessible on the browser?

insert image description Is there a method to block users from accessing disabled input fields in the browser? Any recommendations or solutions would be greatly appreciated. Vuejs is utilized within my project. Implementing this feature serves as a secu ...

javascripthtmljqueryvue.js

Pressing the CTRL key and then the PLUS key simultaneously activates the zoom in

Is there a way to capture Ctrl + + / Ctrl + - events in Firefox using the following code: window.onkeydown = function(event) { if(event.ctrlKey && event.keyCode == 61) CtrlPlus(); if(event.ctrlKey && event.keyCode == 169) // or ...

javascripthtmlgoogle-chromefirefox

Guide to designing a progress bar using numerical data stored in a database

I am currently working on a project to create a dynamic progress bar based on numeric values stored in a database. The database has two fields, 'NEXT_STEP' and 'MAX_STEPS'. When the value of NEXT_STEP reaches MAX_STEPS + 1, it indicates ...

phphtmlajaxoracle