Title: creating a table
Last modified: May 29, 2018

---

# creating a table

 *  Resolved [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/)
 * it is possible to create a table, in cells of which there will be “Single Line
   Text” forms? and that to us in the letter the table

Viewing 15 replies - 1 through 15 (of 15 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10337163)
 * Hello [@andreiikustov](https://wordpress.org/support/users/andreiikustov/),
 * I’m not totally sure of your question, however, if you want format the form as
   a table with the fields distributed in columns, you can use container fields (
   DIV or Fieldset), selecting the number of columns through the “Columns” attribute,
   and finally, insert the other fields into the container. More details in the 
   following link:
 * [https://cff.dwbooster.com/faq#q66](https://cff.dwbooster.com/faq#q66)
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10340959)
 * created a table with such a code:
 * <table class=”table table-bordered expTable” border>
    <thead> <tr> <th colspan
   =”2″>Dates Months/Year</th> <th>Vessel Name/Flag</th> <th>Year of built</th> 
   <th>Company Name/Crewing Agency</th> <th>Vessel Type/DWT</th> <th>Engine/HP</
   th> <th>Rank</th> <th>Reason of Discharge</th> </tr> </thead> <tbody> <tr> <td
   >From</td> <td><input type=”text” class=”form-control” name=”TFDate1″></td> <
   td><input type=”text” class=”form-control” name=”TFVessel1″></td> <td rowspan
   =”2″><input type=”text” class=”form-control” name=”TFBuilt1″></td> <td><input
   type=”text” class=”form-control” name=”TFCompany1″></td> <td><input type=”text”
   class=”form-control” name=”TFType1″></td> <td><input type=”text” class=”form-
   control” name=”TFEngine1″></td> <td rowspan=”2″><textarea rows=”3″ class=”form-
   control” name=”TFRank1″></textarea></td> <td rowspan=”2″><textarea rows=”3″ class
   =”form-control” name=”TFReason1″></textarea></td> </tr> <tr> <td>To</td> <td>
   <input type=”text” class=”form-control” name=”TTDate1″></td> <td><input type=”
   text” class=”form-control” name=”TTVessel1″></td> <td><input type=”text” class
   =”form-control” name=”TTCompany1″></td> <td><input type=”text” class=”form-control”
   name=”TTType1″></td> <td><input type=”text” class=”form-control” name=”TTEngine1″
   ></td> </tr> <tr> <td>From</td> <td><input type=”text” class=”form-control” name
   =”TFDate2″></td> <td><input type=”text” class=”form-control” name=”TFVessel2″
   ></td> <td rowspan=”2″><input type=”text” class=”form-control” name=”TFBuilt2″
   ></td> <td><input type=”text” class=”form-control” name=”TFCompany2″></td> <td
   ><input type=”text” class=”form-control” name=”TFType2″></td> <td><input type
   =”text” class=”form-control” name=”TFEngine2″></td> <td rowspan=”2″><textarea
   rows=”3″ class=”form-control” name=”TFRank2″></textarea></td> <td rowspan=”2″
   ><textarea rows=”3″ class=”form-control” name=”TFReason2″></textarea></td> </
   tr> <tr> <td>To</td> <td><input type=”text” class=”form-control” name=”TTDate2″
   ></td> <td><input type=”text” class=”form-control” name=”TTVessel2″></td> <td
   ><input type=”text” class=”form-control” name=”TTCompany2″></td> <td><input type
   =”text” class=”form-control” name=”TTType2″></td> <td><input type=”text” class
   =”form-control” name=”TTEngine2″></td> </tr> <tr> <td>From</td> <td><input type
   =”text” class=”form-control” name=”TFDate3″></td> <td><input type=”text” class
   =”form-control” name=”TFVessel3″></td> <td rowspan=”2″><input type=”text” class
   =”form-control” name=”TFBuilt3″></td> <td><input type=”text” class=”form-control”
   name=”TFCompany3″></td> <td><input type=”text” class=”form-control” name=”TFType3″
   ></td> <td><input type=”text” class=”form-control” name=”TFEngine3″></td> <td
   rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank3″></textarea
   ></td> <td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFReason3″
   ></textarea></td> </tr> <tr> <td>To</td> <td><input type=”text” class=”form-control”
   name=”TTDate3″></td> <td><input type=”text” class=”form-control” name=”TTVessel3″
   ></td> <td><input type=”text” class=”form-control” name=”TTCompany3″></td> <td
   ><input type=”text” class=”form-control” name=”TTType3″></td> <td><input type
   =”text” class=”form-control” name=”TTEngine3″></td> </tr> <tr> <td>From</td> 
   <td><input type=”text” class=”form-control” name=”TFDate4″></td> <td><input type
   =”text” class=”form-control” name=”TFVessel4″></td> <td rowspan=”2″><input type
   =”text” class=”form-control” name=”TFBuilt4″></td> <td><input type=”text” class
   =”form-control” name=”TFCompany4″></td> <td><input type=”text” class=”form-control”
   name=”TFType4″></td> <td><input type=”text” class=”form-control” name=”TFEngine4″
   ></td> <td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank4″
   ></textarea></td> <td rowspan=”2″><textarea rows=”3″ class=”form-control” name
   =”TFReason4″></textarea></td> </tr> <tr> <td>To</td> <td><input type=”text” class
   =”form-control” name=”TTDate4″></td> <td><input type=”text” class=”form-control”
   name=”TTVessel4″></td> <td><input type=”text” class=”form-control” name=”TTCompany4″
   ></td> <td><input type=”text” class=”form-control” name=”TTType4″></td> <td><
   input type=”text” class=”form-control” name=”TTEngine4″></td> </tr> <tr> <td>
   From</td> <td><input type=”text” class=”form-control” name=”TFDate5″></td> <td
   ><input type=”text” class=”form-control” name=”TFVessel5″></td> <td rowspan=”
   2″><input type=”text” class=”form-control” name=”TFBuilt5″></td> <td><input type
   =”text” class=”form-control” name=”TFCompany5″></td> <td><input type=”text” class
   =”form-control” name=”TFType5″></td> <td><input type=”text” class=”form-control”
   name=”TFEngine5″></td> <td rowspan=”2″><textarea rows=”3″ class=”form-control”
   name=”TFRank5″></textarea></td> <td rowspan=”2″><textarea rows=”3″ class=”form-
   control” name=”TFReason5″></textarea></td> </tr> <tr> <td>To</td> <td><input 
   type=”text” class=”form-control” name=”TTDate5″></td> <td><input type=”text” 
   class=”form-control” name=”TTVessel5″></td> <td><input type=”text” class=”form-
   control” name=”TTCompany5″></td> <td><input type=”text” class=”form-control” 
   name=”TTType5″></td> <td><input type=”text” class=”form-control” name=”TTEngine5″
   ></td> </tr> </tbody> </table>
 * inserted in the Field Type: HTML content. Cells are active, but size “small” –
   how to make even less? (the table does not fit on the screen).
 * How to prescribe that the entire table be sent in a letter with the data entered?
 * Thank you in advance. The answer with the use of the container did not help –
   it is not possible to make such a view of the table
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10341052)
 * Hello,
 * I really, don’t understand the reasons why you are inserting the fields in that
   way because you won’t be using the advantages of our plugin, and you won’t be
   using the styles of the plugin. An alternative would be enter the style definition
   below through the “Customize Form Design” attribute in the “Form Settings” tab(
   [https://cff.dwbooster.com/images/documentation/form-settings-tab.png](https://cff.dwbooster.com/images/documentation/form-settings-tab.png))
 *     ```
       .expTable input{width:100%;}
       ```
   
 * But as I said above, this question is not specific to our plugin.
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10344670)
 * all good, but how to send the whole table with data and empty fields in a letter????
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10344802)
 * Hello [@andreiikustov](https://wordpress.org/support/users/andreiikustov/),
 * That is exactly what I meant when I said that you are not using the advantages
   of the plugin if include your own HTML structure of fields, instead of using 
   the plugin’s controls, because our plugin know the controls inserted in the forms
   and it is waiting them.
 * Furthermore, depending on the version of the plugin installed on your website
   it includes the server side modules or not.
 * For example, the Professional version of the plugin includes the following features:
 * – Store the submitted data in the website’s database.
    – Send notification emails(
   where you can includes a summary with the data collected by the form) – Allows
   the integration with PayPal as payment gateway (the Platinum version of the plugin
   includes other payment gateways as add-ons, the complete list of features is 
   available in the following link: [https://cff.dwbooster.com/download#comparison](https://cff.dwbooster.com/download#comparison))–
   Include a submit button is as simple as select the “Yes” option for the attribute:“
   Display submit button?” in the form’s settings.
 * Does it means you cannot insert a submit button in the forms created with the
   free version of the plugin?
 * Not exactly, insert a submit button in the free version of the plugin is as simple
   as insert a button field in the form, and enter as its onclick event the piece
   of code:
 *     ```
       jQuery(this).closest('form').submit();
       ```
   
 * Or inserting a “HTML Content” field with the following tag as its content:
 *     ```
       <input type="submit" value="Send form" />
       ```
   
 * However, with the free version of the plugin the server side operations must 
   be implemented by yourself.
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10344833)
 * i have Professional. How in it to write ??
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10344984)
 * Hello,
 * The simpler alternative to include this table in the notification emails, would
   be read the table and assign it to a control in the form, and would be this form
   field who is included in the notification emails.
 * For example, insert a hidden field in the form, I will assume it is the fieldname123(
   you should use in your code the corresponding field’s name), and then, insert
   a “HTML Content” field in the form, and enter the following piece of code as 
   its content:
 *     ```
       <script>
       jQuery(document).on('change', '.expTable input,.expTable textarea', function(){
       var str = '';
       var $ = jQuery;
       str+='<table class="table table-bordered expTable" border>';
       str+='<thead>';
       str+='<tr>';
       str+='<th colspan="2">Dates Months/Year</th>';
       str+='<th>Vessel Name/Flag</th>';
       str+='<th>Year of built</th>';
       str+='<th>Company Name/Crewing Agency</th>';
       str+='<th>Vessel Type/DWT</th>';
       str+='<th>Engine/HP</th>';
       str+='<th>Rank</th>';
       str+='<th>Reason of Discharge</th>';
       str+='</tr>';
       str+='</thead>';
       str+='<tbody>';
       str+='<tr>';
       str+='<td>From</td>';
       str+='<td>'+$('[name="TFDate1"]').val()+'</td>';
       str+='<td>'+$('[name="TFVessel1"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFBuilt1"]').val()+'</td>';
       str+='<td>'+$('[name="TFCompany1"]').val()+'</td>';
       str+='<td>'+$('[name="TFType1"]').val()+'</td>';
       str+='<td>'+$('[name="TFEngine1"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFRank1"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFReason1"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>To</td>';
       str+='<td>'+$('[name="TTDate1"]').val()+'</td>';
       str+='<td>'+$('[name="TTVessel1"]').val()+'</td>';
       str+='<td>'+$('[name="TTCompany1"]').val()+'</td>';
       str+='<td>'+$('[name="TTType1"]').val()+'</td>';
       str+='<td>'+$('[name="TTEngine1"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>From</td>';
       str+='<td>'+$('[name="TFDate2"]').val()+'</td>';
       str+='<td>'+$('[name="TFVessel2"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFBuilt2"]').val()+'</td>';
       str+='<td>'+$('[name="TFCompany2"]').val()+'</td>';
       str+='<td>'+$('[name="TFType2"]').val()+'</td>';
       str+='<td>'+$('[name="TFEngine2"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFRank2"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFReason2"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>To</td>';
       str+='<td>'+$('[name="TTDate2"]').val()+'</td>';
       str+='<td>'+$('[name="TTVessel2"]').val()+'</td>';
       str+='<td>'+$('[name="TTCompany2"]').val()+'</td>';
       str+='<td>'+$('[name="TTType2"]').val()+'</td>';
       str+='<td>'+$('[name="TTEngine2"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>From</td>';
       str+='<td>'+$('[name="TFDate3"]').val()+'</td>';
       str+='<td>'+$('[name="TFVessel3"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFBuilt3"]').val()+'</td>';
       str+='<td>'+$('[name="TFCompany3"]').val()+'</td>';
       str+='<td>'+$('[name="TFType3"]').val()+'</td>';
       str+='<td>'+$('[name="TFEngine3"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFRank3"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFReason3"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>To</td>';
       str+='<td>'+$('[name="TTDate3"]').val()+'</td>';
       str+='<td>'+$('[name="TTVessel3"]').val()+'</td>';
       str+='<td>'+$('[name="TTCompany3"]').val()+'</td>';
       str+='<td>'+$('[name="TTType3"]').val()+'</td>';
       str+='<td>'+$('[name="TTEngine3"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>From</td>';
       str+='<td>'+$('[name="TFDate4"]').val()+'</td>';
       str+='<td>'+$('[name="TFVessel4"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFBuilt4"]').val()+'</td>';
       str+='<td>'+$('[name="TFCompany4"]').val()+'</td>';
       str+='<td>'+$('[name="TFType4"]').val()+'</td>';
       str+='<td>'+$('[name="TFEngine4"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFRank4"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFReason4"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>To</td>';
       str+='<td>'+$('[name="TTDate4"]').val()+'</td>';
       str+='<td>'+$('[name="TTVessel4"]').val()+'</td>';
       str+='<td>'+$('[name="TTCompany4"]').val()+'</td>';
       str+='<td>'+$('[name="TTType4"]').val()+'</td>';
       str+='<td>'+$('[name="TTEngine4"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>From</td>';
       str+='<td>'+$('[name="TFDate5"]').val()+'</td>';
       str+='<td>'+$('[name="TFVessel5"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFBuilt5"]').val()+'</td>';
       str+='<td>'+$('[name="TFCompany5"]').val()+'</td>';
       str+='<td>'+$('[name="TFType5"]').val()+'</td>';
       str+='<td>'+$('[name="TFEngine5"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFRank5"]').val()+'</td>';
       str+='<td rowspan="2">'+$('[name="TFReason5"]').val()+'</td>';
       str+='</tr>';
       str+='<tr>';
       str+='<td>To</td>';
       str+='<td>'+$('[name="TTDate5"]').val()+'</td>';
       str+='<td>'+$('[name="TTVessel5"]').val()+'</td>';
       str+='<td>'+$('[name="TTCompany5"]').val()+'</td>';
       str+='<td>'+$('[name="TTType5"]').val()+'</td>';
       str+='<td>'+$('[name="TTEngine5"]').val()+'</td>';
       str+='</tr>';
       str+='</tbody>';
       str+='</table>';
       $('[id*="fieldname123_"]').val(str);
       });
       </script>
       ```
   
 * and that’s all.
    The fieldname123 field would be included in the notification
   emails with the table and the values of fields into the table.
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345201)
 * ok. but in mail i see html code table.
    in “HTML Content” field i have code: 
   <table class=”expTable” > <tr> <th colspan=”2″>Dates Months/Year</th> <th>Vessel
   Name/Flag</th> <th>Year of built</th> <th>Company Name/Crewing Agency</th> <th
   >Vessel Type/DWT</th> <th>Engine/HP</th> <th>Rank</th> <th>Reason of Discharge
   </th> </tr> </thead> <tbody> <tr> <td>From</td> <td ><center><input type=”text”
   class=”form-control” name=”TFDate1″></td> <td><center><input type=”text” class
   =”form-control” name=”TFVessel1″></td> <td rowspan=”2″><center><input type=”text”
   class=”form-control” name=”TFBuilt1″></td> <td><center><input type=”text” class
   =”form-control” name=”TFCompany1″></td> <td><center><input type=”text” class=”
   form-control” name=”TFType1″></td> <td><center><input type=”text” class=”form-
   control” name=”TFEngine1″></td> <td rowspan=”2″><center><textarea rows=”3″ class
   =”form-control” name=”TFRank1″></textarea></td> <td rowspan=”2″><center><textarea
   rows=”3″ class=”form-control” name=”TFReason1″></textarea></td> </tr> <tr> <td
   >To</td> <td><center><input type=”text” class=”form-control” name=”TTDate1″></
   td> <td><center><input type=”text” class=”form-control” name=”TTVessel1″></td
   > <td><center><input type=”text” class=”form-control” name=”TTCompany1″></td>
   <td><center><input type=”text” class=”form-control” name=”TTType1″></td> <td>
   <center><input type=”text” class=”form-control” name=”TTEngine1″></td> </tr> 
   <tr> <td>From</td> <td><center><input type=”text” class=”form-control” name=”
   TFDate2″></td> <td><center><input type=”text” class=”form-control” name=”TFVessel2″
   ></td> <td rowspan=”2″><center><input type=”text” class=”form-control” name=”
   TFBuilt2″></td> <td><center><input type=”text” class=”form-control” name=”TFCompany2″
   ></td> <td><center><input type=”text” class=”form-control” name=”TFType2″></td
   > <td><center><input type=”text” class=”form-control” name=”TFEngine2″></td> 
   <td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank2″
   ></textarea></td> <td rowspan=”2″><center><textarea rows=”3″ class=”form-control”
   name=”TFReason2″></textarea></td> </tr> <tr> <td>To</td> <td><center><input type
   =”text” class=”form-control” name=”TTDate2″></td> <td><center><input type=”text”
   class=”form-control” name=”TTVessel2″></td> <td><center><input type=”text” class
   =”form-control” name=”TTCompany2″></td> <td><center><input type=”text” class=”
   form-control” name=”TTType2″></td> <td><center><input type=”text” class=”form-
   control” name=”TTEngine2″></td> </tr> <tr> <td>From</td> <td><center><input type
   =”text” class=”form-control” name=”TFDate3″></td> <td><center><input type=”text”
   class=”form-control” name=”TFVessel3″></td> <td rowspan=”2″><center><input type
   =”text” class=”form-control” name=”TFBuilt3″></td> <td><center><input type=”text”
   class=”form-control” name=”TFCompany3″></td> <td><center><input type=”text” class
   =”form-control” name=”TFType3″></td> <td><center><input type=”text” class=”form-
   control” name=”TFEngine3″></td> <td rowspan=”2″><center><textarea rows=”3″ class
   =”form-control” name=”TFRank3″></textarea></td> <td rowspan=”2″><center><textarea
   rows=”3″ class=”form-control” name=”TFReason3″></textarea></td> </tr> <tr> <td
   >To</td> <td><center><input type=”text” class=”form-control” name=”TTDate3″></
   td> <td><center><input type=”text” class=”form-control” name=”TTVessel3″></td
   > <td><center><input type=”text” class=”form-control” name=”TTCompany3″></td>
   <td><center><input type=”text” class=”form-control” name=”TTType3″></td> <td>
   <center><input type=”text” class=”form-control” name=”TTEngine3″></td> </tr> 
   <tr> <td>From</td> <td><center><input type=”text” class=”form-control” name=”
   TFDate4″></td> <td><center><input type=”text” class=”form-control” name=”TFVessel4″
   ></td> <td rowspan=”2″><center><input type=”text” class=”form-control” name=”
   TFBuilt4″></td> <td><center><input type=”text” class=”form-control” name=”TFCompany4″
   ></td> <td><center><input type=”text” class=”form-control” name=”TFType4″></td
   > <td><center><input type=”text” class=”form-control” name=”TFEngine4″></td> 
   <td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank4″
   ></textarea></td> <td rowspan=”2″><center><textarea rows=”3″ class=”form-control”
   name=”TFReason4″></textarea></td> </tr> <tr> <td>To</td> <td><center><input type
   =”text” class=”form-control” name=”TTDate4″></td> <td><center><input type=”text”
   class=”form-control” name=”TTVessel4″></td> <td><center><input type=”text” class
   =”form-control” name=”TTCompany4″></td> <td><center><input type=”text” class=”
   form-control” name=”TTType4″></td> <td><center><input type=”text” class=”form-
   control” name=”TTEngine4″></td> </tr> <tr> <td>From</td> <td><center><input type
   =”text” class=”form-control” name=”TFDate5″></td> <td><center><input type=”text”
   class=”form-control” name=”TFVessel5″></td> <td rowspan=”2″><center><input type
   =”text” class=”form-control” name=”TFBuilt5″></td> <td><center><input type=”text”
   class=”form-control” name=”TFCompany5″></td> <td><center><input type=”text” class
   =”form-control” name=”TFType5″></td> <td><center><input type=”text” class=”form-
   control” name=”TFEngine5″></td> <td rowspan=”2″><center><textarea rows=”3″ class
   =”form-control” name=”TFRank5″></textarea></td> <td rowspan=”2″><center><textarea
   rows=”3″ class=”form-control” name=”TFReason5″></textarea></td> </tr> <tr> <td
   >To</td> <td><center><input type=”text” class=”form-control” name=”TTDate5″></
   td> <td><center><input type=”text” class=”form-control” name=”TTVessel5″></td
   > <td><center><input type=”text” class=”form-control” name=”TTCompany5″></td>
   <td><center><input type=”text” class=”form-control” name=”TTType5″></td> <td>
   <center><input type=”text” class=”form-control” name=”TTEngine5″></td> </tr> 
   <script> jQuery(document).on(‘change’, ‘.expTable input,.expTable textarea’, 
   function(){ var str = ”; var $ = jQuery; str+='<table class=”expTable” border
   >’; str+='<thead>’; str+='<tr>’; str+='<th colspan=”2″>Dates Months/Year</th>’;
   str+='<th>Vessel Name/Flag</th>’; str+='<th>Year of built</th>’; str+='<th>Company
   Name/Crewing Agency</th>’; str+='<th>Vessel Type/DWT</th>’; str+='<th>Engine/
   HP</th>’; str+='<th>Rank</th>’; str+='<th>Reason of Discharge</th>’; str+='</
   tr>’; str+='</thead>’; str+='<tbody>’; str+='<tr>’; str+='<td>From</td>’; str
   +='<td>’+$(‘[name=”TFDate1″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFVessel1″]’).
   val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt1″]’).val()+'</td>’; 
   str+='<td>’+$(‘[name=”TFCompany1″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFType1″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TFEngine1″]’).val()+'</td>’; str+='<td rowspan
   =”2″>’+$(‘[name=”TFRank1″]’).val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”
   TFReason1″]’).val()+'</td>’; str+='</tr>’; str+='<tr>’; str+='<td>To</td>’; str
   +='<td>’+$(‘[name=”TTDate1″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTVessel1″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TTCompany1″]’).val()+'</td>’; str+='<td>’
   +$(‘[name=”TTType1″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTEngine1″]’).val()
   +'</td>’; str+='</tr>’; str+='<tr>’; str+='<td>From</td>’; str+='<td>’+$(‘[name
   =”TFDate2″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFVessel2″]’).val()+'</td>’;
   str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt2″]’).val()+'</td>’; str+='<td>’+$(‘[
   name=”TFCompany2″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFType2″]’).val()+'
   </td>’; str+='<td>’+$(‘[name=”TFEngine2″]’).val()+'</td>’; str+='<td rowspan=”
   2″>’+$(‘[name=”TFRank2″]’).val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFReason2″]’).
   val()+'</td>’; str+='</tr>’; str+='<tr>’; str+='<td>To</td>’; str+='<td>’+$(‘[
   name=”TTDate2″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTVessel2″]’).val()+'</
   td>’; str+='<td>’+$(‘[name=”TTCompany2″]’).val()+'</td>’; str+='<td>’+$(‘[name
   =”TTType2″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTEngine2″]’).val()+'</td>’;
   str+='</tr>’; str+='<tr>’; str+='<td>From</td>’; str+='<td>’+$(‘[name=”TFDate3″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TFVessel3″]’).val()+'</td>’; str+='<td rowspan
   =”2″>’+$(‘[name=”TFBuilt3″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFCompany3″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TFType3″]’).val()+'</td>’; str+='<td>’+$(‘[
   name=”TFEngine3″]’).val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFRank3″]’).
   val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFReason3″]’).val()+'</td>’;
   str+='</tr>’; str+='<tr>’; str+='<td>To</td>’; str+='<td>’+$(‘[name=”TTDate3″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TTVessel3″]’).val()+'</td>’; str+='<td>’
   +$(‘[name=”TTCompany3″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTType3″]’).val()
   +'</td>’; str+='<td>’+$(‘[name=”TTEngine3″]’).val()+'</td>’; str+='</tr>’; str
   +='<tr>’; str+='<td>From</td>’; str+='<td>’+$(‘[name=”TFDate4″]’).val()+'</td
   >’; str+='<td>’+$(‘[name=”TFVessel4″]’).val()+'</td>’; str+='<td rowspan=”2″>’
   +$(‘[name=”TFBuilt4″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFCompany4″]’).val()
   +'</td>’; str+='<td>’+$(‘[name=”TFType4″]’).val()+'</td>’; str+='<td>’+$(‘[name
   =”TFEngine4″]’).val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFRank4″]’).
   val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFReason4″]’).val()+'</td>’;
   str+='</tr>’; str+='<tr>’; str+='<td>To</td>’; str+='<td>’+$(‘[name=”TTDate4″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TTVessel4″]’).val()+'</td>’; str+='<td>’
   +$(‘[name=”TTCompany4″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTType4″]’).val()
   +'</td>’; str+='<td>’+$(‘[name=”TTEngine4″]’).val()+'</td>’; str+='</tr>’; str
   +='<tr>’; str+='<td>From</td>’; str+='<td>’+$(‘[name=”TFDate5″]’).val()+'</td
   >’; str+='<td>’+$(‘[name=”TFVessel5″]’).val()+'</td>’; str+='<td rowspan=”2″>’
   +$(‘[name=”TFBuilt5″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TFCompany5″]’).val()
   +'</td>’; str+='<td>’+$(‘[name=”TFType5″]’).val()+'</td>’; str+='<td>’+$(‘[name
   =”TFEngine5″]’).val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFRank5″]’).
   val()+'</td>’; str+='<td rowspan=”2″>’+$(‘[name=”TFReason5″]’).val()+'</td>’;
   str+='</tr>’; str+='<tr>’; str+='<td>To</td>’; str+='<td>’+$(‘[name=”TTDate5″]’).
   val()+'</td>’; str+='<td>’+$(‘[name=”TTVessel5″]’).val()+'</td>’; str+='<td>’
   +$(‘[name=”TTCompany5″]’).val()+'</td>’; str+='<td>’+$(‘[name=”TTType5″]’).val()
   +'</td>’; str+='<td>’+$(‘[name=”TTEngine5″]’).val()+'</td>’; str+='</tr>’; str
   +='</tbody>’; str+='</table>’; $(‘[id*=”fieldname60_”]’).val(str); }); </script
   >
 * and Css Layout Keywords for “HTML Content” expTable, because in “Customize Form
   Design” for me need #fbuilder .expTable input{width:75% !important;
    }
 * Where is my mistake ?? thank you in advance
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345458)
 * Hello [@andreiikustov](https://wordpress.org/support/users/andreiikustov/),
 * You simply should select the option: “HTML (use html in the textarea below)” 
   for the attributes: “Email format?” in the form’s settings.
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345525)
 * many thanks. Everything worked out. I have a form with 40 points to fill. the
   letter indicates everything, even those that the client does not fill. How to
   specify one condition for all – send, if it is completed?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345562)
 * Hello [@andreiikustov](https://wordpress.org/support/users/andreiikustov/),
 * You have these doubts or questions because you are not using the plugin’s controls.
 * For example, using the plugin controls if you want the user populate the form’s
   fields before it be submitted, you simply should tick the checkbox: “Required”
   in the fields’ settings.
 * And if you want the blank fields won’t be included in the notification emails,
   you simply should modify the special tag `<%INFO%>` in the notification emails
   to include the attribute: `<%INFO if_not_empty%>`
 * But, as you are inserted your own HTML tags, these features do not apply to your
   case, and you should solve these questions with your own code, I’m sorry.
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345593)
 * Thank you very much.
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345728)
 * Hello [@andreiikustov](https://wordpress.org/support/users/andreiikustov/),
 * By the way, if you want your fields be required, even if you have entered them
   with your own HTML tags, assign to them the special class name: required, as 
   follows:
 *     ```
       <input type="text" class="form-control required" name="TFDate1">
       ```
   
 * Best regards.
 *  Thread Starter [andreiikustov](https://wordpress.org/support/users/andreiikustov/)
 * (@andreiikustov)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10345952)
 * Thank you. but everything works also at <% INFO if_not_empty%>, since the whole
   table is passed through a hidden block and the adjustment in the letter does 
   not affect it
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10346017)
 * Hello [@andreiikustov](https://wordpress.org/support/users/andreiikustov/),
 * If you need a custom coding service, you can contact me from my private website:
 * [https://cff.dwbooster.com/customization](https://cff.dwbooster.com/customization)
 * Best regards.

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘creating a table’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 15 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/creating-a-table-4/#post-10346017)
 * Status: resolved