Having problems with aligning text in html
Question
Ok I am having trouble aligning text and images within a table and browser in general. I have wrote all the code but I am having trouble in three areas:
- The image and text are not aligning right, the desired result should look like the following:
More specifically, I cannot make the area and perimeter underneath each other. I even added the \\n but it is not working.
Within the PHP formulas one of them is not working, I localized it to one formula in particular it is this one that is giving me problems:
$hypo = number_format(sqrt(pow(2 , 10.2) * pow(2 , 5.4), 2);
My entire code is as follows:
<!DOCTYPE html>
<!--
Author:Randy Gilman
-->
<!--Table one-->
<?php
$cir_area = number_format(M_PI * pow(2 , 2.65), 2);
$cir_circum = number_format(2 * M_PI * 2.65, 2);
$rect_area = 4.2 * 5.6;
$rect_per = (2 * 4.2) + (2 * 5.6);
$tri_area = number_format(5.4 * (10.2/2), 2);
$hypo = number_format(sqrt(pow(2 , 10.2) * pow(2 , 5.4), 2);
$tri_per = number_format(5.4 + 10.2 + $hypo, 2);
$sqr_area = number_format(pow(2 , 5.3), 2);
$sqr_per = number_format(5.3 * 4, 2);
?>
<html>
<head>
<meta charset="UTF-8">
<title> Randy's Table</title>
</head>
<body>
<table border = "5px">
<tr>
<th> Circle
<IMG SRC="http://www.indezine.com/products/powerpoint/learn/shapes/images/drawingtargetppt2010_02.jpg" ALT="circle" ALIGN=Right style="width:52px;height:52px;border:0;">
<?php echo "Area = $cir_area square meters";
echo "\nCircumference = $cir_circum meters"; ?>
</th>
<th> Rectangle
<IMG SRC="http://image.tutorvista.com/cms/images/38/rectangle-figure1.jpg" ALT="rectangle" ALIGN=Right style="width:52px;height:52px;border:0;">
<?php echo "Area = $rect_area square meters";
echo "\nPerimeter = $rect_per meters"; ?>
</th>
</tr>
<tr>
<th> Right Triangle
<IMG SRC="http://dasha46.narod.ru/Encyclopedic_Knowledge/Mathematics/Shapes/right_triangle.jpg" ALT="circle" ALIGN=Right style="width:52px;height:52px;border:0;">
<?php echo "Area = $tri_area square meters";
echo "\nPerimeter = $tri_per meters"; ?>
</th>
<th> Square
<IMG SRC="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" ALT="square" ALIGN=Right style="width:52px;height:52px;border:0;">
<?php echo "Area = $sqr_area square meters";
echo "\nPerimeter = $rect_per meters"; ?>
</th>
</tr>
</table>
</body>
<!--End of table one-->
</html>
Additionally, here is what my code produces currently if I remove the $hypo formula:
Any help would be appreciated. Thanks.
3 answers
solution1
1 2016-01-31 20:04:29
Here's an answer for #2
You need to use HTML line breaks <br /> , browsers ignore new lines in the code when creating the page.
As an example, for your Square section...
<th>
Square
<IMG ... />
<br />
<?php echo "Area = $sqr_area square meters"; ?>
<br />
<?php echo "Perimeter = $rect_per meters"; ?>
</th>
solution2
1 2016-01-31 20:06:45
you can use <br> tag to return line
example
<th>
Circle <IMG SRC="http://www.indezine.com/products/powerpoint/learn/shapes/images/drawingtargetppt2010_02.jpg" ALT="circle" ALIGN=Right style="width:52px;height:52px;border:0;">
Area = <?=$rect_area square meters?><br/>
Perimeter = <?=$rect_per meters?>
</th>
solution3
1 ACCPTED 2016-01-31 20:18:56
Your formulas are wrong. pow(2, 3) is 2 to the power of 3 which is 8 . Here and there you need to compute X * X which is X to the power of 2 ie pow(X, 2) .
Even if pow($x, 2) seems to be smarter than $x * $x it is not. It's harder to read and understand and it runs slower because it involves a function call and function calls always take time to be processed.
The formula of the hypotenuse of a square triangle is sqrt(a*a+b*b) . In terms of your code this is:
$hypo = sqrt(10.2 * 10.2 + 5.4 * 5.4);
As a general recommendation, do not mix the computation of values with their display, not even with the preparations for display. Compute all the values as numbers then use number_format() in the HTML part, just for display.
Regarding the HTML formatting, read the other answers and/or search the web for HTML line break .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.