显示HTML表的问题

时间：2017-01-21 19:29:04

标签： html html-table html-email

我有一封通过PHP发送的HTML电子邮件，用于我的迪斯科舞厅业务，实际上就像报价一样。因为它是HTML电子邮件，所以我使用旧的<table>标记来构建它。

但是我刚刚将一个表插入主表容器中，并且它一直显示出巨大的间隙。我已尽一切可能摆脱它，任何人都知道为什么会发生这种情况？

display problem 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Soundvibes Booking Quote</title>
    </head>

    <body style="margin: 0; padding: 0;" bgcolor="#F0F0F0">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="padding: 40px 5px 20px 40px;">
     <tr>
    <td align="center" bgcolor="#000000" style="padding: 20px 0 30px 0;">
     <img src="http://www.soundvibes.co.uk/emaillogo.png" alt="Soundvibes Logo" width="600" height="70" style="display: block;" />
    </td>
     </tr>
     <tr>
      <td bgcolor="#ffffff" style="font-family: Arial, sans-serif; font-size: 14px; ;padding: 20px 10px 20px 10px;" >
      <span style="font-size: 16;"><b>Your Soundvibes Booking Quote</b></span><br><br>Hi Steve Dew,<br />
    <br />
I'm Steve, and I run Soundvibes, we pride ourselves on helping create amazing parties that your guests will love and will create many happy memories. We have lots of experience and would love to help make your party a real success.<br />
    <br />
We have a wide range of music from current chart hits to the old school classics. If you book we will work with you to provide a bespoke disco perfect to suit your needs that is guaranteed to get everyone on the dance floor!<br />
<br />
<strong>Clients love us!</strong><br />
<br />
Here's what other people are saying about Soundvibes:<br />
<p align="center"><img src="http://www.soundvibes.co.uk/quote/review1.png" width="550" height="130" alt="Review"/></p>You can see more Facebook reviews at: <a href="http://www.facebook.com/soundvibesuk/reviews" target="_new">http://www.facebook.com/soundvibesuk/reviews</a><br />
<p align="center"><img src="http://www.soundvibes.co.uk/quote/review2.png" width="550" height="130" alt="Review"/></p><br />
Rachael - 09/07/2016 - Birthday Party - Dorset.<br />
<p align="center"><img src="http://www.soundvibes.co.uk/quote/review3.png" width="550" height="100" alt="Review"/></p><br />
Jill - 21/05/2016 - Birthday Party - Hampshire<br />
<br />
You can see more Need A Disco reviews at: <a href="http://needadisco.com/pages/17138.php?j=reviews">http://needadisco.com/pages/17138.php?j=reviews</a><br />
<br />
<strong>And the winner is â¦</strong><br />
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td width="110"><img src="http://www.soundvibes.co.uk/quote/djmarkaward.png" width="100" height="125" alt="DJ Mark " /></td><td width="390">We have been awarded a DJ Mark Platinum Award for 2016. This is an industry wide award and highlights a handful of DJs who go above and beyond to provide great service for their clients. We are very proud of our DJ Mark Award and show it off when ever we can!</td></tr></table><br />
<br />
<strong>The Set Up</strong><br />
<br />
<p align="center"><img src="http://www.soundvibes.co.uk/quote/setup.png" width="500" height="328" alt="A Picture of the Soundvibes DJ setup"/></p><br />
<p align="center"><a href="http://www.soundvibes.co.uk/#gallery" target="_new"><img src="http://www.soundvibes.co.uk/quote/gallerythumbnails.png" width="500" height="225" alt="Smaller thumbnails of images" border="0"/></a></p><br />
We use professional-grade equipment including the latest in DJ mixing technology used in some of the biggest clubs, high quality speaker equipment so everything sounds great, as well as a wide range of lighting to create the perfect party atmosphere.<br />
<br />
<strong>Lets chat</strong><br />
<br />
We love a good chinwag, so all meetings are included in the price and we're happy to discuss anything that will help make your evening the best it can be. We'll even put the kettle on!<br />
<br />
<strong>Can you play this please?</strong><br />
<br />
We happily take song requests from you or your guests. You can get your requests in before hand on the website. We also give a web link if your guests want to help contribute to the list. We're also happy to incorporate requests on the night.<br />
<br />
<strong>Easy Secure Online Booking system</strong><br />
<br />
We know the worst part of any party is the organising and keeping track of everything, so we have a simple secure online booking system where you can manage your booking, add requests and make payments all online.<br />
<br />
You can pay securely online using any of the following methods:<br />
<p align="center"><img src="http://www.soundvibes.co.uk/quote/cards.png" width="500" height="37" alt="Visa, Mastercard, AMEX, Discover, JCB, DIscover, Apple Pay and Bank Transfer icons"/></p><p><br />
<strong>Legal Bits</strong><br />
<br />
You will receive an official contract specific to your event once you have booked. To see our standard T&Cs please visit our website at: <a href="http://www.soundvibes.co.uk/tandcs.pdf">http://www.soundvibes.co.uk/tandcs.php</a><br />
<br />
We have £10 million of Public Liability Insurance (PLI) that is provided by one of the most reputable companies in this sector. Additionally our equipment undergoes Portable Appliance Test (PAT) for electrical safety on a regular maintenance schedule.<br />
<br />
If the venue you have booked requires copies of these certificates we are happy to provide them on request.<br />
<br />
<strong>Your Event</strong><br />
<br />
Based on the details you have submitted I'm happy to give you a quote for the following:<br />
<br />
--------------------------------------------------------------------------------------------------------------------------<br />
<br />
DJ Booking for // from  to  . . . . . . . . . . . . . . . . . . . . .  £200<br />
<br />
--------------------------------------------------------------------------------------------------------------------------<br />
<br />
<br />
We charge a £100 deposit to secure the date, and require the rest of the payment up to 14 days before the event.<br />
<br />
At the time of receiving this quote we are currently AVAILABLE for the date selected. However we get booked up fairly quickly so it is advised to book and pay the deposit as soon as possible to avoid disappointment.<br />
<br />
<strong>More More More ..!</strong><br />
<p>How do you like it? We've teamed up with some of our friends to give you amazing offers on these great extras for your party. Any of these can be added to your party and can be managed and paid for with your Soundvibes booking. So no extra hastle of dealing with lots of suppliers!</p><br />
<table width="600" border="0" cellspacing="0" cellpadding="0" style="padding: 0px"><br />
  <tr><br />
    <td width="403" height="100"><br />
    <strong>A Star Karaoke - <strike>Normally £250</strike>, Only £150!</strong><br />
      <p>The latest tunes and a back cataolgue of 26,000 songs your guests will love singing along too. Comes with microphones and extra lighting to make you feel like the star of the show!</p></td><br />
    <td width="230"><img src="http://www.soundvibes.co.uk/quote/astarquote.png" width="230" height="150" /></td><br />
  </tr><br />
  <tr><br />
    <td height="100"><strong>Say Cheese! Photo Booths - <strike>Normally £300</strike>, Only £175!</strong><br />
      <p>Get your silly faces ready for a fun evening of snapping away with the Say Cheese Photo Booth. Great photographic equipment and lots of props are guarenteed your guests will have lots of lovely pictures to remember your night by!</p></td><br />
    <td><img src="http://www.soundvibes.co.uk/quote/saycheesequote.png" alt="" width="230" height="150" /></td><br />
  </tr><br />
  <tr><br />
    <td height="100"><strong>Picutre / Video Screen - Only £70!</strong><br />
      <p>Show your guests your most treatured photos and videos either as they enter the venue or during your disco. Plug in your laptop in or display any type of media from PowerPoint Presntations to photos from a USB pen drive.</p></td><br />
    <td><img src="http://www.soundvibes.co.uk/quote/tvquote.png" alt="" width="230" height="150" /></td><br />
  </tr><br />
  <tr><br />
    <td height="100"><strong>Smoke / Bubble Machines / Additional Microphones</strong><br />
      <p>2x Wireless Microphones for speaches - £50</p><br />
      <p>Smoke Machines (Venue permitting) - £50</p><br />
      <p>Bubble Machines - £30</p></td><br />
    <td><img src="http://www.soundvibes.co.uk/quote/extraquote.png" alt="" width="230" height="150" /></td><br />
  </tr><br />
</table><br />
<br />
<strong>Like to book or want to know more?</strong><br />
<br />
If you'd like to book you can reply to this email, along with anything you would like to ask.</p><br />
Or give us a call on:<br />
<p align="center" style="font-size: 20px;">0238 001 0460 or 07906905219</p><br />
If you have any questions please get in touch,<br />
<br />
Kind regards,<br />
Steve<br />
</td>
     </tr>
     <tr>
      <td bgcolor="#333333" style="padding: 20px 5px 20px 5px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="color: #ffffff; font-family:Verdana, Geneva, sans-serif; font-size: 11px;">
     <tr>
      <td align="left">
       Steve Dew<br>
       DJ and Owner of Soundvibes<br>
       07906905219<br>
       0238 001 0460<br><br>
       <a href="http://www.soundvibes.co.uk" target="_blank" style="color: #FFF">http://www.soundvibes.co.uk</a><br><br><br><br><br>
      </td>
      <td align="right">
        Soundvibes,<br>
        The Incuhive Space,<br>
        Mayflower Close,<br>
        Chandlers Ford,<br>
        Hampshire,<br>
        SO53 4AR<br><br>
        <a href="http://www.facebook.com/soundvibesuk" target="_blank" style="color: #FFF">Like our Facebook Page</a><br><br>
            <a href="http://www.twitter.com/soundvibesuk" target="_blank" style="color: #FFF">Follow Us on Twitter</a>

      </td>
     </tr>
    </table>
      </td>
     </tr>
    </table>
    </body>
    </html>

3 个答案:

答案 0 :(得分：0)

这就是原因：

enter image description here

你的HTML很乱。

答案 1 :(得分：0)

如果您查看包含文字＆＃34; A Star Karaoke＆＃34;的表格的代码，您会注意到TR和TD标签后面还有额外的BR标签。很确定这会造成差距。

答案 2 :(得分：0)

HTML呈现器尝试更正格式错误的表结构，并将错误放置的<br>标记放在表外。在<br>和<td>之后删除<tr>代码。您必须在表格中维护以下结构：

   <table>
       <tbody>
           <tr>
               <td>
                   <!-- PUT ANYTHING YOU LIKE HERE -->
               </td>
           </tr>
       </tbody>
    </table>

以下是您的文件更正：https://jsfiddle.net/rreamzLt/1/

相关问题
最新问题