I have a jsp page in which there is a horizontal graph bars generating dynamically in table.
I have no idea if I can make the graph bars vertically.
Need a help if we can make the bars vertical through CSS.
Can anyone guide me how can I work on this?
Here is a code for reference. If this can help.
<logic:greaterThan name="size" value="0">
<table border="0" width="100%" align="left">
<tr><td></td><td></td><td><font face="Verdana" size="10" color="#333399"><%=request.getAttribute("header")%></font></td></tr>
<tr><td height="120"></td><td></td><td valign="top" align="left"><hr width ="320"></td></tr>
<logic:iterate id="dayEntry" name="LeaveForm" property="results">
<tr>
<td align="right" width="20%"></td>
<td align="right" width="10%">
<bean:write name="dayEntry" property="month"/>
</td>
<td align="left" width="80%">
<table width='<bean:write name="dayEntry" property="percent"/>%' bgcolor='<bean:write name="dayEntry" property="color"/>' title='<bean:write name="dayEntry" property="date"/>'>
<tr>
<td align="right">
<font color="white">
<bean:write name="dayEntry" property="days"/>
</font>
</td>
</tr>
</table>
</td>
</tr>
</logic:iterate>
<tr><td height="40"></td></tr>
</table>
</logic:greaterThan>
Try using transform from CSS3.
Related
I am facing a very annoying issue regarding HTML mails. My mail template is working absolutely fine with all browsers and it is showing perfectly fine in gmail, office mail (web). But with outlook client I am getting 4 pixel extra padding.
I have checked the compute section where I can see the image size which I have defined and actual size in mail are different.
Here I am attaching the problematic part screenshot for your reference.
Could you please help me on it.
HTML Code
<table width="859" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="180"><img src="/sites/default/files/img/report_mail_header.jpg" alt="" /></td>
</tr>
<tr>
<td height="136"><img src="/sites/default/files/img/report_mail_title.jpg" alt="" /></td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f9f9f9">
<tr>
<td colspan="3" height="58"><img src="/sites/default/files/img/box1.jpg" alt="" /></td>
</tr>
<tr>
<td width="111" height="354"><img src="/sites/default/files/img/box4.jpg" alt="" /></td>
<td valign="top">
<table width="90%" cellspacing="0" cellpadding="5" border="0" align="center">
<tr>
<td align="center" style="font-size:18px;line-height:135%"><br><br>Details of the accounts that are part of our community of ****<br><br>Account status: <font color="#1f6d79">active or inactive institutions</font>
<br>Details of the <font color="#83babc">institutions that are really reporting</font>
<br>The details of the <font color="#1f6d79">accounts that entered to the platform the last month</font>
<br>As you know, "*** **** ****" is an initiative to create value to our customers - Leading our team to gain differentiation and loyalty
<br><strong><font color="#1f6d79">Best Regards,<br>**** ****</font></strong></font>
</td>
</tr>
</table>
</td>
<td width="114" align="right"><img src="/sites/default/files/img/box2.jpg" alt="" /></td>
</tr>
<tr>
<td colspan="3" height="132"><img src="/sites/default/files/img/box3.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120"><img src="/sites/default/files/img/report_mail_footer.jpg" alt="" /></td>
</tr>
</table>
I'm working on a form in my application and trying to clean up the code that was put in place before me. HEre's something I'm coming across that seems like bad practice and I am having a hard time trying to abbreviate it and clean it up.
Here's the code...
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="6%"></td> <---- I want to get rid of this!
<td width="45%">
<asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
</td>
<td>
<asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
</td>
</tr>
<tr>
<td></td> <------- Have to keep adding this for every checkBox
<asp:Checkbox ID=.............."
</tr>
So what I'm trying to get rid of the the initial indentation, mainly ....
<td width="6%"></td>
Because this is in place, i have to do a
<td></td>
before every single row otherwise the indentation dissapears. Is there any way to fix this so that all my checkboxes are indented?
You can use colspan="2" on the checkbox cells and put padding-left: 6% as a style. Here's a JS fiddle. I added a row above your first row to show the column spacing, modified the first row use this change, and left the second row intact.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
edit: Also, I recommend validating your HTML. You can wrap your code snippet up with a doctype and the other necessary items to get identify errors and warnings at https://validator.w3.org.
<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
</body><html>
Not sure if you'll find this acceptable, but you could keep the <td width="6%"></td> and give it a huge rowspan value. So like this:
<td width="6%" rowspan="999999"></td>
Then you can omit the empty <td></td> for the first 999999 rows. Most likely you have fewer rows than that; or if not, just make the rowspan even higher. The table will not become longer just because of the huge rowspan value.
Of course this all breaks down if you also have rows where the indent should not be applied; a fix for that could be to calculate the exact rowspan value in advance.
I have a problem with nested tables. In my Company we have an old website wich is based on an table layout. I want to add dynamicaly a new td in one tr. If this td is set, in the other tr's i will set on the last td a colspan=2.
If i do this, my table looks like this:
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
instead of looking like this:
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
( - only defined as width not as colspan)
This is sample markup from my code:
<table border="0" width="100%" cellspacing="0" cellpadding="1">
<tbody>
<!-- Headline tr -->
<tr>
<td width="100%" valign="middle" nowrap align="left" colspan="7">
Titel
</td>
<!-- New dynamic Field -->
<td nowrap align="right">
<img src="example.gif" width="15px" height="15px"/>
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
</tbody>
</table>
This table is nested in a table with <table width="100%" height="100%">
Whats the failure?
You can't have a different number of td in rows (tr) from the same parent table.
In your example, you have 8 (7+1) td in your first row and only 7 (5+2) in both others.
It may break your table..
I have solved the problem. In my First row, the first td with colspan=7 dont need the width="100%". Now its functional.
I am constructing a webpage using fairly elementary techniques. I have three rows on a certain part of the webpage, each of which is structured as . The text units and the listbox units of the different rows are in perfect horizontal alignment, but the vertical spacing between the listboxes is inconsistent. Furthermore the vertical alignment of each listbox in relation to its paired text is different. I've tried readjusting the table structure and experimenting with valign, but to no avail. How do I fix this so that it looks neat? Thanks!
You could set the height of each td by css like
td {
height: 50px
}
also you should check out some tutorials on how to design forms without using tables http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
<form>
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the test category:
</td>
<td align="left" width="50%">
<form action="">
<select name="categories" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%" valign="center">
Please choose the test:
</td>
<td align="left" width="50%" valign="center">
<form action="">
<select name="tests" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the difficulty:
</td>
<td align="left" width="50%">
<form action="">
<select name="difficulties" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
This is only the present state. I've tried other things with it.
Edit:
That includes the non-existence of any valign things in there. When I tried adding them, nothing happened.
I have a simmple HTML table that I just cant seem to fix.
I am trying to display data like so:
<-Previous Next->
51 to 100 of 10151 records
Below is the html code. I have taken out the dynamic language part that adds 'Previous' depending on what page the user is on:
EDIT: After all the responses I've changed the code to following. but still alignment is the same. >_<
<table width="100%" border="0">
<tbody>
<tr align="center">
<td bgcolor="#ffffff" color="white" align="center" colspan="2">
<!--some form elements go here!-->
<!--I just replaced tags with some text for testing-->
<font face="Arial" size="2"><strong>Previous</strong></font>
Previous
</td>
<td bgcolor="#ffffff" color="white" align="center" colspan="2">
Next
</td>
</tr>
<tr align="center">
<td align="center"><font face="arial" size="2"><b>51 to 100 of 10151</b> </font>
</td>
</tr>
</tbody>
</table>
Expected output is above but what I am getting from the code is:
Previous Next Group
51 to 100 of 10151 Households
I have been doing trial and error for quite some time now so need some help!
Why do you need table cells for both the Previous and Next text? Why not just put them in the same <td>?
<table width="100%" border="0">
<tbody>
<tr align="center">
<td bgcolor="#ffffff" color="white" align="center" colspan="2">
Previous Next
</td>
</tr>
<tr align="center">
<td align="center"><font face="arial" size="2"><b>51 to 100 of 10151</b></font></td>
</tr>
</tbody>
</table>
Did I miss a requirement?
You need to escape the attributes:
Value="<<Previous"
should be
Value="<<Previous"
Add a colspan="2" to the td in the second row.
use html entities to show < and > characters on the screen. < is < and > is >
Something that will also help is to use an editor that has syntax highlighting and you can catch these mistakes more easily
For starters, after your first row (<tr>...</tr>), you fail to start another row. Also, you need to column span the cell in the next row to make it take up the space under both cells in the row above it, not just the first one:
<tr>
<td align="center" colspan="2"><font....>....</td>
</tr>
Also, you have other HTML issues (you need to escape out HTML entities such as < and > if you want them to appear in your text), so you might want to run that through an editor that understands HTML or otherwise validate it.
You're missing some tags and quotes, and escape characters as others have mentioned.
You can try using the htmlvalidator at w3c.
http://validator.w3.org/#validate-by-input
<table width="100%" border="0">
<tr align="center">
<td bgcolor="#ffffff" color="white" align="center">
<!--some form elements go here!-->
<font face="Arial" size="2"><strong>Previous</strong></font>
<Input id='previuesButton' Type="image" alt="Previous" src="/eiv/images/prev.gif" value="<<Previous" name=previuesButton ACCESSKEY="B">
</td>
<td bgcolor="#ffffff" color="white" align="center">
<font face="Arial" size="2"><strong>Next Group</strong></font>
<Input id='nextButton' alt="Next" Type="image" src="/eiv/images/next.gif" Value="Next>>" name=nextButton ACCESSKEY="B">
</td>
</tr>
<tr>
<td align="center" colspan="2"><font face="arial" size="2"><b>51 to 100 of 10151</b> </font></td>
</tr>
</table>
You were missing a starting and ending row tag as well as a colspan in the bottom column. Try the above to see if that works out for you. Also you need to swap the less than and greater than characters for their equivalents (as shown above).
Are you having a problem with greater than or less than signs?
Try this:
<table width="100%" border="0">
<tbody>
<tr align="center">
<td bgcolor="#ffffff" color="white" align="center">
<!--some form elements go here!-->
<font face="Arial" size="2"><strong><-Previous</strong></font>
<Input id='previuesButton' Type="image" alt="Previous" src="/eiv/images/prev.gif"
Value="<<Previous" name=previuesButton ACCESSKEY="B">
</td>
<td bgcolor="#ffffff" color="white" align="center">
<font face="Arial" size="2"><strong>Next Group-></strong></font>
<Input id='nextButton' alt="Next" Type="image" src="/eiv/images/next.gif" Value="
Next>> "name=nextButton ACCESSKEY="B">
</td>
</tr>
<td align="center"><font face="arial" size="2"><b>51 to 100 of 10151</b> </font>
</td>
</tbody>
That help?
Your code, with:
The missing tags for the second row added in.
The arrows converted to html entities.
The missing quotes added in.
Your spelling corrected.
Try running your html through the w3c validator next time. Hope it helps.
<table width="100%" border="0">
<tbody>
<tr align="center">
<td bgcolor="#ffffff" color="white" align="center">
<font face="Arial" size="2"><strong>Previous</strong></font>
<Input id='previousButton' Type="image" alt="Previous" src="/eiv/images/prev.gif"
Value="<<Previous" name="previousButton" ACCESSKEY="B">
</td>
<td bgcolor="#ffffff" color="white" align="center">
<font face="Arial" size="2"><strong>Next Group</strong></font>
<Input id='nextButton' alt="Next" Type="image" src="/eiv/images/next.gif" Value="
Next >>" name="nextButton" ACCESSKEY="B"></td>
</tr>
<tr>
<td align="center" colspan="2"><font face="arial" size="2"><b>51 to 100 of 10151</b></font>
</td>
</tr>
</tbody>
</table>