In the following HTML table snippet, I will like to add footnotes (or simple comments) for columns "stat 1", "stat 2" and "stat 3" to explain each of the stats in more detail. Preferably, want the comments/details to appear right below the table with each comment correctly referring to the right column. Any suggestion on how to achieve this? Thanks.
if(!empty($output))
{
echo '<table cellpadding="0" cellspacing="0" class="imagetable">';
echo '<caption>Table 1</caption>';
echo '<tr><th>Date</th><th>Stat 1</th><th>Stat 2</th><th>Stat 3</th><th></tr>';
foreach ($output as $result)
{
$temp = explode(" ",$result);
echo '<tr>';
for($i=0;$i<count($temp);$i++){
echo '<td>',$temp[$i],'</td>';
}
echo '</tr>';
}
echo '</table><br />';
}
You could use tfoot (http://www.w3schools.com/tags/tag_tfoot.asp)
if(!empty($output))
{
echo '<table cellpadding="0" cellspacing="0" class="imagetable">';
echo '<caption>Table 1</caption>';
echo '<thead><tr><th>Date</th><th>Stat 1</th><th>Stat 2</th><th>Stat 3</th></tr></thead>';
echo '<tfoot><tr><td> </td><td>*note 1</td><td>*note 2</td><td>*note 3</td></tr></tfoot>';
foreach ($output as $result)
{
$temp = explode(" ",$result);
echo '<tr>';
for($i=0;$i<count($temp);$i++){
echo '<td>',$temp[$i],'</td>';
}
echo '</tr>';
}
echo '</table><br />';
}
Related
I have a table in which I am printing a button at the end of each row. I wish this button to be small.
And my text is not getting truncated when the table is printed despite using overflow ellipsis. I don't want the horizontal scroll bar.
My title bar of the table, the topmost row is always getting hidden as I scroll down.
Any help is much appreciated. Here is my CSS script https://jsfiddle.net/v6sahfyc/1/
Edit: Adding the php code here:
// <?php
// echo "<div id='awesometable'>";
// ?>
<!-- <CAPTION>RESERVATION TABLE</CAPTION> -->
<?php
echo "<br><br><p style=\"font-family:verdana; font-size:100%; margin-left: 5em;\"><i><strong>Reservation Table.</strong></i></p>";
echo "<table id='reservation' class='inlineTable'>"; //style='border: solid 1px black;'
//echo "<thead>";
echo "<tr>";
echo "<th class=\"row-1 uid\">UserId</th>";
echo "<th class=\"row-2 rname\">Resource <br> Name</th>";
echo "<th class=\"row-3 rtype\">Resource <br> Type</th>";
echo "<th class=\"row-4 rloc\">Resource <br> Location</th>";
echo "<th class=\"row-5 treq\">Time <br> Required </th>";
echo "<th class=\"row-6 REM\">Delete? </th>";
echo "</tr>";
//echo "</thead>\n";
//echo "<col = width: 3em />";
?>
<?php
$username = "root";
$password = "";
$host = "localhost";
$connector = mysql_connect($host,$username,$password) or die("Unable to connect");
$selected = mysql_select_db("mydb", $connector) or die("Unable to connect");
$selectSQL = "SELECT user_ID, ResourceName, ResourceType, ResourceLocation, ReservationTime FROM reservation_table";
if( !( $selectRes = mysql_query( $selectSQL ) ) ){
echo 'Retrieval of data from Database Failed - #'.mysql_errno().': '.mysql_error();
}else{
?>
<tbody>
<?php
if( mysql_num_rows( $selectRes )==0 ){
}else{
while( $row = mysql_fetch_assoc( $selectRes ) ){
echo "<tr><td>{$row['user_ID']}</td><td>{$row['ResourceName']}</td><td>{$row['ResourceType']}</td><td>{$row['ResourceLocation']}</td><td>{$row['ReservationTime']}</td>";
$active = $_SESSION['usr'] == $row['user_ID'];
echo "<td>"."<button class='btn' type='submit' id='1'".($active ? "" : "disabled").">"."Delete"."</button>"."</td>";
}
}
?>
</tbody>
</table>
<?php
mysql_close($connector);
}
?>
I have a problem regarding the width in a bootstrap table, it goes way to the side of the website, screenshot under
http://i.stack.imgur.com/FLZwD.png
EDIT:
<div class="container">
<h1>URL Stats <small>Shortened URL's with their full stats.</small></h1>
<table class="table table-striped table-bordered" id="statstable">
<thead>
<tr>
<th>URL ID</th><th>URL Unique ID</th><th>Short Link</th><th>Redirect Link</th><th>Date Created</th><th>End Date</th><th>Days Left</th>
</tr>
</thead>
<hr>
<tbody>
<?php
$result = mysql_query("SELECT * FROM links WHERE shortlinkid='$shortlinkid'") or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
$now = date("Y-m-d");
$start = $row['date_created'];
$end = $row['end_date'];
$diff = (strtotime($end) - strtotime($now))/24/3600;
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['shortlinkid']."</td>";
echo "<td><a href='http://".$row['fullurl']."'>".$row['fullurl']."</a></td>";
echo "<td><a href='".$row['redirect']."'>".$row['redirect']."</a></td>";
echo "<td>".$row['date_created']."</td>";
echo "<td>".$row['end_date']."</td>";
echo "<td>".$diff."</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
This has not been an issue before, and it works fine in other browsers other than Chrome
Change this:
echo "<td><a href='http://".$row['fullurl']."'>".$row['fullurl']."</a></td>";
echo "<td><a href='".$row['redirect']."'>".$row['redirect']."</a></td>";
To this:
echo "<td><a href='http://".$row['fullurl']."'>Full URL</a></td>";
echo "<td><a href='".$row['redirect']."'>Redirect</a></td>";
Instead of echoing the entire URL for the link label, use some descriptive text to click on. Change labels as needed.
View image: http://i.stack.imgur.com/yxE4u.jpg
Although this is in PHP, I'm trying to (with HTML) get two words (which use the same class) to push next to each other without calling the class seperately or using the two words in the same if/if else function. I'm sure it's just a simple HTML element.
<?php
if (something){
echo "<p class='message'>hello</p>";
}
if (somethingelse){
echo "<p class='message'>world</p>";
}
?>
As the comments aren't what I'm after, I'll show what I'm using:
<?php
if (!empty($message)){
echo "<p class='message'>" . $message . "</p>";
}
if (!empty($errors)){
echo "<p class='message'>";
foreach ($errors as $error){
echo " - " . $error . "<br />";
}
echo "</p>";
}
?>
One statement or both at the same time may prove true. Hopefully you can see why I can't wrap it all around an HTML tag.
i think you want to do this
<p class="messasge"> <?php echo $message; ?> </p>
RE-FIXED according to updated specifications :
<?php
if (!empty($message)){
echo "<p class='message'>" . $message;
}
if (!empty($errors)){
if (empty($message) echo "<p class='message'>";
foreach ($errors as $error){
echo " - " . $error . "<br />";
}
}
if ((!empty($message))||(!empty($errors))) echo "</p>";
?>
if JUST message is true it'll print <p class='message'>MESSAGE</p>
if JUST errors is true, it'll print <p class='message'>ERRORS</p>
if BOTH are true, it'll print <p class='message'>MESSAGEERRORS</p>
I think you probably want some variant on the following code:
<?php
$output = '';
if (something)
$output .= 'hello';
if (somethingelse)
$output .= 'world';
if ($output)
echo "<p class='message'>$output</p>";
?>
For your example, you could replace all of the echos in the first two conditions with appending to $message, then only output if there is something to output. There are numerous options but I think this is the most flexible / elegant.
In your case it can be simplified to,
<?php
$output = $message;
if (!empty($errors))
foreach ($errors as $error)
$output .= " - $error<br />";
if (!empty($output))
echo "<p class='message'>$output</p>";
?>
Maybe the dl list is useful
<?php
if (!empty($message)){
echo "<dl class='message'><dt>" . $message . "</dt>";
}
if (!empty($errors)){
foreach ($errors as $error){
echo "<dd> - " . $error . "</dd>";
}
echo "</dl>";
}
?>
<?php
$message = "";
if (something) $message = "hello";
if (somethingelse) $message += " world";
echo "<p class='message'>".$message."</p>";
?>
Does anyone know how to have different colours on alternate rows in a table
You can use jquery to add classes to the rows like this:
<script type="text/javascript">
$(document).ready(function () {
$("table.evenodd tr:not([th]):odd").addClass("odd");
$("table.evenodd tr:not([th]):even").addClass("even");
});
</script>
And then use CSS to style:
.even {background-color: #e6e6e6;}
.odd {background-color: #ffffff;}
http://www.w3.org/Style/Examples/007/evenodd
table.evenodd tr:nth-child(even) { background: #CCC; }
table.evenodd tr:nth-child(odd) { background: #FFF; }
You need to apply a style to every second row. You can do that by adding a counter to your loop, and if that counter-variable % 2 == 0, you add the style to the row in question, like this:
$i = 0;
while ($row = mysql_fetch_array($result)){
$style = "";
if($i%2==0)
{
$style = ' style="background-color: #CCC"';
}
echo "<tr".$style."><td>";
echo "<center>" .$row['name']. "</center>";
echo "</td><td>"
echo "<center>" .$row['age']. "</center>";
echo "</td><td>"
echo "<center>" .$row['car']. "</center>";
echo "</td></tr>"
$i++;
}
Typically I would have an even and odd css class that defined the different colours then in PHP when outputting the <tr> I would apply this to the element. You'd typically use a row counter in your loop and mod2 the counter.
$rows = 0;
while ($row = mysql_fetch_array($result)) {
$rows++;
$even_odd = ($rows % 2) ? 'odd' : 'even' ;
echo "<tr class=$even_odd><td>";
echo "<center>" .$row['name']. "</center>";
echo "</td><td>"
echo "<center>" .$row['age']. "</center>";
echo "</td><td>"
echo "<center>" .$row['car']. "</center>";
echo "</td></tr>"
}
The code below works all fine and dandy. However, I would like to put a space of maybe 16 pixels / one row height between each row pair shown below. How can I do this? I think this might be a CSS issue.
while ($row = mysql_fetch_array($result)) {
echo '<tr>';
echo '<td class="sitename1">'.$row["title"].'</td>';
echo '</tr>';
echo '<tr>';
echo '<td class="sitename2">'.$row["loginid"].'</td>';
echo '</tr>';
}
echo "</table>";
Thanks in advance,
John
You can add padding to the tds in question:
.sitename1 {padding-bottom:16px}