Vertically align product prices across multiple table cells - php

Sorry about the length here. I'm using oscommerce and have a page with all our product specials laid out in a 3 column table. I need to align the price of each product so that all the prices align across the screen with one another.
Visually, this is what I would like:
|-----------------------|
| Image | Image | Image |
| Title | Long | Very, |
| | Title | very, |
| | | long |
| | | title |
|$19.99 |$29.99 |$139.00|
|-----------------------|
Currently, this is what the existing code generates:
|-----------------------|
| Image | Image | Image |
| Title | Long | Very, |
| $19.99| Title | very, |
| |$29.99 | long |
| | | title |
| | |$139.00|
|-----------------------|
This is the code as it stands:
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<?php
$column = 0;
$specials_query = tep_db_query($specials_split->sql_query);
while ($specials = tep_db_fetch_array($specials_query)) {
$column ++;
echo '<td align="center" width="33%" class="productListing-data" valign="top">
<div class="prodimagebox"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO,
'products_id=' . $specials['products_id']) . '">' . tep_image(DIR_WS_IMAGES .
$specials['products_image'], $specials['products_name'], SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT) . '</a></div><br><a href="' .
tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $specials['products_id'])
. '">' . $specials['products_name'] . '</a><br>'
. $currencies->display_price($specials['specials_new_products_price'],
tep_get_tax_rate($specials['products_tax_class_id'])) . '</td>' . "\n";
if ((($column / 3) == floor($column / 3))) {
?>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<tr>
<?php
}
}
?>
</tr>
</table>
I was trying to write some code that writes out the image and title, then takes us back 3 steps in the array. Next a new row, then three new columns containing the prices for the products above, a separator, and then continue on from there.
This way the prices would all be vertically aligned with one another, no matter the size of the title. I was heading down the pass of multiple nested loops and still getting no closer to my final result.
Help would be greatly appreciated.

you should put the description and the price into two different divs:
<style>
td.productListing-data div.item_wrapper {
position: relative;
}
td.productListing-data div.item_wrapper div.item_description {
margin-bottom: 15px;
}
td.productListing-data div.item_wrapper div.item_price {
position: absolute;
bottom: 0;
height: 15px;
}
</style>
<td align="center" width="33%" class="productListing-data" valign="top">
<div class="item_wrapper">
<div class="item_description">
<!-- the description -->
</div>
<div class="item_price">
<!-- the price -->
</div>
</div>
</td>
I have just created an example, all you need to do is to work it into your table creation.

Related

Need help styling html tables using colspan

I have dynamic data where it could always change. For example:
This is what I have now:
Sometimes like this:
|==============|======|====|====|
|List of people|John |June|Tom |
|Date Join |2017 |2018|2016|
|Hobby |soccer| |
|Remark | test test |
And sometime I would get like this:
|==============|======|======|=====|
|List of people|John |June |Tom |
|Date Join |2017 |2018 |2016 |
|Hobby |soccer|tennis| |
|Remark | test test |
I want to make something like this: (is there any way to do it?)
|==============|======|====|====|
|List of people|John |June|Tom |
|Date Join |2017 |2018|2016|
|Hobby | soccer |
|Remark | test test |
or like this:
|==============|======|====|====|
|List of people|John |June|Tom |
|Date Join |2017 |2018|2016|
|Hobby | soccer|Tennis |
|Remark | test test |
Here is the code I used: (this is how I do it for list of people, date and hobby)
#foreach($object7 as $val)
<tr>
<th style="border: 1px black solid">List of people</th>
<?php
$test = $val->people;
$testa = rtrim($test, ', ');
$array = explode(', ', $testa);
$count4 = count($array);
?>
#foreach($array as $item)
#if(($val->people == NULL) || ( $count4 <= 1))
<td style="border: 1px black solid" colspan="8">
#else
<td style="border: 1px black solid" colspan="1">
#endif
{{$item}}
</td>
#endforeach
</tr>
#endforeach
EDIT:
The remark row only has 1 value while the rest can have more than 1 value or more. What I want is based on all this, how can I make all of them the same length?
Try the "colgroup" tag lets try to set their width to make it fix:
#foreach($object7 as $val)
<tr>
<td style="border: 1px black solid" with="40%">List of people</td>
<?php
$test = $val->people;
$testa = rtrim($test, ', ');
$array = explode(', ', $testa);
$count4 = count($array);
?>
#foreach($array as $item)
#if(($val->people == NULL) || ( $count4 <= 1))
<td style="border: 1px black solid" with="60%">
#else if($count4 == 2)
<td style="border: 1px black solid" with="40%">
#else
<td style="border: 1px black solid" with="20%">
#endif
{{$item}}
</td>
#endforeach
</tr>

Trying to create a schedule for a GYM web

I finished my studies but now I need to develop a project and I thought about creating a web app for a gym, but I'm stuck on the schedule module. I need it to get the info from a database like this:
+--------+------------+--------+----------+------+-----------+------------+
| ID_Act | HoraInicio | Dia | Duracion | Sala | DNI_Prof | Dificultad |
+--------+------------+--------+----------+------+-----------+------------+
| 1 | 09:00:00 | LUNES | 45 | 1 | 12345678A | 2 |
| 1 | 09:00:00 | MARTES | 45 | 1 | 12345678A | 3 |
| 1 | 10:30:00 | LUNES | 45 | 1 | 12345678A | 1 |
+--------+------------+--------+----------+------+-----------+------------+
ID_Act: Activity ID
HoraInicio: Start time
Dia: Day
Duración: Duration
Sala: Room
DNI_Prof: Teacher ID
Dificultad: Level
I've been trying to create the whole schedule using a for loop so I don't have to copy&paste 50 rows. I can create the whole schedule with the loop but I can not print the values that I need to have in the proper cell.
This is the code of what I've been trying:
<?php session_start(); ?>
<?php
include("connbd.php");
$consulta="SELECT actividades.nombre AS Actividad, ID_Act, HoraInicio, Dia, Duracion, Sala, Dificultad FROM horarios
JOIN actividades WHERE actividades.id LIKE ID_Act;";
$resultado=mysqli_query($conn,$consulta);
$hora = array("09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30",
"11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45",
"15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00",
"18:15","18:30","18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45","21:00");
?>
<div id=contenidoHorarios class="contenidoHorarios">
<div id=contenidoHorariosTabla class="contenidoHorariosTabla">
<div id=contenidoHorariosTablaHoras class="contenidoHorariosTablaHoras">
<table border="1px" id="contenidoHorariosTablaTabla" class="contenidoHorariosTablaTabla">
<tr>
<th width="5%"></th>
<th width="13.57%">Lunes</th>
<th width="13.57%">Martes</th>
<th width="13.57%">Miércoles</th>
<th width="13.57%">Jueves</th>
<th width="13.57%">Viernes</th>
<th width="13.57%">Sábado</th>
<th width="13.57%">Domingo</th>
</tr>
<?php
foreach ($hora as $horatupla) {
?>
<tr>
<th><?php echo $horatupla; ?></th>
<td id="<?php
while ($row=$resultado->fetch_assoc())
{
$id = $row['ID_Act'];
$horainicio = substr($row['HoraInicio'],0,-3);
$dia = $row['Dia'];
$duracion = $row['Duracion'];
$sala = $row['Sala'];
$dificultad = $row['Dificultad'];
$actividad = $row['Actividad'];
if($dia=='LUNES'){echo $dia . $horatupla;} ?>" rowspan="<?php if($duracion=='15' || $duracion==''){echo '1';} if($duracion=='30'){echo '2';} if($duracion=='45'){echo '3';} ?>"
<?php
if ($horatupla==$horainicio)
{
echo $actividad;
}
}
?>>
</td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
I hope you understand what I'm saying, but to help you, I give you a example of what I do want to do (no spam).
http://www.go-fit.es/Horarios/Index

How to make table format, repeat on each print page?

How to make repeat table on each page and sum of the column only shown on last page. I want to make something like this.
PAGE I
---------------------------
| no | item | qty |
---------------------------
| 1 | Item 1 | 2 |
| 2 | Item 2 | 2 |
| 3 | Item 3 | 3 |
.........
| 20 | Item 20 | 1 |
---------------------------
| TOTAL | |
---------------------------
PAGE 2
---------------------------
| no | item | qty |
---------------------------
| 21 | Item 21 | 2 |
| 22 | Item 22 | 2 |
| 23 | Item 23 | 3 |
.........
| 40 | Item 40 | 1 |
---------------------------
| TOTAL | 50 |
---------------------------
As you can see, i need to show exact table design on each page and each page limit with 20 item only, and sum of the qty shown on last page.
this is i have been working on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
#media print
{
#printbtn {display: none;}
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
#media screen
{
thead { display: block; }
tfoot { display: block; position: fixed; }
}
</style>
<script type="text/javascript">
function printDiv(divID) {
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
}
</script>
</head>
<body>
<input type="button" value="print" onclick="javascript:printDiv('tabel');">
<div id="tabel">
<table width="1200" border=0>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<td>No.</td>
<td>Headerrr</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This is Footer</td>
<td>this is footer too</td>
</tr>
</tfoot>
<tbody>
<?
$x=1;
for($x=1;$x<=500;$x++)
{
?>
<tr>
<td><?echo $x;?></td>
<td><?echo "Data ".$x;?></td>
</tr>
<?
}
?>
</tbody>
</table>
</div>
</body>
</html>
This is very important to my job. I really appreciate any suggest. Thank you.

Add a values to a table from text field

There is a text field and a table. If we put a value in that text field the corresponding name needs to be displayed on the table from data base:
<form method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<center><table>
<tr><td>no</td><td><input type="text" name="no" autofocus></td></tr>
</table></center>
<br>
<br>
<center>
<table cellpadding="0" cellspacing="0" width="60%" border='1' bgcolor="#999999">
<thead>
<tr>
<th> Element_Number</th>
</tr>
</thead>
<?php
if(isset($_POST['no']))
{
$c=mysql_connect("localhost","root","");
mysql_select_db("test");
if(!$c)
{
echo "db prob".mysql_error();
}
$no=$_POST['no'];
$qry=mysql_query("select name from opt where no='$no'");
if(!$qry)
{
echo "ret".mysql_error();
}
if(mysql_num_rows($qry)!=0)
{
$row=mysql_fetch_array($qry);
$name=$row['name'];
}
else
{
echo "query Invalid";
}
echo "<td>" .$name."</td></tr>" ;
}
?>
when I tried this code output like this-->
no--001
|element no |
| aaa |
no--002
|element no |
| bbb |
what I want to do to get an output like this--->
no--001
|element no |
| aaa |
no--002
|element no |
| aaa |
| bbb |
no--003
|element no |
| aaa |
| bbb |
| ccc |

Skip every other cell on hover with highlight in CSS

I have the following code that displays an html table of words and their counts from a PHP associative array. A table can have up to 10 columns by 10 rows (it's variable):
| col1 | col2 | col3 | col4 |
|-------|------|-------|------|
| word1 | 50 | word4 | 25 |
| word2 | 44 | word5 | 21 |
| word3 | 39 | word6 | 16 |, etc.
The CSS highlights and underscores individual <td> cells on hover. However, I need the hover/highlight/underscore to work ONLY on the <td> cells with words--not on the numbers. The words will always be in odd-numbered columns--and numbers will always be in even-numbered columns.
Can you please suggest the code that will do that? I've read that I might need to do this in jQuery because of browser issues related to hover. Here's what I have so far. Thank you in advance. :)
?>
<table id="word-table">
<?echo "<th>Word Counts</th>";?>
<tbody>
<?
foreach ($rows as $cols) {
echo '<tr><td>' . implode('</td><td class="nth-child(2n-1)">', $cols) . '</td></tr>';
}
?>
</tbody>
</table>
<?
#word-table td:nth-child(2n-1) {
background: #CCFFCC;
}
#word-table td:nth-child(2n) {
display: block;
background: #CCE0FF;
margin-right: 7px;
text-align: center;
}
#word-table tbody td:hover
{
cursor: hand;
cursor: pointer;
color: blue;
text-decoration: underline;
background: #FFFFCC;
}
You don't need jQuery for this, you can just use CSS.
td:nth-child(odd):hover{
...
}
Works reliably in most browsers: http://caniuse.com/css-sel3
Demo: http://jsfiddle.net/PV6jV/
Also, I notice you're adding nth-child(2n-1) as a class - :nth-child is a pseudo class, so you don't have to actually add it.
Explicit is better
<? foreach ($rows as $cols): ?>
<tr>
<td> <?php echo $cols[0]; ?></td>
<td class="highlight"> <?php echo $cols[1]; ?></td>
<td> <?php echo $cols[0]; ?></td>
<td class="highlight"> <?php echo $cols[3]; ?></td>
</tr>
<?php endforeach; ?>

Categories