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.
Related
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.
What i'm trying to achieve is to link my already completed SQL table query to another SQL table query. So to give some more information we need to make a game for my school assignment. I'm making a little Pokemon battle game. I've queried my SQL table and it's giving me all the Pokemon_Type that it currently has in the table. I want users to be able to click on that table entry that's being displayed and then it queries the database again displaying information on that type. Here is the webpage in question. Don't judge my html skills xD. So as you can see atm there is the 'Electric' type so i'd like to be able to click on that and it refreshes the page and shows all the Pokemon that's associated with that type in the SQL table. Is this possible? and if so how?
Here is my code so far if you'd like to see it.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px
}
</style>
<title>Pokemon Fight!</title>
<center>Pokemon Fight!</center>
</head>
<body>
Select your type!
<?php
require_once('../mysqli_connect.php');
$query = "SELECT pokemon_type FROM pokemon";
$response = #mysqli_query($dbc, $query);
if($response){
echo '<table align="left"
cellspacing="5" cellpadding="8">
<tr><td align="left"><b>Pokemon Type</b></td></tr>';
while($row = mysqli_fetch_array($response)){
echo '<tr><td align="left">' .
$row['pokemon_type'] . '</td><td align="left"></td>';
echo '</tr>';
}
echo '</table>';
} else {
echo "Couldn't issue database query<br />";
echo mysqli_error($dbc);
}
mysqli_close($dbc);
?>
</body>
</html>
the easiest is to create a link into you pokemon type label to another page passing your type id through href.
Look at this post, it's about what you want to do : PHP passing variable id through href
But using ajax would be better to load informations dynamically without reloading the page
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.
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
}
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++ }
}