I have Gravity Forms implemented on a website, but when admin notifications are sent through to email (Gmail hosted) the tables are displaying as code.
This is how it's displaying when sent via email. I'm using Sendgrid as SMTP.
<table width="99%" border="0" cellpadding="1" cellspacing="0" bgcolor="#EAEAEA">
<tr>
<td>
<table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Name</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">Sample Name</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Email</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;"><a href='mailto:enquiry#example.com'>enquiry#example.com</a></font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Phone</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">01XXX XXXXXX</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Company Name</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">Enquiry Company Name Ltd</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Products Available</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">Request Title</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Your message</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">This is an example message.</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
However, it used to send as the table itself perfectly formatted. In the meantime, I've set it up to send as plain text for ease of reading, but the person receiving has specifically requested it's displayed as a table.
Can anyone advise on how to fix this?
Thank you in advance!
The problem might be that you selected to send as plain text. This way gmail strips all html tags and most probably removes the table too.
Try selecting HTML format on emails.
Related
When displaying information about my student from the database, I use the Spring MVC <form:xxx> tags, but I don't know how to display it simply in a cell, I don't use input tags, textarea tags, etc. For some reason it doesn't work otherwise. It looks like this now:
and I need this information to be just in the cell, I also attach my output code:
<table border="1" cellspacing="0" cellpadding="3"
style="font-size: small; line-height: 25px; border-color: #D1EEEE">
<tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
<th width="100px">Name</th>
<th width="230px">Surname</th>
<th width="270px">Group</th>
<th width="220px">Date of enrollment</th>
</tr>
<form:form action="studentProgress" modelAttribute="student">
<form:hidden path="id"/>
<tr valign="bottom">
<td style="padding-bottom: 20px"><form:form path="name"/></td>
<td style="padding-bottom: 20px"><form:input path="surname"/></td>
<td style="padding-bottom: 20px"><form:select path="group"/></td>
<td style="padding-bottom: 20px"><form:textarea path="date"/></td>
</td>
</tr>
</form:form>
</table>
The solution was found, it was necessary to place my data between the tags and the information began to be displayed correctly :
<table border="1" cellspacing="0" cellpadding="3"
style="font-size: small; line-height: 25px; border-color: #D1EEEE">
<tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
<th width="100px">Name</th>
<th width="230px">Surname</th>
<th width="270px">Group</th>
<th width="220px">Date of enrollment</th>
</tr>
<form:form action="studentProgress" modelAttribute="student">
<form:hidden path="id"/>
<tr valign="bottom">
<td style="padding-bottom: 20px"><p>${student.name}</p></td>
<td style="padding-bottom: 20px"><p>${student.surname}</p></td>
<td style="padding-bottom: 20px"><p>${student.group}</p></td>
<td style="padding-bottom: 20px"><p>${student.date}</p></td>
</td>
</tr>
</form:form>
</table>
I'm trying to create an excel spreadsheet with a landing page where I input a specific week number, period number and/or year.
I would then click a button to open an instance of Internet Explorer, navigate to the web form, input the data from the cells in the spreadsheet and then load up the reports selected.
Code for the web form
<br>
<body>
</body>
</html>
<head>
<!--include file="../../Connections/SQL.asp" -->
<title>Performance Reporting</title>
<link href="../../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<link href="../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style45 {color: #990000}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function makeDisable(){
var y=document.getElementById("store")
var x=document.getElementById("CHNSplits")
if (y.value=='CP11')
{
x.disabled=true
}
}
function makeEnable(){
var x=document.getElementById("CHNSplits")
x.disabled=false
}
-->
</script>
</head>
<body>
<div align="center">
<link href="../CSS/PL_Style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: 16px}
.style33 {color: #ffffff}
-->
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#001446" class="border9"><div align="left"><img src="80.gif" alt="DSGi" /></div></td>
<td valign="bottom" bgcolor="#001446" class="border16"><div align="right" class="xbig style1 style33"><span class="style2">Store Performance</span> </div></td>
</tr>
</table>
<br>
<br>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: url();
}
.style1 {
color: #d33;
font-size: 18px;
}
.style2 {color: #000000; font-size: 2px; }
.style10 {color: #d33}
.style15 {font-size: 12px}
-->
</style>
<title></title>
</div>
<link href="../../../Testing/KPI/NewKPI/Digital_KPI/stylesheet.css" rel="stylesheet" type="text/css">
<div align="center"><span class="reportname"> Reporting Selection</span></div>
<form name="form1" id="form1" method="post" action="Get_Page_V4.asp">
<input name="store" type="hidden" value="2397" >
<input name="ViewType" type="hidden" value="store" >
<table width="60%" border="1px" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<td colspan="2"><div align="center" class="formnamesmall">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="4">
<td></td>
</tr>
<tr height="5">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"><div align="center" class="formtextverylarge">Selected Location:</span> 1111</div></td>
</tr>
<tr>
<td><input name="RadioGroup1" type="radio" value="1" checked></td>
<td class="formnamesmall" ><strong>Yesterday</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><input type="radio" name="RadioGroup1" value="2"></td>
<td class="formnamesmall" ></td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall"> </td>
<td class="formtext">
<input name="datebox" type="hidden" id="datebox" value="07/10/2018" size="10" maxlength="10"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr>
<td><input type="radio" name="RadioGroup1" value="3"></td>
<td class="formnamesmall" ><strong>Week</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Week </td>
<td class="formtext">
<input name="week" type="text" id="week" value="24" size="2" maxlength="2"></td>
</tr>
<tr>
<td> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="weekyear" type="text" id="weekyear" value="2019" size="4" maxlength="4"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><label>
<input type="radio" name="RadioGroup1" value="4">
</label></td>
<td class="formnamesmall" ><strong>Period</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Period </td>
<td class="formtext">
<input name="period" type="text" id="period" value="6" size="2" maxlength="2"></td>
</tr>
<tr class="formtext">
<td> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="periodyear" type="text" id="periodyear" value="2019" size="4" maxlength="4"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><input type="radio" name="RadioGroup1" value="6"></td>
<td class="formnamesmall" ><strong>Year </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="YearYear" type="text" id="YearYear" size="4" maxlength="4" value="2019" ></td>
</tr>
<tr><td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
</tr>
<!--
<tr>
<td colspan="4"><div align="center"><span class="formnamesmall style45">Select Report Type</span></div></td>
<td> </td>
<td colspan="2" class="formname" ><strong></td>
</tr>
-->
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<tr>
<!--
<td><div align="center">
<input name="RadioGroup2" type="radio" class="Style10" value="1" >
</div></td>
<td>
<div align="right" class="formnamesmall style45">
<div align="left">Charts </div>
</div></td>
-->
<input name="RadioGroup2" type="hidden" class="Style10" value="6" checked="Checked">
<!--
<td><div align="right" class="formnamesmall">
<div align="left" class="style45">League Tables
</div>
</div></td>
-->
<td class="formnamesmall" colspan="4"> </td>
<td><input type="submit" name="Submit" value="Display Report"></td>
</tr>
</table>
<p> </p>
</div></td>
</tr>
</table>
<input name="page_name" type="hidden" value="Region_Page1_" />
</form>
<br>
<br>
<style type="text/css">
<!--
.style1 {
font-size: 10px;
color: #FFFFFF;
}
-->
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom" bgcolor="#001446"><div align="right" class="xbig style1 style1"> </div></td>
</tr>
</table>
</body>
VBA code
Sub Get_Data()
Dim i As Long
Dim IE As Object
Dim objElement As Object
Dim objCollection As Object
Dim HWNDSrc As Long
Dim dates As Object
Set IE = CreateObject("InternetExplorer.Application")
With IE
.Visible = True
.navigate "http://INTRANETSITE/Summary_Select.asp"
Do Until .readyState = 4 And Not .Busy
DoEvents
Loop
.document.all.Item("radioGroup1")(3).Checked = True 'Select the 4th checkbox down on the list
.document.forms(0).submit 'Submit the form to generate the result
End With
Pause (2)
With IE
.navigate "http://INTRANETSITE/ReportDetail2.asp?"
Do Until .readyState = 4 And Not .Busy
DoEvents
Loop
End With
End Sub
The code above navigates to the web form and does select the 4th radio button which is for period reports, then submits the form and displays the first page.
How do I interact with the text boxes to also amend which week or period I want to select reports for?
Also, when it tries to navigate to ReportDetail2.asp it returns the following error and then crashes the VBA code.
Method 'Navigate' of object 'IWebBrowser2' failed
The long term goal of this is to navigate through 20+ pages of reports, pulling the data from each table into a tab on the spreadsheet, so if it can't navigate between the reports, even before we get to the code to pull the data, then that's a problem.
Try something like the following. I am showing the different options you might consider so remember to comment out those you don't want to use.
You need to add a reference to Microsoft Internet Controls via VBE > Tools > References or use late bound call of
Dim ie As New InternetExplorer : Set ie = CreateObject("InternetExplorer.Application")
VBA:
Option Explicit
Public Sub MakeSelections()
Dim ie As New InternetExplorer
Const URL As String = "yourURL"
With ie
.Visible = True
.navigate URL
While .Busy Or .readyState < 4: DoEvents: Wend
With .document
.querySelector("[value='1']").Checked = True 'Yesterday. CSS attribute = value selector
.querySelector("[value='3']").Checked = True 'Week
.querySelector("[value='4']").Checked = True 'Period
.querySelector("[value='6']").Checked = True 'Year
.getElementById("week").Value = 6 'week value
.getElementById("weekyear").Value = 2018 'financial year value
.getElementById("period").Value = 6 'period value
.getElementById("periodyear").Value = 2018 'period financial year value
.getElementById("yearyear").Value = 2019 'financial year value
.querySelector("[value='Display Report']").Click 'display report
End With
Stop '<== Delete me later
'.Quit '<== Remember to quit application
End With
End Sub
I have structure as follows in fiddle.
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="20" style="width:100%;">
<tbody>
<tr style="text-align:justify;">
<td valign="top"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Hello,</span></font>
<br><br>
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Following contact form has been submitted.</span></font>
<div>
<font face="Arial,sans-serif!important" size="1">
<span style="font-size:13px;">
<div style="margin-top:5px;"> </div>
<table width="100%" border="0" cellspacing="0" cellpadding="2" style="width:100%;">
<tbody>
<tr>
<td align="left" valign="top" style="width:17%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name :</b></span></font></td>
<td align="left" valign="top" style="width:83%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">pratik </span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Email :</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1"><span style="font-size:12px;">p#d.com</span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Phone :</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font size="1"><span style="font-size:12px;">8</span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name of Facility:</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">wee</span></font></td>
</tr>
</tbody>
</table>
</span>
</font>
</div>
</td>
</tr>
<tr style="text-align:justify;">
<td valign="top">
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Thank you,</span></font>
<br>
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Admin</span></font>
</td>
</tr>
</tbody>
</table>
So I want to keep all alignment as it is Just move "Thank you,
Admin" Section to little top
I am working on Email Template,So inline CSS
you have cell-padding table attribute, change it to 0 then design your table by css
I think this is what you need
<table width="100%" border="0" cellspacing="0" style="width:100%;padding-left:20px;">
DEMO: http://jsfiddle.net/MX9TF/3/
remove some of your empty div, and br by cleaning up the markup .
http://jsfiddle.net/MX9TF/8/
<table>
<tbody>
<tr>
<td>
<p>Hello,
<br/>Following contact form has been submitted.</p>
<table>
<tbody>
<tr>
<th>Name :</th>
<td>pratik</td>
</tr>
<tr>
<th>Email :</th>
<td>p#d.com
</td>
</tr>
<tr>
<th>Phone :</th>
<td>8</td>
</tr>
<tr>
<th>Name of Facility:</th>
<td>awee</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<p>Thank you,
<br/>Admin</p>
</td>
</tr>
</tbody>
</table>
table {
font-family:"Arial,Helvetica,sans-serif";
font-size:12px;
color:#333;
width:100%;
text-align:justify;
}
table table th {
width:17%;
font-weight:bold;
}
Then you can tune and style your tables from style sheet with plain CSS.
:)
<td style="padding-top: 1px" valign="top">
Also, you could have mentioned in the question that css is not allowed, so that we wont think that way
One more thing worth mentioning. You could figure this with some development tools such as Firebug in Firefox. eg, open your html code in a browser, use firebug inspect to select your block, and it shows you have big space over your final td. You can also try to edit in on runtime using the firebug tool. It is a firefox plugin. If you don't have firefox, other browsers too have similar development tools
The quick answer is to remove the cellpadding="20" from your parent table and use padding or <br> on each cell instead. The cellpadding and cellspacing should only be used for zero-ing out as they do not render consistently in all clients.
There are also a whole bunch of little things you don't need in your code. Here is how it should look - this will work 100% in all email clients:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:30px;">
Hello,
<br><br>
Following contact form has been submitted.
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Name:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
pratik
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Email:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
p#d.com
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Phone:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
#
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Name of Facility:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
...
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-top:10px;">
Thank you,<br>
Admin
</td>
</tr>
</table>
I'd like to know where i have gone wrong, i want to apply font verdana to "to change this font to verdana."
I have removed contend from other table rows to make the code appear clearer. I have set the css styling to this section but when uploading the font does not change at all.
Code is:
<style type="text/css">
#form1 tbody tr td {
font-family: Verdana, Geneva, sans-serif;
}
</style>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<form action="upload_ac.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<tr>
<td><strong>Title 1</strong></td>
</tr>
<tr>
<td>To Change this font to verdana.<br>
<br></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center"> </td>
</tr>
</form>
<tr>
<td>
<!-- start here-->
<form action="http://www./cookie5payment/freecontact2formprocess.php" method="post">
<table class="freecontact2form" border="0" width="400px">
<tbody>
<tr>
<td colspan="2"><span style="font-size: x-small;"> </span> <br /> <br /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><br></td>
<td></td>
</tr>
<tr>
<br>
<td valign="top"> </td>
</tr>
<tr>
<td style="text-align:center" colspan="2"><br /><br />
<br /><br />
<br /><br /></td>
</tr>
</tbody>
</table>
</form>
<!-- end here -->
</td>
</tr>
</table>
</tr>
Your code is not working as expected because you use the identifier #form1 to target the table inside that form, but you start the table outside the form so the css selector can not find it. Change the order of your html as follows (i.e. switch the form and table tag)
<form action="upload_ac.php" method="post" enctype="multipart/form-data" name="form1 id="form1">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
Here is a fiddle to illustrate this
I have a table in which I have to place radio buttons in multiple columns. From all these buttons, only one radio button can be checked. How to achieve these. I have five columns viz.A,B,C,D,E and I want to place radio button for each column.
//Here is the code for my .aspx page
<%# Page Title="" Language="C#" MasterPageFile="~/Interviewer
/interviewerMasterPage.master" AutoEventWireup="true" CodeFile="AppRatingForm.aspx.cs"
Inherits="Interviewer_AppRatingForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table cellpadding="2" width="100%">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Interview Rating Form</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td width="25%">
Name of Applicant</td>
<td>
<asp:Label ID="nameLbl" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Post Applied For</td>
<td>
</td>
</tr>
<tr>
<td>
Department</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Assessment</td>
</tr>
<tr>
<td align="left" colspan="2">
<table border="1" cellpadding="3" cellspacing="0" class="style1">
<tr>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="5%">
No</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="25%">
Traits</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
A</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
B</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
C</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
D</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
E</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="*">
Comments</td>
</tr>
<tr>
<td colspan="8"
style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: bold;">
Personal Traints</td>
</tr>
<tr>
<td>
1</td>
<td>
Personality</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2</td>
<td>
Physical Fitness</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3</td>
<td>
Background</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
Confidance</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
Communication Skills</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
6</td>
<td>
Attitude</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="8"
style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: bold;">
Job Related Traits</td>
</tr>
<tr>
<td>
1</td>
<td>
Subject Knowledge</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2</td>
<td>
Related Work Experience</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3</td>
<td>
Integrity</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
Reliability</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
Adaptability</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
6</td>
<td>
Initiative</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
7</td>
<td>
Team Work</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
8</td>
<td>
Ethics</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
</table>
</asp:Content>
There is GroupName property of the radio button that you need to set for each column.
In your column A, set all radio button's to GroupName="A"
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="A" />
In your column B, set all radio button's to GroupName="B"
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="B" />
This will allow the user to only select one radio button from each column.