Question

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

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

主要问题是格式化和放置内容。我试图将它与浮动对齐，但它对我没有用，所以我把它删除了。

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

enter image description here

Answer 1

使用此代码

你的桌子结构不正确

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

Answer 2

请检查您的HTML：Order List

以及这两个标签：

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

您可以使用其中一种，第一种通常用于HTML 4，另一种用于HTML 5。另一件事是永远不要在你的标签中使用style属性尝试更多地了解CSS和样式表文件CSS Tutorial，因为不是每次在每个标签中使用相同的样式，你可以使用一个带有你的风格的外部文件通过在代码中添加CLASS或ID来适用于您所有相关的代码。

GoodLuck兄弟。

需要简单的HTML页面帮助/指南

2 个答案: