Apex Code Development You need to sign in to do that
Don't have an account?
Alex Waddell 17 Is there an easy way to align columns of tables? Visual Force Dev
Hello,
I know there has to be a better way to make this table than the way I am currently doing it. Can anyone help me align all of my checkboxes and titles?
Below is the code I am currently running. Each row is its own table, stacked on top of each other. I've attempted to mess with the width of the columns to try and make it as close as possible but it's just not working
And here is a picture of the document that I am trying to remake with visual force
I know there has to be a better way to make this table than the way I am currently doing it. Can anyone help me align all of my checkboxes and titles?
Below is the code I am currently running. Each row is its own table, stacked on top of each other. I've attempted to mess with the width of the columns to try and make it as close as possible but it's just not working
<apex:page standardController="Correspondence__c" renderAs="pdf" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {
font-family: sans-serif;
font-size:12px;
}
</style>
</head>
<body>
<table cellpadding="6" width="100%">
<tr>
<td>
<apex:outputPanel >
<apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
</apex:outputPanel>
</td>
<td>
<apex:outputPanel >
Case Information
</apex:outputPanel>
</td>
<td>
<apex:outputPanel >
Form 2067
</apex:outputPanel>
</td>
</tr>
</table>
<table cellpadding="6" width="70%">
<tr>
<td style="vertical-align: text-top;">
To:
</td><td>
<div class="mybox">
<apex:outputField value="{!Correspondence__c.Payer_Name__c}"/><br/>
<apex:outputField value="{!Correspondence__c.Payer_Fax_Number__c}"/><br/>
</div>
</td>
<td style="vertical-align: text-top;">
From:
</td><td>
<div class="mybox">
Outreach Health Services<br/>
251 W Renner Rd, <br/>
Richardson, TX 75080
</div>
</td>
</tr>
</table>
<table style="width:100%" border="1">
<tr>
<td>Case Name
<br></br>
<apex:outputField Value="{!Correspondence__c.Case_Name__c}" />
</td>
<td>Category <br></br> PERS</td>
<td>Case No. <br></br> <apex:outputField Value="{!Correspondence__c.Case_No__c}"/></td>
<td>Category<br></br> </td>
<td>Case No.<br></br> </td>
</tr>
<tr width = "100%">
<td width = "32%"></td>
<td width = "11%"></td>
<td width = "11%"> </td>
<td width = "11%"></td>
<td width = "15%">
</td>
</tr>
</table>
<table style="width:100%" border="1">
<tr>
<td>Address(Street, City, State, ZIP Code)
<br></br>
<apex:outputField Value="{!Correspondence__c.Patient_Address__c}"/>
</td>
<td>Area Code and Telephone No.
<br></br>
<apex:outputField Value="{!Correspondence__c.Payer_Fax_Number__c}"/>
</td>
</tr>
<tr width = "100%">
<td width = "60%"></td>
<td width = "40%"></td>
</tr>
</table>
<b>Please Check all that apply.</b>
<br></br>
<br></br>
<table style="width:100%">
<tr>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td> Absent Parent</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Change in Address/Telephone</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Change in Circumstances </td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Child Care</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Community Placement Resources</td>
</tr>
<tr width = "100%">
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
</tr>
</table>
<table style="width:100%">
<tr>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td> Deductions</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Employment Services</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>EPSDT </td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Family Health Services Name</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Family Planning</td>
</tr>
<tr width = "100%">
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
</tr>
</table>
<table style="width:100%">
<tr>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td> Household Composition</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Income</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>LTSS Information Shared </td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Medicaid</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Medical/Disability</td>
</tr>
<tr width = "100%">
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
</tr>
</table>
<table style="width:100%">
<tr>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td> MERP Shared</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Nursing Care/Level of Care</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Protective Services</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Refugee Services</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Resources</td>
</tr>
<tr width = "100%">
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
<td width = "5%"></td>
<td width = "15%"></td>
</tr>
</table>
<table style="width:100%">
<tr>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td> MERP Shared</td>
<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
<td>Nursing Care/Level of Care</td>
<td><apex:outputField Value="{!Correspondence__c.Other__c}"/></td>
<td>Other</td>
<td><apex:outputField Value="{!Correspondence__c.Reason_for_Form__c}"/></td>
</tr>
<tr width = "100%">
<td width = "4%"></td>
<td width = "14%"></td>
<td width = "5%"></td>
<td width = "14%"></td>
<td width = "5%"></td>
<td width = "5%"></td>
<td width = "60%"></td>
</tr>
</table>
</body>
</html>
</apex:page>
And here is a picture of the document that I am trying to remake with visual force
Just merge your tables into a single one and use colspan and <table align="right">.
<table style="width:100%">: remove the extra table.https://www.w3schools.com/tags/att_td_colspan.asp
https://www.w3schools.com/tags/att_table_align.asp
Can you please try the padding value using to align the fields.
Use padding-left:5pt; to each and every <td>
Thanks,
Saroja
SweetPotatoTec