使用Nu Html Checker

时间:2018-04-26 21:39:40

标签: html image html-table

我是HTML新手,但已编程超过50年。我想把一张图片放在一张桌子里。我可以通过谷歌搜索看到这是可能的。 NuHtml chcker一直拒绝代码。我做错了什么?

我最初收录的是我遇到问题的片段感谢您的帮助&对不起,我可能浪费了你的时间。我在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>

1 个答案:

答案 0 :(得分:-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