Table design

lardum · Jan 5, 2004

I have 2 different questions:

I have this table built with information from a MySQL table as this:

> print("<table border=1 cellpadding=2 cellspacing=2 bordercolor=000000>&quot

;
> print("<tr><td width=20><b>Date:</b></td><td width=20><b>Time:</b></td><td
> width=100><b>Name:</b></td><td width=100><b>E-mail:</b></td><td
> width=200><b>Comment:</b></td></tr>&quot

;
>
> while($rad = mysql_fetch_array($GBResult))
> {
> print("<tr><td>&quot

;
> print($rad"RegDate&quot

;
> print("</td><td>&quot

;
> print($rad"RegTime&quot

;
> print("</td><td>&quot

;
> print($rad"name&quot

;
> print("</td><td>&quot

;
> print($rad"email&quot

;
> print("</td><td>&quot

;
> print($rad"comment&quot

;
> print("</td></tr&quot

;
> }

Question nr 1:
How can i apply a color for row 1 and then for row 2 another color?

Question nr 2:
The row called email fetches an e-mail value from the table. How can i make that a mailto link?

Vragabond · Jan 6, 2004

A1: Do you want to have alternating colors for rows in your table or just different color for the header row? If it is the second simply use <th> tags instead of <td> for the head elements and use style sheets to determine their colors. If it is alternating colors you seek, I usually do something like this:

Code:

$color = 1;

// your code for the output
 while($rad = mysql_fetch_array($GBResult))
 {

// check the color status and output color for a row
  if ($color == 1) { print(&quot;<tr style=\&quot;background: #999999;\&quot;>&quot;); }
  else { print(&quot;<tr style=\&quot;background: #777777;\&quot;>&quot;); }

// removed your tr declaration - it was declared in the upper if clause
  print(&quot;<td>&quot;);
  print($rad[&quot;RegDate&quot;]);
  print(&quot;</td><td>&quot;);
  print($rad[&quot;RegTime&quot;]);
  print(&quot;</td><td>&quot;);
  print($rad[&quot;name&quot;]);

// begin implementation of answer 2
  print(&quot;</td><td><a href=\&quot;mailto:&quot;);
  print($rad[&quot;email&quot;]);
  print(&quot;\&quot;>&quot;);
  print($rad[&quot;email&quot;]);
  print(&quot;</a></td><td>&quot;);

// end implementation of answer 2
  print($rad[&quot;comment&quot;]);
  print(&quot;</td></tr>&quot;);

  //switch the color status
  $color = -$color;
 }

A2: I added the code for the answer two inside the top code. Basically, what you need to do is change the

Code:

<td>email@email.com</td>

output to

Code:

<td><a href=&quot;mailto:email@email.com&quot;>email@email.com</a></td>

. This will make it a link.

dkdude · Jan 6, 2004

lardum,

What you're asking is really HTML/CSS questions, which have their own forum in here - forum215.

Having said that, here's what you can do:

Q1 : Colors

There are two colors (background & foreground). Don't know which one you mean, so here's an example of both:

Foreground (text) color can be set in two different ways - HTML or CSS. Using plain HTML, you use the

Code:

<FONT></FONT>

tag. An example:

Code:

<FONT COLOR="red">This is red text</FONT> <FONT COLOR="#FF0000">... so is this!</FONT>

Using CSS, you can either use the

Code:

STYLE=""

property or you can define a

Code:

CLASS

or a CSS

Code:

ID

. Three examples:

Example 1 - HTML/STYLE method

Using the HTML/STYLE method is straight forward but can create a somewhat (for the programmer) confusing code with little overview.

Code:

<TD STYLE="color:#FF0000;">Red Text Cell</TD>

Example 2 - CSS ID method

The CSS ID method gives a much more reuseable code and (for the programmer) much better overview. This method is good for specific layout instances - hence the name : ID

In the

Code:

<HEAD></HEAD>

section you put this:

Code:

<STYLE> #IDCell { color:#FF0000; } </STYLE>

In the

Code:

<BODY></BODY>

section (inside the

Code:

<TABLE> ... </TABLE>

- cell) you put this:

Code:

<TD ID="IDCell">Red Text Cell</TD>

Example 3 - CSS CLASS method

The CSS CLASS has the same benefits as the CSS ID method. This method is good for repeating instances of a layout.

In the

Code:

<HEAD></HEAD>

section you put this:

Code:

<STYLE> .redCell { color:#FF0000; } </STYLE>

In the

Code:

<BODY></BODY>

section (inside the

Code:

<TABLE> ... </TABLE>

- cell) you put this:

Code:

<TD CLASS="redCell">Red Text Cell</TD>

Note : ID and CLASS methods looks the same - only difference is if you want to be faithful to the CSS language convensions. Which is, of course, the best!

Background color can be set in two different ways - HTML or CSS. Using plain HTML - An example:

Code:

<TD BGCOLOR="red">Cell with red background</TD>

Using CSS, you can either use the

Code:

STYLE=""

property or you can define a

Code:

CLASS

or a CSS

Code:

ID

. Follow the above examples 1 thru 3 but use

Code:

background-color:#FF0000;

instead of

Code:

color:#FF0000;

...

Q2 : Mailto link

Code:

<A HREF="mailto:me@my.com">This is a mailto link</A>

For further reference have a look at :

http://www.w3schools.com/

They have really excellent references for HTML and CSS! Very nice!!

Good Luck

Jakob

SundancerKid · Mar 9, 2004

Ther is an easier way.

<tr bgcolor="<? if(bcmod($w_i,2)){echo "white";}else {echo "#99ccff";}?>">

see BCMOD() @

http://www.php.net

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Table design

lardum

IS-IT--Management

Vragabond

Programmer

dkdude

Programmer

SundancerKid

Programmer

Similar threads

Part and Inventory Search

Sponsor