I currently have this html table using SQL results to fill it:
<table>
<table border="1">
<tr>
<th>Username</th>
<th>holid</th>
<th>Start date</th>
<th>end date</th>
<th>Work days off</th>
</tr>
<?php foreach($rows as $row): ?>
<table border="1">
<tr>
<td><?php echo htmlentities($row['username'], ENT_QUOTES, 'UTF-8');?></td>
<td><?php echo htmlentities($row['starthol'], ENT_QUOTES, 'UTF-8'); ?></td>
<td><?php echo htmlentities($row['endhol'], ENT_QUOTES, 'UTF-8'); ?></td>
<td><?php echo htmlentities($row['days'], ENT_QUOTES, 'UTF-8'); ?></td>
<td>Approve</td>
<td>Reject</td>
</tr>
<?php endforeach; ?>
</table>
This works fine and everything, but the table is very messy and the headings are out of line. Is there a simple way to make this cleaner (php beginner).
Here is the extra table tag removed coding and see below for the css coding.
<table border="1">
<tr>
<th>Username</th>
<th>holid</th>
<th>Start date</th>
<th>end date</th>
<th>Work days off</th>
</tr>
<?php foreach($rows as $row): ?>
<tr>
<td><?php echo htmlentities($row['username'], ENT_QUOTES, 'UTF-8');?></td>
<td><?php echo htmlentities($row['starthol'], ENT_QUOTES, 'UTF-8'); ?></td>
<td><?php echo htmlentities($row['endhol'], ENT_QUOTES, 'UTF-8'); ?></td>
<td><?php echo htmlentities($row['days'], ENT_QUOTES, 'UTF-8'); ?></td>
<td>Approve</td>
<td>Reject</td>
</tr>
<?php endforeach; ?>
</table>
/*css styles*/
table {
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
Delete the second <table border="1">, the one below the foreach instruction.
EDIT: And one of the first ones as well. Every <table> tag should have one corresponding </table> (that goes for all tags in HTML!)
Also, try to match <th>s with <td>s. Right now there are 5 <th>s and each row has 6 <td>s.
Related
I've got this code that works well now but thought it would be useful to have the Observed Data start from the newest date to the oldest. How can I flip only the Observed Data? Here is the code (Sorry if it doesn't look right on here, still getting use to posting on this site):
<?php
$url = "http://r7j8v4x4.map2.ssl.hwcdn.net/NOD_R.xml";
$xml = simplexml_load_file($url);
?>
<?php foreach ($xml->RESULTSET[0]->ROW as $MSG) :?>
<?php echo '<h4>', $MSG->MSG_TXT; '</h4>'; ?>
<?php endforeach; ?>
<!-- Table Style -->
<style>
table {border: 2px solid #fff;}
table td {height: 15px;}
table td {border: 1px solid #fff; }
table tr {border: 1px solid #fff; }
table td {padding: 3px; }
</style>
<h2>Observed Data</h2>
<table>
<div style="overflow-x:auto;">
<thead>
<tr>
<td><span style="margin:0px; font-weight:bold">Day</span></td>
<td><span style="margin:0px; font-weight:bold">Time(EST)</span></td>
<td><span style="margin:0px; font-weight:bold">Reservoir Elev.(behind dam)*</span</td>
<td><span style="margin:0px; font-weight:bold">Tailwater Elev.(below dam)*</span></td>
<td><span style="margin:0px; font-weight:bold">Avg Hourly Discharge* </span></td>
</tr>
</thead>
<tbody>
<?php foreach ($xml->RESULTSET[1]->ROW as $obs) :?>
<tr>
<td><?php echo $obs->OBS_DAY; ?></td>
<td><?php echo $obs->OBS_HR; ?></td>
<td><?php echo $obs->UPSTREAM_ELEV; ?></td>
<td><?php echo $obs->DOWNSTREAM_ELEV; ?></td>
<td><?php echo $obs->AVG_HOURLY_DISCHARGE; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<h2>Predicted Data</h2>
<table>
<div style="overflow-x:auto;">
<thead>
<tr>
<td><span style="margin:25px; font-weight:bold">Day</span></td>
<td><span style="margin:5px; font-weight:bold">Average Inflow* </span</td>
<td><span style="margin:5px; font-weight:bold">Midnight Elevation*</span></td>
<td><span style="margin:5px; font-weight:bold">Average Outflow*</span></td>
</tr>
</thead>
<tbody>
<?php foreach ($xml->RESULTSET[2]->ROW as $pred) :?>
<tr>
<td><?php echo $pred->PREDICTED_DAY; ?></td>
<td><?php echo $pred->DAILY_AVG_INFLOW; ?></td>
<td><?php echo $pred->MIDNIGHT_ELEV; ?></td>
<td><?php echo $pred->DAILY_AVG_OUTFLOW; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>`
You can read them into arrays before you output.
foreach ($xml->RESULTSET[1]->ROW as $obs) {
$resultSet1[] = $obs;
}
foreach ($xml->RESULTSET[2]->ROW as $obs) {
$resultSet2[] = $obs;
}
That will make it easier for you to reverse them. Once they're in arrays there are various ways to do it. You can use array_reverse, a for loop with a decrementing index, or something like this:
<?php while ($obs = array_pop($resultSet1)) :?>
<tr>
<td><?php echo $obs->OBS_DAY; ?></td>
<td><?php echo $obs->OBS_HR; ?></td>
<td><?php echo $obs->UPSTREAM_ELEV; ?></td>
<td><?php echo $obs->DOWNSTREAM_ELEV; ?></td>
<td><?php echo $obs->AVG_HOURLY_DISCHARGE; ?></td>
</tr>
<?php endwhile; ?>
I am implementing cloth shopping website in which stock is added to the database by admin and admin can view, update and delete stock as well. while displaying record in table from the database I want that the item from stock that has quantity becomes 10 or less than 10 after customer purchasing that row color becomes red so that it should be alert for the admin that particular stock quantity is low.
Here is my code:
<table>
<tr>
<th>Sr.No</th>
<th>Product ID</th>
<th>Brand</th>
<th>Price</th>
<th>Gender</th>
<th>Category</th>
<th>Material</th>
<th>Size</th>
<th>Description</th>
<th>Quantity</th>
<th>Image</th>
</tr>
<?php
$query = "SELECT * FROM add_stock ORDER BY id DESC";
$rs_result = mysqli_query ($query);
while ($result=mysqli_fetch_array($rs_result) )
{
?>
<?php $qty =$result['dress_quantity']; ?>
<tr <?php if($qty<=10){echo 'style="background:red"';} ?> >
<td><?php echo $result['id']; ?></td>
<td><?php echo $result['brand_name'];</td>
<td><?php echo $result['price']; ?></td>
<td><?php echo $result['gender_name']; ?></td>
<td><?php echo $result['category_name']; ?></td>
<td><?php echo $result['material_name']; ?></td>
<td><?php echo $result['size_name']; ?></td>
<td><?php echo $result['dress_description']; ?></td>
<td><?php echo $result['dress_quantity']; ?></td>
<td><a href="javascript:window.open('<?php echo $result['image'] ?>','mypopuptitle', '_parent')" >View Image</a></td>
</tr>
</table>
<?php
}
?>
CSS CODE:
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
border-collapse:
collapse; border-spacing: 0;
}
td, th {
border: 1px solid; /* No more visible border */
height: 30px;
transition: all 0.3s; /* Simple transition for hover effect */
}
th {
background: #DFDFDF; /* Darken header a bit */
font-weight: bold;
text-align: center;
height: 50px;
}
td {
background: #FAFAFA;
height: 40px;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
Create a class in CSS like .isLess
.isLess { background-color:red;}
Then do something like this:
a ternary operator echoing the class, if qty is < 10, add the class, if not don't output anything.
<tr <?php echo ($result['dress_quantity'] < 10 ? "class='isLess'" : ""); ?> >
<td><?php echo $result['id']; ?></td>
<td><?php echo $result['brand_name'];</td>
<td><?php echo $result['price']; ?></td>
<td><?php echo $result['gender_name']; ?></td>
<td><?php echo $result['category_name']; ?></td>
<td><?php echo $result['material_name']; ?></td>
<td><?php echo $result['size_name']; ?></td>
<td><?php echo $result['dress_description']; ?></td>
<td><?php echo $result['dress_quantity']; ?></td>
<td><a href="javascript:window.open('<?php echo $result['image'] ?>','mypopuptitle', '_parent')" >View Image</a></td>
</tr>
Alternatively, you could do something like
$class = "";
if($result['dress_quantity'] < 10) { $class='isLess'; }
<tr <?php echo $class; ?> >
Given below is my table which i wanna make responsive.
<table style="width:100%" class="table table-hover">
<tr>
<th>Booking Date</th>
<th>Booking Id</th>
<th>Amount</th>
<th>Movie Name</th>
<th>Theatre Name</th>
</tr>
<?php
foreach ( $data as $history )
{
?>
<tr>
<td> <?php print_r( $history->booking_date );?></td>
<td> <?php print_r( $history->booking_id ); ?></td>
<td> <?php print_r( $history->amount ); ?></td>
<?php $movie = Movies::find()->where( [ 'id' => $history->movie_id ] )->one(); ?>
<td><?php print_r( $movie->movie_name ); ?></td>
<?php $theatre = Theatres::find()->where( [ 'id' => $history->theatre_id ] )->one();?>
<td><?php print_r( $theatre->theatre_name ); ?></td>
</tr>
<?php
}
?>
</table>
class="table table-hover" was used so that when i hover over the rows i get a
different color. I changed it to class="table table-responsive" but even then
i found my table not responsive. What should i do to make it responsive?
<style type="text/css">
/*
Generic Styling, for Desktops/Laptops
*/
.table-hover {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
tr:hover {
background-color: lightyellow;
}
</style>
<table class="table table-hover">
<tr>
<th>Booking Date</th>
<th>Booking Id</th>
<th>Amount</th>
<th>Movie Name</th>
<th>Theatre Name</th>
</tr>
<?php
foreach ( $data as $history )
{
?>
<tr>
<td> <?php print_r( $history->booking_date );?></td>
<td> <?php print_r( $history->booking_id ); ?></td>
<td> <?php print_r( $history->amount ); ?></td>
<?php $movie = Movies::find()->where( [ 'id' => $history->movie_id ] )->one(); ?>
<td><?php print_r( $movie->movie_name ); ?></td>
<?php $theatre = Theatres::find()->where( [ 'id' => $history->theatre_id ] )->one();?>
<td><?php print_r( $theatre->theatre_name ); ?></td>
</tr>
<?php
}
?>
</table>
try this one
source: https://css-tricks.com/responsive-data-tables/
I am creating a table that loops information from my database. I created the table with html and added styling via an external css sheet. The table format is not displaying in any way. None of the borders are displaying and the 100% width is not working. Could my while loop be causing this affect?
<table class="tableproduct">
<tr>
<th class="thproduct">Product ID</th>
<th class="thproduct">Product Name</th>
<th class="thproduct">Price</th>
<th class="thproduct">Category</th>
<th class="thproduct">Description</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($q)) : ?>
<tr>
<td class="tdproduct"><?php echo $row['product_id']; ?> </td>
<td class="tdproduct"><?php echo $row['name']; ?> </td>
<td class="tdproduct"><?php echo $row['price']; ?> </td>
<td class="tdproduct"><?php echo $row['category']; ?> </td>
<td class="tdproduct"><?php echo $row['description']; ?> </td>
</tr>
</table>
<?php endwhile; ?>
.tableproduct {
width: 100%;
border: 1px solid black;
}
.tdproduct {
border: 1px solid black;
}
.thproduct {
height: 100px;
border: 1px solid black;
}
I ended up resolving this.
I had to put an if statement with the while loops and it created the results I was looking for.
I added this to the while loop:
if( $result ){
while($row = mysqli_fetch_assoc($result)) :
I have little problem with tables when u echo my results.
and this is my code
<?php
//return data if any
while ($client = mysqli_fetch_assoc($result)) {
//output data form each client
//var_dump($client);
?>
<table id="t01">
<tr>
<th>ID</th>
<th>name</th>
<th>lastname</th>
<th>age</th>
<th>Username</th>
<th>Password</th>
</tr>
<tr>
<td><?php echo $client['id'] ?></td>
<td><?php echo $client['emri'] ?></td>
<td><?php echo $client['mbiemri'] ?></td>
<td><?php echo $client['mosha'] ?></td>
<td><?php echo $client['username'] ?></td>
<td><?php echo $client['password'] ?></td>
</tr>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</table>
this is my code and the list its echo the first line like id, name ,lastname... for every result. so i want attributes on the top and then down results (i cant post a photo)
You just Need to reorder your code:
<table id="t01">
<tr>
<th>ID</th>
<th>name</th>
<th>lastname</th>
<th>age</th>
<th>Username</th>
<th>Password</th>
</tr>
<?php
//return data if any
while ($client = mysqli_fetch_assoc($result)) {
//output data form each client
//var_dump($client);
?>
<tr>
<td><?php echo $client['id'] ?></td>
<td><?php echo $client['emri'] ?></td>
<td><?php echo $client['mbiemri'] ?></td>
<td><?php echo $client['mosha'] ?></td>
<td><?php echo $client['username'] ?></td>
<td><?php echo $client['password'] ?></td>
</tr>
><?php } ?>
</table>
You had Everything in youre While so for every Entry everything got printed.
And put your Style Tag in the Head Section of your HTML DOC