I'm new to PHP and trying to make the tables appear next to each other instead of appearing under the first one. I was trying to use "table style="float: left"" but that apparently doesn't work in PHP, anyone have an idea of how to do this?
Tried to fix it using your help, but nothing happens, maybe I'm misunderstanding something, I'm not very great at this.
<html>
<head>
<title>Produktsida</title>
<style type=”text/css”>
table {
display: inline-block
width: 500px;
}
</style>
</head>
<body>
<?php
require_once 'dbconfig.php';
$result = mysqli_query($con,"SELECT * FROM produkt JOIN bild ON bild.idBild = produkt.idProdukt JOIN ingrediens ON ingrediens.idIngrediens = produkt.idProdukt");
?>
<table border='1'>
<?php
while($row = mysqli_fetch_array($result))
{
$imgData = base64_encode($row['Bild']);
?>
<tr>
<td>
<img src="data:image/jpeg;base64,<?php echo $imgData ?>" /> </td>
</tr>
<tr>
<td>
<?php echo $row['Produkt_Namn'] ?>
</td>
</tr>
<?php } ?>
</table>
<?php
mysqli_close($con);
?>
</body>
PHP has very little to do with this. The browser (which does the rendering) only sees the output from PHP (and any static files you reference).
table style="float: left" should work fine, just watch your quotes. You can't use an unescaped " inside a PHP string literal that is delimited by " characters.
Either use ' or escape the quote character.
PHP isn't a client-side language, it's server-side. Any output that you make in PHP is rendered as HTML.
By default, I believe tables are block level items, meaning that they don't allow content next to them.
What you can do is wrap your tables in a DIV element.
CSS
div.table-holder1 { width:50%; float:left; }
div.table-holder2 { width:50%; float:right; }
PHP
print '<div class="table-holder1"><table>...</table></div>';
print '<div class="table-holder2"><table>...</table></div>';
Unless you gave your tables a class, I'd do this:
<table class="myTableClass">
....
</table>
.myTableClass{width:40%; float:left; margin-right:5%}
That oghtta fix it
Not directly related to the question
My first tip would be to reformat your code without echoing every line of code:
<?php
$result = mysqli_query($con,"SELECT * FROM produkt JOIN bild ON bild.idBild = produkt.idProdukt JOIN ingrediens ON ingrediens.idIngrediens = produkt.idProdukt");
?>
<table border='1'>
<?php
while($row = mysqli_fetch_array($result)) { /* Begin looping the rows */
$imgData = base64_encode($row['Bild']);
?>
<tr>
<td>
<img src="data:image/jpeg;base64,<?php echo $imgData ?>" />
</td>
</tr>
<tr>
<td>
<?php echo $row['Produkt_Namn'] ?>
</td>
</tr>
<?php } /* End looping the rows */ ?>
</table>
<?php
mysqli_close($con);
?>
The answer
You have to style your table with css. By default tables are a block level element which automatically put a line break after the element.
There are two main types of display properties of css:
//The default for the tables, divs etc. Most elements use display: block.
display: block
//The default for span, img and some others
display: inline
As you may know, a span element doesn't put a line break after the element, so you could've used it if it was not for one problem: They don't have any real dimensions, so you can't set a width or height to them for example.
To solve this modern browsers has implemented display: inline-block which combines the no line break of a span and the dimensions of a div. According to caniuse it has closely to 93% browser support, so it's almost ready to be used.
If you want to go with display: inline-block, you could use this css snippet:
table {
display: inline-block
width: 500px;
}
If you would like to read more about inline-block, refer to this question about float vs inline-block.
Related
I get numbers from a MySQL DB and put them in a dynamic table, every number in a different line. The problem is that the numbers are left-aligned, and that looks dirty, like
125
2
78
I want a output like:
125
2
78
I use the following output from the database:
echo "<td>".$dataset['minutenstaffel']."</td>";
Format the <td> is no option.
I tried with sprintf but this doesnt work:
echo "<td>".printf("%s",$dataset['trikotnr'])."</td>";
Thank you!!
use style text-align:right
echo "<td style="text-align:right">".$dataset['minutenstaffel']."</td>";
Spaces in HTML are reduced to a single space upon rendering, so the added spaces won't do anything. The exception is when using <pre>. This is really a styling issue though.
HTML:
<table>
<tr><td>
<span class="align-numbers">123</span>
</td></tr>
<tr><td>
<span class="align-numbers">1234567</span>
</td></tr>
<tr><td>
<span class="align-numbers">1</span>
</td></tr>
</table>
CSS:
td .align-numbers {
float: right;
font-family: monospace;
}
Codepen: http://codepen.io/anon/pen/LGPjNa
This code should work with jQuery mobile's table reflow feature. Make sure your PHP wraps the values in a <span class="align-numbers"> so the CSS applies correctly.
text-align:right
echo '<td style="text-align:righ">'.$dataset['minutenstaffel'].'</td>
**It's working for me like this **
just add span and 'style="float: right !important';
$nestedData[] = '<span style="float: right !important;">'.number_format($DR['montant'], 2, ',', ' ').'</span>';
I have tried numerous different page-break rules on a table element and I've exhausted myself.
Project location:
https://github.com/xremainnameless/lead_tracker
The table I'm trying to print is located on 'leads_queue_u.php' inside the '#lead_wrapper_u' div. I dynamically create the table using 'scripts/fill_all_leads_u.php' and I print the table using the custom print button on the document.
No matter which css rules I've applied, I can't seem to force the page breaking. I deleted all of my attempts, as to show cleaner code. Here is a snippet of the #print CSS:
#media print {
#page {size: landscape;}
body * {visibility: hidden;}
#lead_wrapper_u, #lead_wrapper_u * {visibility: visible;}
#lead_wrapper_u button {visibility: hidden;}
#lead_wrapper_u {
position: absolute;
left: 0;
Top: 0;
}
}
I always advice to not use the print button in the browsers (ctrl + p); because each browser has it's own preferences. You can depend on other frameworks to print the pages into different formats. e.g. fpdf framework.
But, if you insist to use the browsers button to print, you can replace all the tables, with divs; Since divs are always break in the end of the page, without distortion the layout.
for example, if you have this code:
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td>City</td>
</tr>
<tr>
<td>DOB</td>
</tr>
</table>
.
.
.
Then, you have to remove the table elemnts, and replace by a div, like this:
<div style = "border:black solid;">
<div style = "border:solid black;">Name</div>
<div style = "border:solid black;">City</div>
<div style = "border:solid black;">DOB</div>
</div>
.
.
.
This will make sure that each div will break to next page, without looking like it's been cut.
Here is table data that sometimes needs to be aligned right, and other times needs to be aligned center:
<td colspan="5"><p align="right"><?php echo number_format($total_adjusted_taxes,2) ?></p></td>
What determines whether to align right or centered is this variable:
<?php $r_or_c = (count($categories)==1?"right":"left");
?>
What is the best way to use this variable $r_or_c inside the p tag?
<td colspan="5"><p align="<?php echo (count($categories)==1?"right":"left");?>"><?php echo number_format($total_adjusted_taxes,2) ?></p></td>
Is that what you asked?
Just shove it in there. Not much complication to it.
<td colspan="5"><p align="<?=$r_or_c?>"><?php echo number_format($total_adjusted_taxes,2) ?></p></td>
On a side note, you should start using CSS for styling :)
.align-right { text-align: right; }
.align-left { text-align: left; }
-
<td colspan="5"><p class="align-<?=$r_or_c?>"><?php echo number_format($total_adjusted_taxes,2) ?></p></td>
I'll write something like this. You're going to echo in place the correct value:
<p align="<?php echo count($categories)=='1' ? 'right' : 'left'; ?>">....</p>
I prefer using CSS to style elements, though, so you can use the same method to assign a different class, or just style="text-align:<?php echo....;?>">. Using class is better because you won't need to make changes in every single paragraph you write your inline style.
If you define your variable somewhere else, and just want to echo it (like your doing, it seems):
$r_or_c = count($categories)=='1' ? "right" : "left";
<p align="<?php echo $r_or_c;?>">....</p>
As someone else said, it's better not to use this inline styling, or you'll make your code more difficult to maintain in the future. You could style the <td> instead of your paragraph also:
css:
.left { text-align:left;}
.right { text-align:right;}
/* OR : */
td.left {}
td.right{}
html:
<td class="<?php echo $r_or_c;?>">......</td>
Also, you said "center" but wrote "left", don't know what you really need, so in case just subsitute 'left' with 'center', obviusly.
As my comment to the question, as responded to by the OP:
...was indeed [what] [he] was looking for. Worked perfect[ly].
I've opted to post that comment as an answer:
I'd suggest removing the p tag entirely, and using <td style="text-align: <?php echo $r_or_c; ?>;">. That, or assign a class-name to the td ('right' or 'center'), and use that to style the text-alignment.
I am trying to display images vertically 5 per row using php and I have achieved it.
I am also using a div and this seems to be creating a problem.
Images are displayed horizontally, but there seems to be a huge space between each image.
Heres the php code:
<table width="500" border="0" cellpadding="2" cellspacing="3">
<tr>
<?php
// get the images for the new videos
$query = "SELECT * FROM videos";
$result = mysql_query($query);
$numimages = 0;
while ($row = mysql_fetch_assoc($result)) {
extract($row);
// extract youtube id
preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
// $matches[ 1 ] should contain the youtube id
?>
<td valign="top">
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="<?php echo $video_title;?>">
<img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
</a>
</div>
</td>
<?php
$numimages++;
if ($numimages%3 == 0)
echo "</tr><tr>";
}
?>
</tr>
</table>
This is the css:
#videogallery {
width:500px;
zoom:1;
}
#videogallery span{
display:block;
}
#videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:3px;
width:160px;
font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-weight:normal;
color:#333333;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#videogallery a img{
display:block;
border:none;
margin:0;
}
#videogallery a:hover{
opacity:1;
}
I have noticed a few things. First, ids must be unique in html, but they are not in your document. You create <div id="videogallery"> in a loop, so that id appears multiple times. You should change the id into a class (or remove the div completely).
Also #videogallery is set to have a width of 500 pixels, which is also the width of the containing table. If you plan to have 5 images next to each other, the width of a div (or an image) should not exceed 100 px. Reducing the width should already help you to reduce the gap between images.
It's generally not a good idea to use tables for layout, it should be possible to get the same effect without tables. That gives you more flexibility. (Determining the number of images per row should be a layout issue, not a code issue.)
90% of that code is completely redundant.
You don't need the tables (in fact, it's considered very poor practice to use them for layout like this these days), and you don't need the wrapper <div> elements around your images.
Your <a> tags are already styled with display:inline-block;, so actually they should already line up horizontally without any of that stuff. Just put them next to each other, without all the extra junk, and they'll line up quite happily for you. You can use margin and padding to put any extra spacing between them that you do require.
All you need beyond that is a single wrapper <div> around the whole lot to enforce a fixed width for the whole block, so that they wrap onto new lines at the right points.
Hope that helps.
there seems to be a huge space between
each gap.
Do you mean a 7 pixel gap?
<table width="500" border="0" cellpadding="2" cellspacing="3">
you may avoid <table> alltogether by using div and css float see this http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
See http://jsfiddle.net/ZfyRb/
I have one table in loop which come under li:
<?php
for($i=1;$i<=$tc;$i++)
{
$row=mysql_fetch_array($result);
?>
<li style="list-style:none; margin-left:-20px">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hline" style="width:267px"><?php echo $row['tit'] .",". $row['name'] ?></td>
<td class="vline" style="width:1px"> </td>
<td class="hline" style="width:100px"><?php echo $row['city']; ?></td>
</tr>
</table>
</li>
<?php
}
?>
The output comes like this:
alt text http://img20.imageshack.us/img20/4153/67396040.gif
I can't put table outside the loop, due to <li> sorting
if you can't use table outside the loop then i think best option will be use of
<div>
statement
for example
<div class="q-s na">
<div class="st" style="margin-right:10px; width:150px">
<div class="m-c"><?php echo $row['tit'] .",". $row['name'] ?></div>
</div>
this will be same as you one
<td>
you can define style according to your requirements.
for example
<style>
.q-s{overflow:hidden;width:664px;float:left;
padding-top:2px; padding-bottom:2px; height:25px}
.na .st{ float:left;}
.na .m-c {border-bottom:1px dotted #999; padding-bottom:10px; height:15px}
</style>
i can't put table outside the loop.
Why not? This is where it belongs. After all, you (logically) produce one table, not many of them. No need for the list item, either.
If you're unable to put the table outside of the loop, you should probably just use tags rather than creating tables, as you're defeating the purpose of even having a table by making each table a single row and trying to stack them.
Another thing to note if you are going to stick with tables:
If you're hard-coding the table width AND all of the table cell (column) widths, it may cause unexpected issues when they don't add up:
Table width = 600px
Cells = 267 + 1 + 100 = 368px