I am doing simple shopping site and I only know how to view the products from the database in table such as this code below.
<table width ="793" align ="center" border ="5" >
<tr bgcolor ="red">
<th width="90">product No </th>
<th>User Name </th>
<th width="184">product name</th>
<th>product price</th>
<th>Edit product</th>
<th>Delete product</th>
</tr>
<?php
mysql_connect("localhost","root","root");
mysql_select_db("db");
$query = "SELECT * FROM products";
$run = mysql_query($query);
while($row = mysql_fetch_array($run))
{
echo "<tr>";
echo '<td align="center"><font color="white"><b>' . $row['id'] . '</b></td>';
echo '<td align="center"><font color="white"><b>' . $row['product_name'] . '</b></td>';
echo '<td align="center"><font color="white"><b>' . $row['product_price'] . '</b></td>';
echo '<td align="center"><font color=" #e52d00"> <b>Edit</b></td>';
echo '<td align="center"><font color=" #e52d00"><b>Delete</b></td>';
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>
and I want to know how to view data in way such as amazon or ebay. I mean inside table.
I hope you know what I mean.
Please use CSS to format the resultset..
Related
I have a PHP based website for jobs. I echo all the jobs from database in a table below. When i click on a job in table row it shows the job details in an iframe beside the table.
This is the code of the table and iframe index.php
<table class="table1">
<tr>
<td colspan="3">
<?php
include "job.header.php";
?>
</td>
</tr>
<tr>
<td width="30%">
<div>
<?php
require "module/job.call.php";
?>
</div>
</td>
<td width="60%">
<iframe name="content" src="../module/job.unclicked.php">
</iframe>
</td>
<td width="20%"> </td>
</tr>
</table>
This is the code that i call jobs from the database job.call.php
<?php
$result = mysqli_query($conn,"SELECT * FROM job where approved='1' ORDER BY `CreatedTime` DESC");
echo "<table id='maintable' class='table-fill' border='0' cellpadding='0' cellspacing='0'>
<tr>
<th position='fixed' overflow='hidden' width='10%'>Job Title</th>
<th position='fixed' width='5%'>Company Name</th>
<th width='5%'>Closing Date</th>
</tr>";
while($row = mysqli_fetch_array($result) ) {
if (strlen($row['positiontitle']) > 20)
$row['positiontitle'] = substr($row['positiontitle'], 0, 60) . "...";
echo "<tr ref='job.details.php?id=".$row['id']."' target='content' class='positiontitle-link'>";
echo "<td><font style='text-shadow: none;'>" . $row['positiontitle'] . "</font></a></td>";
echo "<td>" . $row['companyname'] . "</td>";
echo "<td>" . $row['closingdate'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
I want that when i click on the job in the table row then the address bar should take the id of the job. because if someone wants to share the job then they should just send that address for specific job.
Now it show like this
I want that it should look like this
Got 2 questions regarding a table which output is below:
Question 1:
The table height is 500px, yet what I don't understand is that it looks like the content underneath which doesn't belong to the table is displayed within the table because of the scroll bar that goes so that down that it looks like the content underneath the table rows are in the table. So my question is how can I get the scroll bar to appear only if the 500px is met, rather than showing it straight away as it is doing now? How do I get the content (select box, heading, etc) be displayed underneath the table rather than in the table as it is doing in the screenshot
Question 2:
How can I get the scroll bar to be clipped on the side of the table? At the moment it is clipped just underneath the last column meaning it is taking up some of the last column's space and hence why table columns are not matching.
Below is html code of table:
<table id="tableqanda" align="center" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="30%" class="question">Question</th>
<th width="8%" class="option">Option Type</th>
<th width="6%" class="noofanswers">Number of Answers</th>
<th width="8%" class="answer">Answer</th>
<th width="6%" class="noofreplies">Number of Replies</th>
<th width="6%" class="noofmarks">Number of Marks</th>
<th width="12%" class="images">Images</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0">
<tbody>
<?php
foreach ($arrQuestionContent as $key=>$question) {
echo '<tr class="tableqandarow">'.PHP_EOL;
echo '<td width="30%" class="question">'.htmlspecialchars($question).'</td>' . PHP_EOL;
echo '<td width="8%" class="option">'.htmlspecialchars($arrOptionType[$key]).'</td>' . PHP_EOL;
echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL;
echo '<td width="8%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL;
echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL;
echo '<td width="6%" class="noofmarks">'.htmlspecialchars($arrQuestionMarks[$key]).'</td>' . PHP_EOL;
echo '<td width="12%" class="images">'.htmlspecialchars($arrImageFile[$key]).'</td>' . PHP_EOL;
echo '</tr>'.PHP_EOL;
}
?>
</tbody>
</table>
<h4>PARTICIPATING STUDENTS</h4>
<p>
<strong>Number of Participating Students:</strong> <?php echo $studentnum; ?>
</p>
<p>
<strong>Current Participating Students:</strong>
<br/>
<tr>
<td>
<select name="students" id="studentslist" size="10">
<?php
if($studentnum == 0){
echo "<option disabled='disabled' class='red' value=''>No Students currently in this Assessment</option>";
}else{
while ( $currentstudentstmt->fetch() ) {
echo "<option disabled='disabled' value='$dbStudentId'>" . $dbStudentAlias . " - " . $dbStudentForename . " " . $dbStudentSurname . "</option>" . PHP_EOL;
}
}
?>
</select>
</p>
Below is CSS:
#tableqanda_onthefly_container
{
width:100%;
overflow-y: scroll;
overflow-x: hidden;
max-height:500px;
}
#tableqanda_onthefly
{
width:100%;
overflow:auto;
clear:both;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
}
#tableqanda{
width:100%;
margin-left:0;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
I want my table to remain as a scrolling table with fixed headers
UPDATE
For question 1, try setting the overflow-y property to auto. This way the scrollbar will only be displayed once the table exceeds 500px in height.
So something like:
overflow-y:auto;
instead of
overflow-y:scroll;
ORIGINAL POST:
To answer your second question, you can just add the heads of the table as another row:
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="30%" class="question">Question</th>
<th width="8%" class="option">Option Type</th>
<th width="6%" class="noofanswers">Number of Answers</th>
<th width="8%" class="answer">Answer</th>
<th width="6%" class="noofreplies">Number of Replies</th>
<th width="6%" class="noofmarks">Number of Marks</th>
<th width="12%" class="images">Images</th>
</tr>
<?php
foreach ($arrQuestionContent as $key=>$question) {
echo '<tr class="tableqandarow">'.PHP_EOL;
echo '<td width="30%" class="question">'.htmlspecialchars($question).'</td>' . PHP_EOL;
echo '<td width="8%" class="option">'.htmlspecialchars($arrOptionType[$key]).'</td>' . PHP_EOL;
echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL;
echo '<td width="8%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL;
echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL;
echo '<td width="6%" class="noofmarks">'.htmlspecialchars($arrQuestionMarks[$key]).'</td>' . PHP_EOL;
echo '<td width="12%" class="images">'.htmlspecialchars($arrImageFile[$key]).'</td>' . PHP_EOL;
echo '</tr>'.PHP_EOL;
}
?>
</table>
</div>
This way the scroll bar should be put at the very right, not underneath anything. The reason it wasn't before was because you had two different tables with independent widths.
What I am trying to do is get it so there is a different hyper link address for each row echoed. Code is below:
echo "<table border='1' cellpadding='10'>";
echo "<tr> <th>Product Name</th> <th>Product Description</th> <th>Product Price</th> <th>Product Image</th> <th>View Product Details</th></tr>";
while($row = mysql_fetch_array( $result )) {
echo "<tr>";
echo '<td>' . $row['Product_Name'] . '</td>';
echo '<td>' . $row['Product_Description'] . '</td>';
echo '<td>' . $row['Product_Price'] . '</td>';
echo '<td>Picture Enlarge</td>';
echo '<td>View Details</td>';
echo "</tr>";
}
echo "</table>";
You can put php variables inline in your echo'ed anchors just as you are doing with the other variables.
Assuming that you're using the id field in your database you can do this:
echo '<td>View Details</td>';
If you echo a php variable (e.g. $row['id']) then it will echo out to HTML (not necessarily text). So as this one is contained in an anchor tag (in the HTML) it echos to the anchor tag and builds the id part. :)
<table border='1' cellpadding='10'>
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Product Price</th>
<th>Product Image</th>
<th>View Product Details</th>
</tr>
while($row = mysql_fetch_array( $result )) {
<tr>
<td> <?php echo $row['Product_Name']; ?></td>
<td><?php echo $row['Product_Description']; ?></td>
<td><?php $row['Product_Price']; ?></td>
<td>Picture Enlarge</td>
<td>View Details</td>
</tr>
}
</table>
I would probably go for something like that. This assumes that your table returns a unique id, from something like an auto incremented column.
This doesn't include any escaping so could be vulnerable to exploitation. I would also look into templating. It may help you with your presentation, makes it a little easier to read the mixed html and php.
"<td align=\"center\" valign=\"top\"><<") . "</td>\n"
I have a table in my DB which I call to show everything in that table on a page one of the items in the table is an image which when moused over needs to show a popup showing data from a separate table which corresponds to that item. I have a JQuery which calls the data depending on the row from the 1st table but when I try to actually put the two together I get the first table showing fine but now I get no pop up on mouseover.
This page is currently included in the index.php page which has the scripts to call the .js / .css files.
Here's the code for what I am trying to do:
<html>
<table border='0' cellpadding='0' cellspacing='0' class="center2">
<tr>
<td width='60'><img src="images/box_tl.png"></td>
<td style="background: url(images/box_tm.png)" align="center"><img src="images/news.png"></td>
<td width='25'><img src="images/box_tr.png"></td>
</tr>
<tr>
<td style="background: url(images/box_ml.png)"><h2>.</h2></td>
<td style="background: url(images/box_mm.png)">
<?php
include 'connect.php';
$query = mysql_query("SELECT * FROM tbl_img") or die(mysql_error());;
echo "<table border='0' cellpadding='1' cellspacing='1' width'90%' id='1' class='tablesorter'><thead>";
echo "<tr> <th> </th> <th>Mob Name</th> <th>Id</th> <th>Health</th> <th>Body</th> <th>Effects</th> <th>Spawn</th></tr></thead><tbody>";
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array( $query )) {
$mob_id = $row['mob_id'];
$mob = $row['mob'];
$body = $row['body'];
$mob_name = $row['mob_name'];
$health = $row['health'];
$level = $row['level'];
// Print out the contents of each row into a table
echo "<tr><td>";
echo "<img src='/testarea/include/mobs/$mob' />";
echo "</td><td>";
echo $mob_name;
echo "</td><td>";
echo $level;
echo "</td><td>";
echo $health;
echo "</td><td>";
echo
"
<a onmouseover='popup($('#hidden-table').html(), 400);' href='somewhere.html'><img src='/testarea/include/mobs/dead/$body' /></a>
";
echo "
<div id='hidden-table' style='display:none;'>
<table border='0' cellpadding='0' cellspacing='0' class='center3'>
<tr>
<td width='14'><img src='images/info_tl.png'></td>
<td style='background: url(images/info_tm.png)' align='center'></td>
<td width='14'><img src='images/info_tr.png'></td>
</tr>
<tr>
<td style='background: url(images/info_ml.png)'><h2>.</h2></td>
<td style='background: url(images/info_mm.png)'>
";
$query2 = mysql_query("SELECT * FROM tbl_drop WHERE mob_name='$mob_name'") or die(mysql_error());;
echo "<table border='0' cellpadding='1' cellspacing='1' width='250' id='2' class='tablesorter'><thead>";
echo "<tr> <th> </th> <th>Item Name</th> <th>Qty</th></thead><tbody>";
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array( $query2 )) {
$id = $row['id'];
$item_img = $row['item_img'];
$qty = $row['qty'];
$item_name = $row['item_name'];
// Print out the contents of each row into a table
echo "<tr><td width='50'>";
echo "<img src='/testarea/item/$item_img' />";
echo "</td><td width='150'>";
echo $item_name;
echo "</td><td width='50'>";
echo $qty;
echo "</td></tr>";
}
echo "</tbody></table>";
echo "
</td>
<td style='background: url(images/info_mr.png)'><h2>.</h2></td>
</tr>
<tr>
<td width='14'><img src='images/info_bl.png'></td>
<td style='background: url(images/info_bm.png)' align='center'><h2>.</h2></td>
<td width='14'><img src='images/info_br.png'></td>
</tr>
</table>
</div>"
;
echo "</td><td>";
echo "test";
echo "</td><td>";
echo "test";
echo "</td></tr>";
}
echo "</tbody></table>";
?>
</td>
<td style="background: url(images/box_mr.png)"><h2>.</h2></td>
</tr>
<tr>
<td width='60'><img src="images/box_bl.png"></td>
<td style="background: url(images/box_bm.png)" align="center"><h2>.</h2></td>
<td width='25'><img src="images/box_br.png"></td>
</tr>
</table>
</html>
you have two semi-colons on this line...could be the problem
$query = mysql_query("SELECT * FROM tbl_drop WHERE mob_name='$mob_name'") or die(mysql_error());;
I'm trying to echo data from an SQLdatabase into a table that is somewhat decent-looking. I can already echo the data properly into 5 separate basic tables, but when I can't figure out how to style it without it completely messing up. Here is the code I already have:
// OUTPUTS RESULTS //
$resultfirst = mysql_query("SELECT * FROM Students WHERE FirstPeriod='$_POST[firstperiod]'");
$resultsecond = mysql_query("SELECT * FROM Students WHERE SecondPeriod='$_POST[secondperiod]'");
$resultthird = mysql_query("SELECT * FROM Students WHERE ThirdPeriod='$_POST[thirdperiod]'");
$resultfourth = mysql_query("SELECT * FROM Students WHERE FourthPeriod='$_POST[fourthperiod]'");
$resultfifth = mysql_query("SELECT * FROM Students WHERE FifthPeriod='$_POST[fifthperiod]'");
// 1st PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>First Period</th>
</tr>";
while($row = mysql_fetch_array($resultfirst))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 2nd PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Second Period</th>
</tr>";
while($row = mysql_fetch_array($resultsecond))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 3rd PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Third Period</th>
</tr>";
while($row = mysql_fetch_array($resultthird))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 4th PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Fourth Period</th>
</tr>";
while($row = mysql_fetch_array($resultfourth))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 5th PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Fifth Period</th>
</tr>";
while($row = mysql_fetch_array($resultfifth))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
If the code above is unclear- my goal is to compare the first period teachers in which are stored in the database, and output the students names that share the same period/teacher.
This code works fine. But the tables look very bland. I would like to echo the data into a table such as this.
<table width="368" border="0" cellspacing="0" cellpadding="2" align="center" height="100">
<tr valign="middle">
<td bgcolor="#000066" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Services</font></b></font> </div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#990000" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Products</font></b></font></div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#C89800" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Resources</font></b></font> </div>
</td>
</tr>
<tr valign="top">
<td bgcolor="#000066" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Professional
and cost effective web design, development and promotion services
</font></p>
</td>
</tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#990000" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote
</font></p>
</td>
</tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#C89800" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Free
web resources - articles, tutorials, tips and tricks.
</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
If anyone can offer any suggestions of any sort- I would greatly appreciate it.
I see a few areas that can be improved:
As others have said, don't use tables to manage layout. However, tables are perfectly acceptable for displaying tabular data
You really want to use CSS to style your page, it's a lot easier to control your style and makes the markup easier to read. See this w3schools' artcile on CSS Tables
You can combine your multiple queries into one for better performance (though, that seems to be outside the scope of your question)
Here is an example markup and CSS for your table: http://jsfiddle.net/vxzJV/