Jump to content

CSS table for pilot roster page


Tylor Eddy

Recommended Posts

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

Link to comment
Share on other sites

  • 3 weeks later...
  • Moderators

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Gday Guys

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

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 :)

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

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.

post-604-074263400 1304614718_thumb.jpg

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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

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

Link to comment
Share on other sites

  • 8 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...