【问题标题】:Simple HTML page help/guuide required [closed]需要简单的 HTML 页面帮助/指南 [关闭]
【发布时间】:2014-06-20 01:10:15
【问题描述】:

我是 HTML 的新手,不太了解如何使用 HTML 标签,因此我发布了一个问题以从 HTML 程序员那里获得一些帮助/指导。请帮助我。

问题:- 我想设计与附件相同的设计,但下面的代码没有给我正确的输出。一切都在这里和那里,无法正确对齐。

主要问题是内容的格式和放置。我试图将它与浮动对齐,但它对我不起作用,所以我将其删除。

链接-http://jsfiddle.net/d7VNu/

<html>
<head></head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<body>
<table width="500px" height="800px">
<tr style="color:#cc0000"><td>Customer Information</td></tr>
<tr height="30px" style="font-size=10px;" ><td>Name on Order:</td> <td>Ben Berlin</td></tr>
<tr height="30px" style="font-size=10px;"><td>Delivery Address:</td> <td>724 West Aldine Avenue Chicago, IL 60657 </td></tr>
<tr height="30px" style="font-size=10px;"><td>Callback Phone #: </td> <td>248-561-9708</td></tr>
<tr height="30px" style="font-size=10px;"><td>Your [1]Store:</td> <td>2921 N Clark St, Chicago, IL 60657 | 773-549-3328 </td></tr>
<tr height="30px" style="font-size=10px;"><td>Delivery Time:</td><td>Under an hour</td></tr>

<br/>

<tr style="color:#cc0000"><td>Order Details</td></tr>
<tr style="font-size=10px;"><td>Order #:</td> <td>56760620</td></tr>
<tr style="font-size=10px;"><td>Date:</td> <td>03/27/2014 11:03AM</td></tr>

<br/>

<tr><td>Quantity</td> <td>Description</td><td>Amount</td></tr>
<tr><td>1</td> <td>Portobello Benedict</td><td>$15</td></tr>
<tr><td>2</td> <td>Iced Latte</td><td>$8</td></tr>

<br/>
<br/>
<tr><td>Subtotal:</td> <td>$23</td></tr>
<tr><td>Discount:</td> <td>-$2.50</td></tr>
<tr><td>Delivery Charges:</td> <td>$0.00</td></tr>
<tr><td>Tip:</td> <td>$3.07</td></tr>

</table>
</body>
</html>

【问题讨论】:

  • 请将您的代码放在jsfiddle 中,以便我们查看和编辑
  • 我不知道为什么人们开始反对投票。相反,他们可以评论问题中的问题。我清楚地提到我是新手,我需要帮助/指导。我没有要求任何人做勺子。
  • 正如你所看到的,有些人认为他们太优秀了,不能把时间花在初学者身上,反正按照@LcLk 告诉你的去做。然后我们可以帮助您
  • @JefferyThaGintoki 你大错特错了。有些人(包括我自己)没有时间来猜测人们可能会问什么。我们有有限的时间提供给这个网站,并且不想把它浪费在模棱两可的请求上。这与任何人认为自己比其他人“更好”无关。
  • @Clive well bro,我说有一些人,我认为每个人都包括在内了吗?并且在降级问题之前尝试帮助提问者,否则你会离开而不是降级,它对你降级问题做了什么?告诉他他在哪里犯了错误,这样他就不会再犯了,否则不要只是降级并离开。

标签: html css html-table


【解决方案1】:

在这里检查您的 HTML:Order List

还有这两个标签:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

你可以使用其中的一个,第一个一般用在 HTML 4 中,另一个用在 HTML 5 中。 另一件事是永远不要在标签中使用样式属性尝试了解更多关于 CSS 和样式表文件CSS Tutorial,因为不是每次在每个标签中都使用相同的样式,您可以使用一个带有您的样式的 extern 文件并且可以适用通过将CLASSID 添加到您的标签来添加到您所有关注的标签。

祝你好运。

【讨论】:

  • 感谢@Jeffery 的友好指导。
  • 当然兄弟 :) 不客气。
【解决方案2】:

使用此代码

你的表结构不正确

<html>
<head>
</head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<body>
<table width="500px" height="800px">
  <tr style="color:#cc0000">
    <td width="126">Customer Information</td>
    <td width="271">  </td><td width="87">&nbsp;  </td>
  </tr>
  <tr height="30px" style="font-size=10px;" >
    <td>Name on Order:</td>
    <td>Ben Berlin</td><td>&nbsp;  </td>
  </tr>
  <tr height="30px" style="font-size=10px;">
    <td>Delivery Address:</td>
    <td>724 West Aldine Avenue Chicago, IL 60657 </td><td>&nbsp;  </td>
  </tr>
  <tr height="30px" style="font-size=10px;">
    <td>Callback Phone #: </td>
    <td>248-561-9708</td><td>&nbsp;  </td>
  </tr>
  <tr height="30px" style="font-size=10px;">
    <td>Your [1]Store:</td>
    <td>2921 N Clark St, Chicago, IL 60657 | 773-549-3328 </td><td>&nbsp;  </td>
  </tr>
  <tr height="30px" style="font-size=10px;">
    <td>Delivery Time:</td>
    <td>Under an hour</td><td>&nbsp;  </td>
  </tr>
  <br/>
  <tr style="color:#cc0000">
    <td>Order Details</td>
    <td>&nbsp;  </td><td>&nbsp;  </td>
  </tr>
  <tr style="font-size=10px;">
    <td>Order #:</td>
    <td>56760620</td><td>&nbsp;  </td>
  </tr>
  <tr style="font-size=10px;">
    <td>Date:</td>
    <td>03/27/2014 11:03AM</td><td>&nbsp;  </td>
  </tr>
  <br/>
  <tr>
    <td>Quantity</td>
    <td>Description</td>
    <td align="right"><strong>Amount</strong></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Portobello Benedict</td>
    <td align="right"> <font color="#FF0000"> $15</font></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Iced Latte</td>
    <td align="right"> <font color="#FF0000">$8</font></td>
  </tr>
  <br/>
  <br/>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="right"><strong>Subtotal:</strong></td>
    <td align="right">$23</td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="right"><strong>Discount:</strong></td>
    <td align="right">-$2.50</td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="right"><strong>Delivery Charges:</strong></td>
    <td align="right">$0.00</td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="right"><strong>Tip:</strong></td>
    <td align="right">$3.07</td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="right"> <font color="#FF0000" size="+2">Total</font></td>
    <td align="right"><font color="#FF0000" size="+2">$12.15</font></td>
  </tr>
  <tr>
    <td colspan="3"> <font color="#00CCCC"  size="+1">payment detail:</font><br>
bla bala bla bala bala, bla bala bla bala bala, bla bala bla bala bala<br>
bla bala bla bala  bla bala bala, bla bala bla bala bala</td>
  </tr>
</table>
</body>
</html>

一些错过的添加(td)

【讨论】:

    猜你喜欢
    • 2014-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多