Sections within <td> of a table

Lauvds · July 11, 2019

Hello,

I'm kind of dealing with an issue and I have no idea how to solve this...hoping someone would. I'm making a pdf report with HTML, doing this because it will allow the report generation to be automated.
In any case, I'm only able to use HTML - no CSS. So please don't provide solutions in CSS, cause I have read them all and unfortunately, the system we use to automate does not recognise CSS.

So here is the problem. I have a table set-up in on the pdf page so it looks like this:

Column 1 (25%) Column 2 (75%)
[picture] cell with picture and text
text cell with picture and text
cell with picture and text
footer text footer cell with picture and text

I have set this up with a range of tables within tables (if there are suggestions on how to do this better with ONLY HTML would love to hear them?!)

The problem

I'd like to make sure the footer parts in each of the columns are always at the bottom of the column whilst the rest should be aligned at the top.
As of now, I've used multiple <br> to create breaks there and I was wondering if there is a better way to do this?

Thanks for reading! Hope you know of a solution!

Ingolme · July 12, 2019

Without seeing your HTML I can't give a specific solution. I would expect the tables to automatically keep things in line. You can use rowspan to make one cell take up multiple rows.

vmars316 · July 29, 2019

I tend to use my own fake Tables :


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>vmTemplate-2row2col.html</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
	body {
     font-family: "Tahoma", Times, serif;
     font-size: 14px;
}
        .Table {
            border-style: solid;
            text-align: center;
            border-color: #282A36;
            border-width: 2px;
            padding: 24px;
            */
        }
        
        .Title {
            text-align: center;
        }
        
        .Heading {
            font-weight: bold;
            text-align: center;
        }
        
        .Row {
            border-style: solid solid solid solid;
            border-width: 2px;
            border-color: #D9B04E;
        }
        
        .Cell {
            text-align: left;
            vertical-align: middle;
            display: inline-block;
            padding-left: 5px;
            padding-right: 5px;
            border-style: solid solid solid solid;
            border-width: 1px;
            border-color: #D9B04E;
        }
        
        .StackCell {}
        
        .StackRow {}
        
        .button {
            background-color: #282A36;
            border: none;
            color: #C8982B;
            color: #D9B04E;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
            font-family: "Comic Sans MS", cursive, sans-serif;
            font-size: 24px;
            cursor: pointer;
        }
        
        span.RedTxt {
            color: red;
        }
    </style>
</head>

<body style="background-color:#EbE8E4; font-family: Tahoma; font-size:18px; color:black;"> 
    <br>

    <div class="Table">
        <div class="Title">
            <p>
                <button class="button"> vmTemplate-2row2col.html</button>
				<br>
            </p>
        </div>      <!--  <div class="Title">  -->
        <p></p>
<!-- ============NewRow============== -->
        <p></p>
        <div class="Row">
            <p></p>
<!-- ---------------------NewCell------------------ -->
            <div class="Cell">
            
                <p style="text-align:center;">
row1 col1
                </p>
<br>
    
            </div>  
<!-- ---------------------End of Cell------------------ -->

<!-- ---------------------NewCell------------------ -->
            <div class="Cell">
            
                <p style="text-align:center;">
row1 col2
                </p>
<br>
    
            </div>  
<!-- ---------------------End of Cell------------------ -->

<br>
        </div>  <!-- <div class="Row"  -->

<!-- ============NewRow============== -->
        <p></p>
        <div class="Row">
            <p></p>
<!-- ---------------------NewCell------------------ -->
            <div class="Cell">
            
                <p style="text-align:center;">
row2 col1
                </p>
<br>
    
            </div>  
<!-- ---------------------End of Cell------------------ -->

<!-- ---------------------NewCell------------------ -->
            <div class="Cell">
            
                <p style="text-align:center;">
row2 col2
                </p>
<br>
    
            </div>  
<!-- ---------------------End of Cell------------------ -->

<br>
        </div>  <!-- <div class="Row"  -->

        
    </div>  <!--  div class="Table">  -->
    

    <div>
        <p style="text-align:center;">
        <span style="font-size: 14pt; font-family: &quot;Avenir Next&quot;;">
<br><br> <a href="http://vmars.us/">  http://vmars.us/  </a>
      </span>
            <br>
            <br>"All things in moderation , except for love and forgiveness"
            <br>
        </p>
    </div>


</body></html>

hth

Sign In

Sections within <td> of a table

Recommended Posts

Lauvds

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity