I'm trying to change the tr class every 2 times in my loop, but I'm not too sure about how I can count the two times. So far I have:
foreach(array_chunk($users, 2, true) as $array){
}
I split the $users array chunks of two, but where can I go on from here?
What I am trying to output:
<tr class="m0">
<td>Bob</td>
<td>Bob's Cousin</td>
</tr>
<tr class="m1">
<td>Bob's Mom</td>
<td>Bob's Dad</td>
</tr>
why do you need alternate names? if it's just for styling then you could just use css "nth-child"
Example:
CSS
table#results tr:nth-child(even)
{
background-color: red;
}
table#results tr:nth-child(odd)
{
background-color: blue;
}
HTML
<table id="results">
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
</table>
Fiddle: http://jsfiddle.net/Eh7qm/
Related
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 am developing a voucher printing application that prints serial numbers and pins from a MySQL table and displays them in a page.
The php code displays two records per row..with being in a separate column i.e two columns displayed side by side
Due to the format of the page (two records per row)..i can not display each record in a seperate table. Rather all records are contained in a "general" table.
The voucher printing requires two rows to be displayed on each page.
I implemented a "page-break-after: always" style to each row not divisble by two, but page break is not showing. My code is shown below:
$aray=array();
while($row=mysqli_fetch_array($sql_res))
{
$aray[]=$row;
}
$nr_elm=count($aray);
$table='<table width=100%><tr>';
$nr_col=2;
if($nr_elm>0)
{
$p=1;//This is the row counter
for($i=0;$i<$nr_elm;$i++)
{
$table.='<td><div style="border: 2px dashed #000;" ><div id="image" style="float:left;">
'.$p.' <img src="crswb1.png" height=80 width=60 />
</div><div id="texts" style=" float: none;
margin-left:60px;">
<p> Amount:'.$aray[$i]['amount'].' </p><p> Pin:17263648409</p><p> Serial:5374748548
</div></div></td>';
$col_to_add=($i+1)%$nr_col;
if($col_to_add==0)
{
if($p % 2 == 0) {
$table.="<tr style='page-break-after:always'>";
}
$table.='</tr><tr>';
$p++;
}
}
}
$table.='</tr></table>';
$table=str_replace('<tr></tr>','',$table);
echo $table;
?>
I viewed the page source and the "page break" style is showing for the neccessary row, as seen below
<tr style='page-break-after:always'></tr><tr><td><div style="border: 2px dashed #000;" ><div id="image" style="float:left;">
3 <img src="crswb1.png" height=80 width=60 />
</div><div id="texts" style=" float: none;
How can i ensure that the page break is displayed so that i can print only two rows per page?..Thanks.
The format of the page does not prevent you to use one table for every two values. E.g. use the following HTML Code:
<table id="table1">
<tr>
<td>This is cell No. 1 in Table 1</td>
<td>This is cell No. 2 in Table 1</td>
</tr>
</table>
<table id="table1">
<tr>
<td>This is cell No. 1 in Table 2</td>
<td>This is cell No. 2 in Table 2</td>
</tr>
</table>
together with the following CSS Code:
#media print {
table {page-break-after: always;}
/* prevent blank page at end */
table:last-of-type {page-break-after: auto;}
}
/* If you want the fields on one line */
table, tr {
width: 100%;
/* If the fields still don't fit on one line
* make the font-size smaller */
font-size: 0.9em
}
it will print one table per page. Notice that even the last table will cause a page-break.
To see this work I prepared a codepen here. Open the codepen and try to print the page. You should see every table on it's own page.
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++ }
}
I have a loop which generates tables according to a database content.
In other words, the content is changed all the time.
Currently all tables are aligned beneath eachother. This makes one huge vertical scroll, I would save alot of space if the tables could be aligned next to eachother.
How can I do so?
Here is the table code:
$display="<table align='left'>
<tr>
<td>Found $tot_rows records
</td>
</tr>";
foreach ($results->response->docs as $doc)
{
$display.="<tr>
<td align='center'><table align='left' class='table_bg'><tr><td>FIELD NAME</td><td>VALUE</td></tr>";
foreach ($doc as $field => $value)
{
$display.= "
<tr>
<td>".htmlspecialchars($field, ENT_NOQUOTES, 'UTF-8')."</td>
<td>".htmlspecialchars($value, ENT_NOQUOTES, 'UTF-8')."</td>
</tr>";
}
$display.="</table></td></tr>";
}
}// end if $results
$display.="</table>";
Thanks
Put each table into a div like this:
<div class="tables"><table>...</table></div>
<div class="tables"><table>...</table></div>
<div class="tables"><table>...</table></div>
Then, in your CSS:
<style>
...
.tables {
float: left;
display: inline-block;
}
...
</style>
Put each table in cells ("td"-s inside one "tr") of one big outer table?