请帮我解决这个乱糟糟的HTML表格

I have a simmple HTML table that I just cant seem to fix.

我有一个简单的HTML表,我似乎无法修复。

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:

下面是html代码。我已经取出了动态语言部分,根据用户所在的页面添加“上一页”:

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!

我已经做了一段时间的反复试验,所以需要一些帮助!

9 个解决方案

#1

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?

我错过了一项要求吗?

#2

You need to escape the attributes:

您需要转义属性:

Value="<<Previous"

should be

Value="<<Previous"

#3

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

将colspan =“2”添加到第二行的td。

#4

use html entities to show < and > characters on the screen. < is < and > is >

使用html实体在屏幕上显示 <和> 字符。 <是<和> 是>

Something that will also help is to use an editor that has syntax highlighting and you can catch these mistakes more easily

也有帮助的是使用具有语法突出显示的编辑器,您可以更轻松地捕获这些错误

#5

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.

此外,您还有其他HTML问题(如果希望它们出现在文本中,则需要转出HTML实体,例如 <和> ),因此您可能希望通过了解HTML或以其他方式验证HTML的编辑器来运行它。

#6

You're missing some tags and quotes, and escape characters as others have mentioned.

你丢失了一些标签和引号,并且像其他人提到的那样转义字符。

You can try using the htmlvalidator at w3c.

您可以尝试在w3c上使用htmlvalidator。

http://validator.w3.org/#validate-by-input

#7

<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).

您错过了开始和结束行标记以及底部列中的colspan。试试上面的内容,看看是否适合你。您还需要为其等效项交换小于和大于字符(如上所示)。

#8

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?

#9

Your code, with:

你的代码,用:

1. The missing tags for the second row added in.

添加了第二行的缺失标记。

2. The arrows converted to html entities.

箭头转换为html实体。

3. The missing quotes added in.

缺少的引号加入。

4. Your spelling corrected.

你的拼写纠正了。

Try running your html through the w3c validator next time. Hope it helps.

尝试下次通过w3c验证器运行你的html。希望能帮助到你。

<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>