Making tables appear next to each other in PHP

Question

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>

its look like you are looping the table content `` and the table tag is out side the loop , what is exactly your are looking for ? — Kodr.F, Mar 12 '14 at 14:46
I'm afraid your problem is not in the float property. That works with PHP perfectly fine. In fact is not depending of PHP but of CSS. Show us the HTML being rendered from the PHP code and the CSS assigned to the classes used and if possible, put them in a jsfiddle — LOTUSMS, Mar 12 '14 at 14:47
try this fiddle http://jsfiddle.net/ANMdL/ when you set css style `float: left` you have to set table `width` — Kodr.F, Mar 12 '14 at 14:49

score 0 · Answer 1 · answered Mar 12 '14 at 14:45

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.

score 0 · Answer 2 · answered Mar 12 '14 at 14:48

0

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

answered Mar 12 '14 at 14:48

matcartmill

1,573
2
19
38

A `
` is also a block element. This should achieve *basically* the same goal as adding the `table-holder1` and `table-holder2` classes to the tables instead of the divs.
– Anonymous Mar 12 '14 at 14:55

score 0 · Answer 3 · answered Mar 12 '14 at 14:52

0

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

answered Mar 12 '14 at 14:52

LOTUSMS

10,317
15
71
140

score 0 · Answer 4 · edited May 23 '17 at 10:25

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.

Thanks for the help I updated the question as it still doesn't work (assuming I'm doing it correctly) — Hau-Hau, Mar 13 '14 at 14:51
You are only using one table, you want to have each product a new table? If so, try moving the and
tags inside of the loop (ex: http://pastebin.com/YQdKTrw6) — Henrik Karlsson, Mar 13 '14 at 16:07

Making tables appear next to each other in PHP

4 Answers4