I have a loop which generates tables according to a database content.
In other words, the content is changed all the time.
Currently all tables are aligned beneath eachother. This makes one huge vertical scroll, I would save alot of space if the tables could be aligned next to eachother.
How can I do so?
Here is the table code:
$display="<table align='left'>
<tr>
<td>Found $tot_rows records
</td>
</tr>";
foreach ($results->response->docs as $doc)
{
$display.="<tr>
<td align='center'><table align='left' class='table_bg'><tr><td>FIELD NAME</td><td>VALUE</td></tr>";
foreach ($doc as $field => $value)
{
$display.= "
<tr>
<td>".htmlspecialchars($field, ENT_NOQUOTES, 'UTF-8')."</td>
<td>".htmlspecialchars($value, ENT_NOQUOTES, 'UTF-8')."</td>
</tr>";
}
$display.="</table></td></tr>";
}
}// end if $results
$display.="</table>";
Thanks
Put each table into a div like this:
<div class="tables"><table>...</table></div>
<div class="tables"><table>...</table></div>
<div class="tables"><table>...</table></div>
Then, in your CSS:
<style>
...
.tables {
float: left;
display: inline-block;
}
...
</style>
Put each table in cells ("td"-s inside one "tr") of one big outer table?
Related
I am developing a voucher printing application that prints serial numbers and pins from a MySQL table and displays them in a page.
The php code displays two records per row..with being in a separate column i.e two columns displayed side by side
Due to the format of the page (two records per row)..i can not display each record in a seperate table. Rather all records are contained in a "general" table.
The voucher printing requires two rows to be displayed on each page.
I implemented a "page-break-after: always" style to each row not divisble by two, but page break is not showing. My code is shown below:
$aray=array();
while($row=mysqli_fetch_array($sql_res))
{
$aray[]=$row;
}
$nr_elm=count($aray);
$table='<table width=100%><tr>';
$nr_col=2;
if($nr_elm>0)
{
$p=1;//This is the row counter
for($i=0;$i<$nr_elm;$i++)
{
$table.='<td><div style="border: 2px dashed #000;" ><div id="image" style="float:left;">
'.$p.' <img src="crswb1.png" height=80 width=60 />
</div><div id="texts" style=" float: none;
margin-left:60px;">
<p> Amount:'.$aray[$i]['amount'].' </p><p> Pin:17263648409</p><p> Serial:5374748548
</div></div></td>';
$col_to_add=($i+1)%$nr_col;
if($col_to_add==0)
{
if($p % 2 == 0) {
$table.="<tr style='page-break-after:always'>";
}
$table.='</tr><tr>';
$p++;
}
}
}
$table.='</tr></table>';
$table=str_replace('<tr></tr>','',$table);
echo $table;
?>
I viewed the page source and the "page break" style is showing for the neccessary row, as seen below
<tr style='page-break-after:always'></tr><tr><td><div style="border: 2px dashed #000;" ><div id="image" style="float:left;">
3 <img src="crswb1.png" height=80 width=60 />
</div><div id="texts" style=" float: none;
How can i ensure that the page break is displayed so that i can print only two rows per page?..Thanks.
The format of the page does not prevent you to use one table for every two values. E.g. use the following HTML Code:
<table id="table1">
<tr>
<td>This is cell No. 1 in Table 1</td>
<td>This is cell No. 2 in Table 1</td>
</tr>
</table>
<table id="table1">
<tr>
<td>This is cell No. 1 in Table 2</td>
<td>This is cell No. 2 in Table 2</td>
</tr>
</table>
together with the following CSS Code:
#media print {
table {page-break-after: always;}
/* prevent blank page at end */
table:last-of-type {page-break-after: auto;}
}
/* If you want the fields on one line */
table, tr {
width: 100%;
/* If the fields still don't fit on one line
* make the font-size smaller */
font-size: 0.9em
}
it will print one table per page. Notice that even the last table will cause a page-break.
To see this work I prepared a codepen here. Open the codepen and try to print the page. You should see every table on it's own page.
I'm trying to change the tr class every 2 times in my loop, but I'm not too sure about how I can count the two times. So far I have:
foreach(array_chunk($users, 2, true) as $array){
}
I split the $users array chunks of two, but where can I go on from here?
What I am trying to output:
<tr class="m0">
<td>Bob</td>
<td>Bob's Cousin</td>
</tr>
<tr class="m1">
<td>Bob's Mom</td>
<td>Bob's Dad</td>
</tr>
why do you need alternate names? if it's just for styling then you could just use css "nth-child"
Example:
CSS
table#results tr:nth-child(even)
{
background-color: red;
}
table#results tr:nth-child(odd)
{
background-color: blue;
}
HTML
<table id="results">
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
</table>
Fiddle: http://jsfiddle.net/Eh7qm/
I have the following code and I would like to style it. Are there any ways to do this?
Specifically I want to center the Columns headings and the text within each cell.
echo "Variable Profile";
echo "<table>";
echo "<th>"."STATE"."</th>";
echo "<th>"."$column_name"."</th>";
foreach($lotsofasians as $lotsofasian){
echo "<tr>";
echo "<td>".$lotsofasian->state."</td>";
echo "<td>".$lotsofasian->$column_selected."</td>";
echo "</tr>";
}
echo "</table>";
I have tried putting something like align= 'center' in the tag but I cant get it to work.
With regard to styling HTML, there's nothing special about the fact that PHP is outputting it. You can still give your elements classes, IDs, inline styling or whatever - it's just that if PHP is involved you'll have to reference these in the echo output statements.
Just change the echo statement to include classes as required, e.g.
echo "<table class='some_class'>";
Try using css rather than using inline styles
css
table th,table td{
text-align:center;
}
See demo here
Your php is going to output something like this:
<table>
<th>state value</th>
<th>column value</th>
<tr>
<td>value</td>
<td>value</td>
</tr>
</table>
I would sneak a <tr> in there for your <th> elements as well:
<table>
<tr>
<th></th>
</tr>
Then, create some css rules:
table th, table td { padding: 5px; text-align: center; }
Use css-classes or inline styles.
Why you quote Variables? Your HTML is not valid.
simplest way:
echo 'Variable Profile';
printf('<table>
<thead>
<tr>
<th>%s</th>
<th>%s</th>
</tr>
</thead>
<tbody>', 'State', $column_name);
foreach($lotsofasians AS $index => $lotsofasian) {
$style = array();
/* Example 1: center text */
$style[] = 'text-align: center;';
/* Example 2: Set Background each second output */
if($index % 2 == 0) {
$style[] = 'background: #DDDDDD;';
}
printf('<tr style="%">
<td>%s</td>
<td>%s</td>
</tr>', implode('', $style), $lotsofasian->state, $lotsofasian->{$column_selected});
}
echo '</tbody>
</table>';
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.
Is there a way to check if a table cell has a specific content and to mark that cell with the symbol " ◤ " in the top left corner of that cell?
Thanks
use this find and rerplace function:
function ReplaceCellContent(find, replace)
{
$("#table tr td:contains('" + find + "')").html(replace);
}
You probably don't want to replace the content, just mark interesting cell with the "◤".
You can use CSS :before to do that
<table>
<tr>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>ipsum</td>
<td>lorem</td>
</tr>
</table>
JS:
$("td:contains('ipsum')").addClass('found');
Working example:
http://jsfiddle.net/3NWQD/1/
Example JSFiddle answer: http://jsfiddle.net/ATV4G/1/
Javascript:
function markCell(containingText, replaceWith) { //making our function
$("td:contains('"+containingText+"')").prepend("<span class='abs'>"+replaceWith+" </span>");
}
markCell("first", "◤"); //calling the function
CSS:
.abs {
position: absolute;
}
HTML:
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
</table>
These are the minimum requirements. If you want to beautify the output, you can write further CSS to achieve requirements. (Please check JSFiddle example)
Hope this helps you :)
try this
HTML
<table border="1" id="table">
<tr><th>No</th><th>Player Name</th></tr>
<tr><td>1</td><td>Sachin</td></tr>
<tr><td>2</td><td>Dhoni</td></tr>
<tr><td>3</td><td>Raina</td></tr>
<tr><td>4</td><td>Yuvi</td></tr>
<tr><td>5</td><td>Sachin</td></tr>
</table>
jQuery
function MarkCell(PlayerName)
{
$("td").each(function(){
//alert($(this).text());
if($(this).text() == PlayerName)
{
$(this).html('◤' + PlayerName);
}
});
}
MarkCell('Sachin');
live fiddle here
Here is a PHP solution.
Let's say you have a MySQL database you're connected to and the table has columns 'state_or_province', 'city', and 'country'. If you want to mark all cells with the state or province value of "GA", you would use something like this:
echo "<table>
<tr>
<th>State</th>
<th>City</th>
<th>Country</th>
</tr>";
while($row = mysql_fetch_array($myresults)){
echo "<tr>";
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>".$row["state_or_province"]."</td>";
}
else{
echo "<td>".$row["state_or_province"]."</td>";
}
echo "<td>".$row["city"]."</td>
<td>".$row["country"]."</td>
</tr>";
}
echo "</table>";
In your CSS style section, include the following
.red{
background-color: red;
}
In this example, all cells that have the value 'GA' under the 'State' column of our rendered table would appear in a red cell. Just edit the above CSS if you want to have the "◤" symbol appear on the top left hand corner instead
UPDATE
Change
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>".$row["state_or_province"]."</td>";
}
to
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>◤".$row["state_or_province"]."</td>";
}
and you'll see the triangles inside the text boxes