使用 Nu Html Checker 将图像插入 HTML 表会导致错误答案

【问题标题】：Inserting images into an HTML table causes error using Nu Html Checker使用 Nu Html Checker 将图像插入 HTML 表会导致错误
【发布时间】：2018-10-07 16:46:16
【问题描述】：

我是 HTML 新手，但已经编程了 50 多年。我正在尝试将图像放在表格中。我可以从谷歌上看到这是可能的。 NuHtml chcker 不断拒绝代码。我做错了什么？

我最初包含的是一个我遇到问题的 sn-p 感谢您的帮助，很抱歉我可能浪费了您的时间。我在 Word 中开发了它，错误地认为我可以将其保存为 HTML 并且一切都会好起来的。在使用计算机 50 年后，我应该知道的更多。页面结构是 2 列多行 - 一些行合并为 1 列。

   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Wed, 25 Apr 2018 14:13:29 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>ND Mailshot_2</title>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<table>
<img src="Reminder-1_files/image001.jpg"  height="204" alt="ND Logo" title="ND Logo" style="float: left; width: 30%; margin-right: 1%; margin-left:5%; margin-bottom: 0.5em;"/>

<style>.centered {
    position: absolute;
    top: 30%;
    left: 55%;
    transform: translate(-50%, -50%);
    color: red;
    font-family: "Trebuchet MS", Helvetica, sans-serif ;
    font-size:150%;
    font-weight: bold;
    text-shadow: 2px 2px white;
}
</style>

<div class="container"> 
<a href="https://www.youtube.com/watch?v=Cg8Zo2SrqXI&amp;feature=youtu.be&amp;t=15s?rel=0&amp;autoplay=1">
<img src="Reminder-1_files/image002.gif"  height="206" alt="" title="Mod Meter" style="float: left; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em;"/></a></div>

<p style="clear: both;">
</tr><tr>
<span>
<style>
p  {
    color: rgb(0,44,132); 
    text-align: justify;  
    max-width:40%;  
    font-size:150%; 
    font-family: "trebuchet MS", Helvetica, sans-serif; 
    font-weight: bold;
    }
</style>
<p>Hi Kris<br>
Just a quick reminder of some of our metering products.    In particular the MultiCube Modular Meter (above right) and the Cube 950 triple 3   Meter (below).   If you need any more information just click on the image for more info on the product or follow this link to our website.   
Alternatively - or possibly as well - you might try this link.   You'll need your sound ON and I hope that you enjoy it.</p>

</span>

<span>
<a href="https://www.ndmeter.co.uk/current-transformers.html">
<img src="Reminder-1_files/image004.jpg"  height="206" alt="" title="Mod Meter" style="float: right; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em;"/></a>
<div class="centered">Remote Display now available</div>

</td>
</span>
</tr>
</table>

  </body>
</html>

【问题讨论】：

好吧，考虑到您没有任何<table> 标签，我不确定您的</tr><tr> 标签在里面做什么，并且<style> 必须进入<head> 部分。您还至少有三个未封闭的标签。所有这五个都是无效标记。我假设其他错误来自诸如缺少 DOCTYPE 和 <head> 部分之类的东西。你查看basics of HTML了吗？
validator.nu 报告该代码的 7 个错误 - 您不理解哪个错误消息？
将所有样式放在一个样式元素中，并将其移动到 html 文件的头部部分。供参考：w3schools.com/html/html_css.asp 完成后看看还有哪些错误

标签： html image html-table

【解决方案1】：

说实话，我不知道你的 HTML 发生了什么，但我尝试修复它（这还不完美）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <style>
        .centered {
            position: absolute;
            top: 30%;
            left: 55%;
            transform: translate(-50%, -50%);
            color: red;
            font-family: "Trebuchet MS", Helvetica, sans-serif ;
            font-size:150%;
            font-weight: bold;
            text-shadow: 2px 2px white;
        }
        p  {
            color: rgb(0,44,132);
            text-align: justify;
            max-width:40%;
            font-size:150%;
            font-family: "trebuchet MS", Helvetica, sans-serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>
                    <a href="https://www.youtube.com/watch?v=Cg8Zo2SrqXI&amp;feature=youtu.be&amp;t=15s?rel=0&amp;autoplay=1">
                        <img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" title="Mod Meter" style="float: left; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em">
                    </a>
                </td>
                <td>
                    <p>Hi Kris</p>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

始终使用<!DOCTYPE html>，关闭您的标签（只要它们是可关闭的），并且仅在您确实需要时才使用内联 CSS。

在https://www.w3schools.com/html/html_intro.asp开始学习HTML

【讨论】：

嗨可能是我的错误，因为我只发布了一个我遇到问题的 sn-p。完整代码为：