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>
Related
So I am building the final page of an online exhibit I am working on. The final page uses the exact same format as an earlier page in the exhibit (with an image to the left and a paragraph to the right of the image) so I just copy/pasted all the code and changed URLs, text, and dimensions of images and td elements as I needed to. I have changed nothing to do with the alignment of the various elements on the page, but now I have an element that is basically ignoring td valign="top" and appears to be aligned to center instead. I've done a line by line comparison of the html of the new page with the original but I can't find anything that should have changed it. Basically the text part of the page (title of page and body of page) should start on the same line as the top of the image, but instead it's starting in the center after a huge amount of white space.
Here's the particular table in question with the text and full URLs removed to make it a bit shorter:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="*image*" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
There is a " in front of valign, so it's not reading the attribute.
<td width="500" "valign="top"><div align="center">
The full code should be:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="http://placehold.it/400x267" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
Here's a working codepen: http://codepen.io/vic3685/full/vyKmwg/
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.
For this code, when I add the text in the third table row it ruins the layout of all adjacent cells. Please help.
<table width="720" bgcolor="white" height="650" align="center" cellpadding="10" border="1">
<tr valign="top">
<td colspan="8" height="70" align="center"><img src="yooo.gif" align="middle" /> </td> </tr>
<tr height="40">
<td colspan="2" align="center" width="175">Home</td>
<td colspan="2" align="center" width="175">Food</td>
<td colspan="2" align="center" width="175">Hobbies</td>
<td colspan="2" align="center" width="175">Martin's Blog</td> </tr>
<tr height="260">
<td class="info" colspan="4" valign="top"><h2>Welcome to Nenad's Blog!!!</h2><h6>Here on this blog we will be talking about
a bunch of random stuff that are so completely unrelated that will blow your mind.<h6></td>
<td class="info" colspan="4"> h </td> </tr>
<tr height="260">
<td class="info" colspan="4"> h </td>
<td class="info" colspan="4"> h </td> </tr>
Your table looks good from what I can make of what you posted.
You should, however, not be using tables for layout purposes. They are supposed to be used only for tabular data, you know..like a spreadsheet.
For styling your site, you should be using CSS.
http://jsfiddle.net/3rJv7/
Code Runs
You might have to define what "ruin" means. However my best guess is that all the colspans cause some browsers to calculate the optimum column widths poorly. I found that many browsers handle it better if your first row defines the widths, even if it's a dummy row with spacer images. I know, terrible semantically, but using tables for layouts tend to go that way.
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this
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.