PDA

View Full Version : table font colors?



BLiZZaRD
10-17-2006, 10:34 AM
I am using a VERY basic CSS, mainly because I don't know much about it.

I just use it for my background colors and links and ULs and address tags etc.

I just made a page with tables, and I would like to have different color fonts in each table, but I know less about tables than I do CSS, well okay thats not true.

Anyway, is there an easy way to change the color of the font inside a table, so that all cells within a table have the same color but each table's can be different?

codeexploiter
10-17-2006, 10:36 AM
why don't you create different style for each table. So that the visual look will be different

BLiZZaRD
10-17-2006, 10:45 AM
well... perhaps you could help me with that?

I just got invited to do a link exchange with like 15 other sites, and I wanted to set up a nice looking little page to do just that, So basically I have 2 tables one left with my link images and code blocks, and one on the right that will hold the other sites links...

You can see the page and what I have so far here:

http://cleverwasteoftime.com/links.html

It's not perfect by any means and I have a lot of work to do. I don't normally like/use tables, and have only done some twice before, each time was one table each, and using this style that you see, and each was one table per page, and with only photos in each cell, no links, text, etc..

I have been on google and tut sites all night, and I have a good grasp of it, but I still don't get all the little tweaks and such...

Have any ideas?

codeexploiter
10-17-2006, 11:13 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Link Exchange!</title>

<link rel="stylesheet" type="text/css" href="links_files/cwot.css">
<style type="text/css">
.first
{
background: white;
border: thin solid #FFF8DC;
font-family: serif;
font-size: 10px;
font-style: normal;
color: Navy;
}

.second
{
background: #F0FFF0;
border: thin solid #9F2D41;
font-family: serif;
font-size: 12px;
font-style: normal;
color: red;
}
</style>

</head><body>
<center><h1><u>Link Exchange</u></h1></center><br><br><b>
Do you want to show the world your love for CWoT or CWoT Invasion? Want
to give potential team mates an easy way to link right to the site? Now
it's easy. Just copy the codes below and paste on your links page, in
your forum, or in your signature!<br><br>
Want us to link back to your site? Well, that's easy too. Just contact
BLiZZ with your link information and which page you will be posting the
CWoT/Invasion links on and he will set you right up! You can use the <a href="http://cleverwasteoftime.com/contacts.html">Contact Form</a> to email BLiZZ.<br><br></b><hr><b><br>


</b><table align="left" border="2" cellpadding="0" cellspacing="0" height="100%" width="30%" class="first">
<tbody><tr>
<td align="center"><b>CWoT and Invasion Logos</b></td>
</tr><tr>
<td>
Please feel free to use these logos on your site to help promote CWoT and Invasion.
</td></tr>

<tr><td align="center">
<a href="http://cleverwasteoftime.com/" target="_blank"><img src="links_files/cwot.gif" alt="CWoT - The Best Online Riddle Ever!" border="0" height="51" width="91"></a>&nbsp;&nbsp;
<a href="http://invasion.cleverwasteoftime.com/" target="_blank"><img src="links_files/invasion.gif" alt="Invasion - The First Online Team Pic Hunt Ever!" border="0" height="45" width="169"></a></td>
</tr>
<tr><td>Use the following HTML to link back to CWoT
<br><br>
<center>
<form>
<textarea style="font-family: 'Courier New',courier; font-size: 11px;" cols="25" rows="6" wrap="virtual">&lt;a
href="http://cleverwasteoftime.com/" target="_blank"&gt;&lt;img
src="[LOCAL PATH TO IMAGE]" alt="CWoT - Are you Clever enough?"
title="CWoT" border="0" /&gt;&lt;/a&gt;</textarea>
</form></center></td></tr>
<tr><td>Use the following HTML to link back to Invasion
<br><br>
<center>
<form>
<textarea style="font-family: 'Courier New',courier; font-size: 11px;" cols="25" rows="6" wrap="virtual">&lt;a
href="http://invasion.cleverwasteoftime.com/"
target="_blank"&gt;&lt;img src="[LOCAL PATH TO IMAGE]" alt="The
Invasion is here!" title="Invasion" border="0" /&gt;&lt;/a&gt;</textarea>
</form></center></td></tr></tbody></table>


<table align="right" border="2" cellpadding="0" cellspacing="0" height="100%" width="65%" class="second">
<tbody><tr>
<td align="center"><b>Links You should Check Out!</b></td>
</tr><tr>
</tr><tr><td align="center">
<a href="http://cleverwasteoftime.com/" target="_blank"><img src="links_files/cwot.gif" alt="CWoT - The Best Online Riddle Ever!" border="0" height="51" width="91"></a>&nbsp;&nbsp; Clever Waste of Time - An Online Riddle with over 1000 levels!</td></tr>
</tbody></table>

</body></html>


This is the test source code on which i've tested it. Check the source code in the <HEAD> section you can find two style ie first and second and i've applied them in the first and second <table> tag respectively.

This is not an end result but using which you can incorporate whatever you want in your work.

BLiZZaRD
10-17-2006, 11:20 AM
Cool! I will check it out!

is it possible to add this:



<style type="text/css">
.first
{
background: white;
border: thin solid #FFF8DC;
font-family: serif;
font-size: 10px;
font-style: normal;
color: Navy;
}

.second
{
background: #F0FFF0;
border: thin solid #9F2D41;
font-family: serif;
font-size: 12px;
font-style: normal;
color: red;
}
</style>


to the CSS I already have?

What would I need to change to do that?

CSS tutorials next week, I swear to God!

codeexploiter
10-17-2006, 11:22 AM
Yes you can add them into your CSS files no problem. You don't need the following in your CSS file i think that was a mistake :)

BLiZZaRD
10-17-2006, 11:36 AM
Got it, tweaked it, and it looks great!

And now I can just go tothe CSS and add "third" "fourth" what ever, and add the class="third" for other tables where ever I want! Thanks a lot!

learning...learning... neat-o!