I found it hard to phrase this question but I will try my best. I am creating a php and MYSQL leaderboard, it all works but now I want to style it. I don't know very much css and this might be a simple fix. I am trying to style the table so that all the data table elements sit symmetrical like a table should be, and aligned to the center of the headers. I think it is not working because I technically have 2 tables I am trying to style and they are not working in conjunction with each other. Here is the code and forgive my usernames in the table, I get lazy sometimes.
<!DOCTYPE html>
<html>
<head>
<title>Leaderboards</title>
<style type="text/css">
th {
overflow: auto;
font-size: 25px;
border: 1px solid;
padding: 5px;
margin: 2px 2px 2px 2px;
}
td {
font-size: 25px;
padding-left: 30px;
padding-top: 3px;
}
</style>
</head>
<body>
<h1>Leaderboard</h1>
<table>
<tr>
<th>Rank</th>
<th>User</th>
<th>Score</th>
</tr>
</table>
<?php
include 'HytecFunctions.php';
$conn=connectDB();
$rank = 1;
$sql = 'SELECT Name, Score FROM Names ORDER BY Score DESC';
foreach ($conn->query($sql) as $row) {
echo "<table>
<td>$rank</td>
<td>$row[Name]</td>
<td>$row[Score]</td>
</tr>
</table>";
$rank++;
}
$conn->close();
?>
</body>
</html>
The table as it shows in my browser
Because you try to create another table every loop. Try to put them all in a single table.
<table>
<tr>
<th>Rank</th>
<th>User</th>
<th>Score</th>
</tr>
<?php
include 'HytecFunctions.php';
$conn=connectDB();
$rank = 1;
$sql = 'SELECT Name, Score FROM Names ORDER BY Score DESC';
foreach ($conn->query($sql) as $row) {
echo '<tr>
<td>'.$rank.'</td>
<td>'.$row["Name"].'</td>
<td>'.$row["Score"].'</td>
</tr>';
$rank++;
}
$conn->close();
?>
</table>
Note: Don't mind much the way I input your $row variables. Yours will still work even if you use double tick (") to display rows. I just use a single tick (') to display your data as is to have a much cleaner look on your code. Refer here for the difference.
Related
I'm trying to show total price in a table.
I have 2 arrays where one is the names of the cars and second is the prices of each one.
I've managed do display the prices and the names inside the table,
but the thing is that i have a "checkbox" thing that shows if car is sold or not...
I'm trying to make the total calculation that calculate the total price of all checked checkboxes.
That means - when checkbox is on, the variable of total price should add that car's price to it.
here is how it should looks like:
I must mention that I've just started to learn php at collage,
here's the array and the variable:
<?php
$cars = array ("ford","fiat","renault","mazda");
$prices = array(100,80,90,120);
$sold = '<input type="checkbox" name="sold">';
?>
I added up basic style for my table (in the same php file)
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;``
}
</style>
and the php code for the table:
<?php
$cars = array ("ford","fiat","renault","mazda");
$prices = array(100,80,90,120);
$sold = '<input type="checkbox" name="sold">';
?>
<h1>list of cars</h1>
<table>
<th>name</th>
<th>price</th>
<th>sold</th>
<?php
for($i=0;$i<count($cars);$i++){
echo
"<tr>
<td>$cars[$i]</td>.
<td>$prices[$i]$</td>.
<td>$sold</td>.
</tr>";
}
?>
</table>
How can I calculate the amount of all checked checkboxes prices?
imvain2’s answer would be your best choice as it does not require a client-server roundtrip.
However, if you would like to do this in php, you need to associate the checkbox with the car in some way.
One way would be to tweak your for loop like so
for($i = 0; $i < count($cars); $i++) {
echo (
"<tr>
<td>{$cars[$i]}</td>
<td>{$prices[$i]}$</td>
<td><input type=\"checkbox\" name=\"sold[]\" value=\"{$prices[$i]}\"></td>
</tr>"
);
}
So when the form containing the table is submitted to the server you can do the calculation like
$total = 0;
foreach ($_POST['sold'] as $value) {
$total += (int)$value;
}
I would modify the checkbox to include the price as a data-attribute and put it within the for loop not outside of it.
$sold = '<input type="checkbox" data-price="$prices[$i]" name="sold">';
then in javascript just loop through the checkboxes and an event listener that checks for checked.
function showTotal(els) {
total = 0;
els.forEach(function(el) {
if (el.checked) {
total += +el.getAttribute("data-price");
}
});
document.querySelector("#total").innerHTML = "$" + total.toFixed(2)
}
sold = document.querySelectorAll("[name='sold']");
sold.forEach(function(el) {
el.addEventListener("change", function(ev) {
showTotal(sold)
});
});
to show the total you will need a div to hold the total
<div id="total"></div>
**Note: please fix my english if needed.
please notice that the hole code is written in single php file.
after quit a bit of time, i was mange to fix my code.
first, as suggest here before, the JS code that was given was written in jquery, i haven't learned that part of js yet, therefor i wrote the code with the help of my friend in js using dom.
CSS:
<style>
body {
text-align:center;}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top:15%;
}
th{
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
</style>
JS: (the location of the script tag doesn't matter at this point, but iv'e located it at the top of the php file inside header content.
<script>
function calcTotal() {
let sum = 0;
for (let index = 0; index < 4; index++) {
let priceAsStr = document.getElementById("price" + index).innerHTML;
let price = parseInt(priceAsStr);
let soldOrNot = document.getElementById("soldOrNot" + index).checked;
if (soldOrNot == true)
{
sum = sum + price;
}
}
document.getElementById("sum").innerHTML ="$" + sum;
}
and finally, for the body:
<?php
$cars = array("Ford","Fiat","Renault","Mazda");
$prices = array(100,80,137,453);
?>
<table>
<tr>
<th>Cars</th>
<th>Price</th>
<th>Sold</th>
</tr>
<?php
$sum = 0;
for ($i=0; $i < 4; $i++) {
echo "<tr id='row$i'>
<td>{$cars[$i]}</td>
<td id='price{$i}'> {$prices[$i]}$</td>
<td><input type='checkbox' id='soldOrNot{$i}' name='sold{$i}' onClick='calcTotal()' value=''> </td>
</tr>";
}
?>
</table>
<h1>Total Price: <span id="sum">0</span></h1>
i've ran into an issue with my code which has left me stumped. in the code below, i have created a table for mysql data to be fetched into. however when running my code all of the data (which includes titles, descriptions and prices), seem to be merged into one continuous row which fills the entire page. i'm not sure if this has to do with the size of the data i'm trying to fit into a specific row, or a fault in my code. so any help would be appreciated.
styling used:
table {
border: none;
border-collapse: collapse;
width: 100%;
color: #ffffff;
font-size: 15px;
}
th {
background-color: #a6a6a6;
color: white;
}
table td {
font-size: 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table td:first-child {
border-left: none;
}
table td:last-child {
border-right: none;
}
</style>
table and php:
<table>
<tr>
<th>Event Title:</th>
<th>Event Category:</th>
<th>Event Description:</th>
<th>Venue:</th>
<th>Opening Date:</th>
<th>Closing Date:</th>
<th>Price:</th>
</tr>
</table>
<?php //Beginig of php script for database events
include "Database_connection.php"; //Will make the database connection
$sql = "
SELECT e.eventTitle
, c.catDesc
, e.eventDescription
, v.venueName
, e.eventStartDate
, e.eventEndDate
, e.eventPrice
FROM NEE_venue v
JOIN NEE_events e
ON e.venueID = v.venueID
JOIN NEE_category c
ON c.catID = e.catID
ORDER
BY eventTitle ASC
";
$queryResult = $dbConn->query($sql);
if($queryResult === false) { //will detect if the connection failed, and give an error message
echo "<p>Query failed: ".$dbConn->error."</p>\n</body>\n</html>";
exit;
}
else { //if connection is succsessful, code will retrive the events
while($row = $queryResult->fetch_assoc()){
echo "<tr><td>". $row["eventTitle"] ."</td><td>". $row["catDesc"] ."</td><td>". $row["eventDescription"] ."</td><td>". $row["venueName"] ."</td><td>". $row["eventStartDate"] ."</td><td>". $row["eventEndDate"] ."</td><td>". $row["eventPrice"]
."</td></tr>";
}
echo "</table>";
}
$queryResult->close();
$dbConn->close();
?>
screenshot of the issue:
mysql issue
Get rid of the end table tag in the top section.
<table>
<tr>
<th>Event Title:</th>
<th>Event Category:</th>
<th>Event Description:</th>
<th>Venue:</th>
<th>Opening Date:</th>
<th>Closing Date:</th>
<th>Price:</th>
</tr>
</table> <--- That one.
Looks like from both the code and the image that the data gets printed outside of the table, because the end table tag gets added too early.
I'm here with following problem. I have table with multiple records. Each row represents news of some kind, so I need to distinguish one from the another. The way to do that, is to make a table for each of these news(or a wrapper of some kind), however I encoutred a problem with fetching each result to each table(wrapper).
I can't figure out how to tell SQL to put the record separatley. Below is chunk of my code, as well as the design for the table.
.news{
width:400px;
height:auto;
border: 1px solid red;
float:left;
}
.news tr:first-child{
font-weight: bold;
height:40px;
text-align: center;
}
.news tr:last-child{
background-color: whitesmoke;
height: 200px;
padding-bottom: auto;
text-align: center;
}
.details td{
width:200px;
height: 40px;
text-align: center;
}
echo "<table class='news'>";
while ($row = mysqli_fetch_array($result)) {
echo "<tr>
<td colspan='2'>
$row[0]
</td>
</tr>
<tr class='details'>
<td>
$row[1]
</td>
<td>
$row[2]
</td>
</tr>
<tr>
<td colspan='2'>
$row[3]
</td>
</tr>";
echo "</table>";
}
$query = " SELECT headline, date, concat (firstName,' ',lastName), body FROM "
. "school_info natural join teachers ORDER BY id_school_inf DESC LIMIT 2;";
$result = mysqli_query($conn, $query);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^This is my query. There is a limit, so i can always fetch latest (let's say last 5) news.
Any help would be much appreciated
You need to create a separate table for every type of record you have? Simple enough, if you order your records by the type:
SELECT * FROM whatever ORDER BY type_of_record
then
$previous = null;
while(... fetch from db ...) {
if ($row['type'] != $previous) {
... got new record type, start new table
}
... display row
$previous = $row['type']; // store current type for comparison later
}
How can I attach an external CSS file to display data fetched from a MySQL database? Can I display data using CSS instead of using tables. I want to completely avoid tables in diplaying the fetched data.
This is the code to fetch data from the MySQL database:
<?php
echo "Database Date: " .date("Y-m-d");
?>
Variables included in this data are: Assigned NCL Number, Hospital, Age, Sex, Primary cancer and the date of diagnosis and latest management on the patient.
<style type="text/css">
table.data { width:100%; margin: 0;
border: 1px solid black; border-spacing: 2px; }
.id {width: 7%; background-color: #c7c7c0; }
.date {width: 12%; background-color: #d8d8d1; }
.nclnumber { width: 10%; background-color: #c7c7c0; }
.hospital {width: 17%; background-color: #d8d8d1; }
.age { width: 3%; background-color: #c7c7c0; }
.sex { width: 2%; background-color: #d8d8d1; }
.cancer { width: 10%; background-color: #d8d8d1; }
.dateofdiagnosis { width: 7%; background-color: #d8d8d1; }
.notes { width: 32%; background-color: #d8d8d1; }
</style>
<table class="data" border="0" cellspacing="2">
<tr>
<td class="id"><b>Id</b></td>
<td class="date"><b>Date</b></td>
<td class="nclnumber"><b>NCL Number</b></td>
<td class="hospital"><b>Hospital</b></td>
<td class="age"><b>Age</b></td>
<td class="sex"><b>Sex</b></td>
<td class="cancer"><b>Diagnosed Cancer</b></td>
<td class="dateofdiagnosis"><b>Date of Diagnosis</b></td>
<td class="notes"><b>Notes</b></td>
</tr>
</table>
<?php
// Connects to your Database
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("cancer") or die(mysql_error());
$data = mysql_query("SELECT * FROM cancer WHERE Age ='1'OR Age = '2' OR Age = '3'OR Age = '4'OR Age = '5'OR Age = '6'OR Age = '7'OR Age = '8'OR Age = '9'")
or die(mysql_error());
while($info = mysql_fetch_array( $data )) {
echo "<table class='data' border='0' cellspacing='2'>
<tr>
<td class='id'>".$info['Id']."</td>
<td class='date'>".$info['Date']."</td>
<td class='nclnumber'>".$info['NCL_Number']."</td>
<td class='hospital'>".$info['Hospital']."</td>
<td class='age'>".$info['Age']."</td>
<td class='sex'>".$info['Sex']."</td>
<td class='cancer'>".$info['Diagnosed_Cancer']."</td>
<td class='dateofdiagnosis'>".$info['Date_of_Diagnosis']."</td>
<td class='notes'>".$info['Notes']."</td>
</tr>
</table>";
}
?>
There is absolutely no reason not to use <table> elements for tabular data.
The anti-table hysteria that some people have is simply a misunderstanding: it's bad to misuse tables for layouting purposes. There's nothing wrong with the HTML tag, though. In fact, using any other HTML element to display tabular data is bad for semantics.
The <table> tag and its contained <tr> rows and <td> columns informs the browser rendering it that the data therein is related and columnar. Don't think of the <table> (or any HTML tag for that matter) as strictly a visual display element. They convey meaning about the data to the machine which is parsing it.
Let's sort out a little confusion. Displaying in CSS instead of tables doesn't make since as tables and its associated tags are HTML elements and CSS is styling you can apply to those elements. They are not equivalent.
The alternative to tables would be to create a complex, complicated and convoluted layout using a combinations of divs and spans.
However, there is absolutely no reason why, if the data is tabular, that you should bother with such an awkward design just to avoid the use of the <table> tag. That's why the <table> tag is in the HTML spec.
Abusing the <table> tag for layout purposes has given the tag a bad rep. When used properly though (i.e. to display tabular data) it can be very very useful.
Best advice: use the <table> tag and follow the advice of the community wiki.
I have a leaderboard on my website, and I want to be able to have rank numbers (1, 2, 3, 4, 5, etc) as using...
<ol>
<li>this</li>
<li>that</li>
</ol>
...doesn't work in a table
How can I do this?
One way of achieving this, given the following structure:
<table>
<thead>
<tr>
<th>Rank:</th>
<th>Name:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rank"><span></span></td>
<td>Him</td>
</tr>
<tr>
<td class="rank"><span></span></td>
<td>Her</td>
</tr>
</tbody>
</table>
Is to use CSS-counters:
table {
border: 1px solid #ccc;
empty-cells: show;
width: 40%;
counter-reset: ranking;
}
th {
border-bottom: 2px solid #ccc;
min-width: 4em;
width: 50%;
max-width: 6em;
}
tbody tr {
counter-increment: ranking;
}
td {
border-bottom: 1px solid #ccc;
}
td.rank > span:before {
content: counter(ranking);
}
And a JS Fiddle demo.
As noted elsewhere, though, these are not widely supported. And would be better-implemented either using JS/jQuery or by simply using an ol.
You could do this using CSS counters
...unfortunately they're not that widely supported yet. It's best to generate the numbers on the server side, it could be argued that they are significant content and should be in HTML anyways.
Simply add this to your CSS:
ol {
list-style-type: decimal;
margin-left:12px;
}
JSFiddle:
http://jsfiddle.net/Mutant_Tractor/zhCzQ/2/
Or you could also use list-style-type: decimal-leading-zero;
I'm afraid numbering rows in a table is a standard html feature. You'll need to resort to Javascript or server-side generation of the numbers.
Edit:
You really should do this via (in order of preference):
CSS numbering (see other answers)
Server-side (I don't do php - sorry)
client-side javascript should be a last resort:
<table id="numbered">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
</tr>
</table>
<script type="text/javascript">
var table=document.getElementById('numbered');
var tr=table.getElementsByTagName('tr');
for(var i=0; i<tr.length; i++)
{
var td=tr[i].getElementsByTagName('td');
td[0].insertBefore(document.createTextNode(i+1+'. '), td[0].firstChild);
}
</script>
As for me I am using while loop in a while loop (for php) If you wanted to get data from database.
Ex.
$query = mysql_query("SELECT * FROM table);
$getnumbers = mysql_num_rows($query);
$x=1; //initialize your number
while($x<=$getnumbers)
{
while($rows = mysql_fetch_assoc($query))
{
echo $x;echo $row["row1"];echo "<br>";
$x++ }
}