Simple HTML page help/guuide required [closed]

StackOverflow https://stackoverflow.com/questions/23443570

  •  14-07-2023
  •  | 
  •  

Question

I am totally new in HTML and not having much idea how to work with HTML tag so that I am posting a question to get some help/guidance from the HTML programmers. Please kindly help me.

Question :- I want to design the same as attached and the code below is not giving me the correct output. Everything is here and there and not able to align it properly.

The main issue is formatting and placing of content. I tried to align it with float but it didn't worked for me so I removed it.

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

enter image description here

Was it helpful?

Solution

Here check your HTML: Order List

and also for this two tags:

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

you can use one of these, the first one is generally used in HTML 4, and the other one is used in HTML 5. One other thing is to never use the style attribute in your tags try to learn more about CSS and stylesheet files CSS Tutorial, because instead of using the same style everytime in each tag you can use one extern file with your style and can be applicable to all your concerned tags by adding CLASS or ID to your tag.

GoodLuck bro.

OTHER TIPS

use this code

your table structure was not correct 

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

some missed add ( td )

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top