Help me fix this messed up HTML table please

Question

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!

Answer 1

Add a colspan="2" to the td in the second row.

Answer 2

You need to escape the attributes:

Value="<<Previous"

should be

Value="<<Previous"

Answer 3

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

Answer 4

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.

Answer 5

<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="&lt;&lt;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&gt;&gt;" 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).

Answer 6

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>&lt;-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-&gt;</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?

Answer 7

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

Answer 8

Your code, with:

1. The missing tags for the second row added in.
2. The arrows converted to html entities.
3. The missing quotes added in.
4. 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="&lt;&lt;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 &gt;&gt;" 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>

Answer 9

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?