CSS table for pilot roster page

[Tylor Eddy]

Gday guys

I am interested in creating a CSS style table for my pilot roster page similar to this one http://www.w3schools.com/css/css_table.asp, except instead of green and white, im after red and white.

Anyone able to shed some light into how i can do this?

<tr class="odd">

<td>...</td>

...

</tr>

<tr>

<td>...</td>

...

</tr>

i found this peice of code, but im unsure how to integrate it, i want it to automatically do the horizontal zebra pattern.

Cheers

[Kairon]

I know what you want to do, could for example the red color code: # CC0000

I help you

Thanks = D

[Tylor Eddy]

I know what you want to do, could for example the red color code: # CC0000

I help you

Thanks = D

thats great, i just need some help on implementing it into my pilots_list.tpl file.

[Tylor Eddy]

Anyone able to help me with this one ?

I am having great difficulty trying to implement this on my own, the examples on the web involve simpler tables that the ones used by phpvms.

[mark1million]

OK to get the header colour make the top cells <th> for table header, then define that colour in your css file.

With the alternate colours you can use,

/* custom tables */
table.mytable {
  font-family: Times New Roman;
  background-color: #FF6600;
  margin:5px 0pt 5px;
  font-size: 11pt;
  width: 100%;
  text-align: left;
}
table.mytable tbody tr.odd td {
  background-color:#f0f0f0;

table.mytable thead tr th {
  background-color: #FF6600;
  border: 1px solid #FFF;
  font-size: 12pt;
  padding: 2px;
}

So in your table you create <table class="mytable"> then it will read from your css your defined values there.

Just change the #color to what you want.

Hope that makes sense

[Tylor Eddy]

OK to get the header colour make the top cells <th> for table header, then define that colour in your css file.

With the alternate colours you can use,

/* custom tables */
table.mytable {
  font-family: Times New Roman;
  background-color: #FF6600;
  margin:5px 0pt 5px;
  font-size: 11pt;
  width: 100%;
  text-align: left;
}
table.mytable tbody tr.odd td {
  background-color:#f0f0f0;

table.mytable thead tr th {
  background-color: #FF6600;
  border: 1px solid #FFF;
  font-size: 12pt;
  padding: 2px;
}

So in your table you create <table class="mytable"> then it will read from your css your defined values there.

Just change the #color to what you want.

Hope that makes sense

thanks for the support, i added the css to the bottom of the styles.css in my skin folder, and added the table class code just above my table in my pilots_list.tpl folder, but im having trouble getting the colours to alternate, im not sure why this is, im after red and white

this is what ive changed in the CSS

/* custom tables */
table.mytable {
  background-color: #ffffff;
  margin:5px 0pt 5px;
  font-size: 9pt;
  width: 100%;
  text-align: center;
}
table.mytable tbody tr.odd td {
  background-color:#bc0000;

table.mytable thead tr th {
  background-color: #bc0000;
  border: 1px solid #ffffff;
  font-size: 12pt;
  padding: 2px;
}

i presume this is incorrect, as it wont work for me haha

Thanks for the help

[Tylor Eddy]

Gday Guys

I have some code if anyone is interesting, including jquery, it only took me a few weeks to get working

you can preview it on my site

http://qantasvirtual.com/index.php/Listing

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">
     $(function() {
       $("table tr:nth-child(even)").addClass("striped");
     });
   </script>

   <style type="text/css">
     body,td {
       font-size: 8pt;
     }
     table {
       background-color: #FFFFF;
       border: 1px white solid;
     }
      table, th, td
     {
       border-collapse:collapse;
       border: 1px;
border-style:solid;
       border-color:#be0000 #be0000;
     }
     th {
       background-color: #be0000;
       color: white;
     }
     tr {
       background-color: white;
       margin: 1px;
     }
     tr.striped {
       background-color: #FA8072;
     }
   </style>

Post this at the top of the tpl file containing the table you wish to style with a trendy zebra stripes, youll have to change the colours to your taste.

enjoy

[lorlandi]

Thanks Tylor, the code works very nice, many thanks for your post.

Regards

[FiveStar]

tylor hi i have just seen you have used image on your table header can you post the table code also or can you explain how we can put image on the top of the table.....

[Tylor Eddy]

tylor hi i have just seen you have used image on your table header can you post the table code also or can you explain how we can put image on the top of the table.....

G'day Asmara,

What i did was use CSS to load the image onto the site, i'll get the code tomorrow morning when i jump on the pc with everything related to my site.

[FiveStar]

Ok tylor awaiting you.............

[Jeff]

I am interested in that as well. You might want to add that to "Code Snippets" to save Nabeel the hassle of moving it for you.

[FiveStar]

Hey tylor maybe you are very busy man but please don't forgot to post the table code here soonest?

[Jeff]

With Google as my guide, I was able to come across a website that explained how it is done. First off, you need to have an image you want to use and upload it to any folder. Second, you just need to use the code to pull the image and have it repeat the pattern for use with the table. Here is the code I use to pull it:

<table align="center" border="0" width="100%">
<thead>
	<tr>
		<th background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Your Text Goes Here</font></th></tr>
</thead>
</table>

To explain how It works:

<th background='images/tables/tablebg.png'>

1) This code is how it finds your image. I placed it in the following directory: www.mysite.com/images/tables/

<font face='Verdana' size='2' color="#FFFFFF">

2) This is what is used for the font type, size and color used for the text you want to show on the table image.

3) As an example of the code in use, I will use the Recent Flight Report that most of you use under the recent flights map for Great Circle Map.

<table align="center" border="0" width="100%">
<thead>
	<tr>
		<th background='images/tables/tableheadingbg.png'> <font face='Verdana' size='2' color="#FFFFFF">Last 10 Flights</font></th></tr>
</thead>
</table>
<?php
$count = 10;
$pireps = PIREPData::getRecentReportsByCount($count);
?>

<table align="center" border="0" width="100%">
  <thead>
    <tr>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Airline</font></th>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Flight #</font></th>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Departure</font></th>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Arrival</font></th>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Pilot</font></th>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Landing Rate</font></th>
<th align="center" background='images/tables/tablebg.png'> <font face='Verdana' size='2' color="#FFFFFF">Aircraft</font></th>
    </tr>
   </thead>
   <tbody>
<?php

if(count($pireps) > 0)
{
 foreach ($pireps as $pirep)
 {
   $pilotinfo = PilotData::getPilotData($pirep->pilotid);
   $pilotid = PilotData::getPilotCode($pilotinfo->code, $pilotinfo->pilotid); 

   echo "<tr>";
   echo '<td align=center  width=120px bgcolor=#000000><a href="'.fileurl('/index.php/pages/'.$pirep->code.'').'"><img src="'.fileurl('/images/airline/'.$pirep->code.'.gif').'" alt="'.$airline->name.'" /></a></td>';
   echo "<td align=center  background='images/tables/board.png'> <font face=Verdana size=2 color=#E8D33D> $pirep->code-$pirep->flightnum </font></td>";
   echo "<td align=center  background='images/tables/board.png'> <font face=Verdana size=2 color=#E8D33D> $pirep->depicao </font></td>";
   echo "<td align=center  background='images/tables/board.png'> <font face=Verdana size=2 color=#E8D33D> $pirep->arricao </font></td>";
   echo "<td align=center  background='images/tables/board.png'> <font face=Verdana size=2 color=#E8D33D> $pilotid $pilotinfo->firstname $pilotinfo->lastname </font></td>";
   echo "<td align=center  background='images/tables/board.png'> <font face=Verdana size=2 color=#E8D33D> $pirep->landingrate </font></td>";
   echo "<td align=center  background='images/tables/board.png'> <font face=Verdana size=2 color=#E8D33D> $pirep->aircraft </font></td>";
   echo "</tr>";
 }
}
else
{
   echo "<tr><td>There are no recent flights!</td></tr>";
}
?>
</tbody>
</table>

4) As you can see, I used 2 different images for the table, but I used the same code (with a different image name) to pull the second image.

5) Of course, your images will vary from mine, so the text colors will need to be changed to suit your needs.

6) The image below will show you the outcome of the above code.

[FiveStar]

thank you so much jeff the way you explained is worthless you are the MAN good work +1 for you jeff whats your VA name and link wanted to see that live in action Edited May 7, 2011 by Asmara Kamran

[Jeff]

http://www.virtualflightzone.net/index.php

[Tylor Eddy]

Thanks Jeff, I forgot all about getting the code to display the image... apologies for not replying

to display my table header image, the red bar i used this code in my style.css file

 table.other th {
       background:url(http://www.qantasvirtual.com/lib/skins/brilliancev1/images/headerother.png) no-repeat;
height:30px;
margin:1px 0 0 0;
overflow:hidden;
color: white;
font-size:11px;
      }

Then in my file i wanted to display it, pilot_list.tpl for example, i set the class to 'other' for my table header.

<table id="tabledlist" class="other">

I'll 'watch' the topic so i dont forget again haha

[larabrian]

try this...CSS table styling