Jump to content
  • 0
roattw

HTML table in data page for alignment - Caspio forcing <td> cells cbHTMLBlockContainer

Question

I really need to use an HTML table to apply some column structure to a Submission Form.  Need explanatory headings to align over their respective fields. Using HTML section in the data page I can begin to build this structure but for every <td> cell I put in an HTML block Caspio adds another <td> (cbHTMLBlockContainer) just for the html block thereby misaligning everything.

I really need the data field to align under the explanatory top row headings above it.

tbl1.thumb.jpg.6ba0821e918a7dc3ccaea48e11b7d28b.jpg

 

tbl2.jpg.b59997b391ceaaf2a1a78a212cf1f2cb.jpg

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Hi @roattw

If this is a submission form I assume you mean something like this;

 

image.thumb.png.d474edebc3005ecfb370aa609cb349c6.png

Where you can have headings over each section? If so you can split the form up into sections with columns to suit and have HTML block in-between their own sections set at 1 column to span the page like this;

image.png.cccff6b91d41429ce2fe78c23c0402b1.png

This is one column proceeded by the HTML block with the next section containing the submission form fields;

image.png.433868b0e8cde896616631b3f940c0dc.png

You will have to experiment (a lot!) to get decent results and spacing for your whole form as if you start mixing section columns other then 1 and X (in my case X = 5) it will space them to overcome this I either used columns of 1 or 5 and if required less then 5 used 1 and had the elements continue on the same line.

Your other option would be to build a full HTML table within the HTML block something similar to this;

<style>
.wrapper {
 background-color: lightgray;
 padding: 5px;
}
td {
 padding: 10px;
}
</style>
<table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
	<tbody>
		<tr>
			<td><strong>Some Data 1</strong></td>
			<td><strong>Some Data 2</strong></td>
			<td><strong>Some Data 3</strong></td>
		</tr>
		<tr>
			<td class="wrapper">[@field:Some_Data_1]</td>
			<td class="wrapper">[@field:Some_Data_2]</td>
			<td class="wrapper">[@field:Some_Data_3]</td>
		</tr>
		<tr>
			<td><strong>Some Data 4</strong></td>
			<td><strong>Some Data 5</strong></td>
			<td><strong>Some Data 6</strong></td>
		</tr>
		<tr>
			<td class="wrapper">[@field:Some_Data_4]</td>
			<td class="wrapper">[@field:Some_Data_5]</td>
			<td class="wrapper">[@field:Some_Data_6]</td>
		</tr>
	</tbody>
</table>

Which would result in something like;

image.png.f8eab4ec3ad375ed85d116c4ab2782ea.png

 

Again you would have to experiment with layout to match the rest of your form/fields but may be a possible solution but without  seeing exactly what you want as an end result its a bit hard to offer any further advise.

 

Good luck, Roosta

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...