Thread: Css For Tables

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    SAN DEIGO, CA
    Posts
    3
    Rep Power
    0

    Css For Tables


    GREETINGS: In creating a "TABLE" in a WebPage, using HTML code I have been doing a TON of typing in each cell..designating the font size, color, alignment, etc.

    Now, however,I have discovered that using the following CSS code:
    <.style type="text/css".>
    <.!--
    TD {
    color : Blue;
    font-size : smaller;
    font-weight : bold;
    text-align : center;
    }
    --.>
    <./style.>

    (Without the periods), this will eliminate the need for all my typing, other than any special text I may want to place in the cell, SUCH AS NAMES, DESCRIPTION, ETC.
    ************************************
    This is a great advancement for me, as long as the TABLE or TABLES "ALL" have the same font, color, size and format.
    *************************************
    HOWEVER, does anyone know how or where I can alter or place CSS code to permit me to have additional TABLES having different colors, font sizes, etc., etc.

    MITCH MENSCHEL/WEBMASTER
  2. #2
  3. Senior Member
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2000
    Location
    Enschede, The Netherlands
    Posts
    1,527
    Rep Power
    16
    Hy Cyber-Gramps, welcome to these forums!

    Yes, CSS is a wonderfull thing
    Check the specs on W3.org to see/learn what's possible... in your case though, using classes (names) should do:
    Code:
    <html>
    <head>
    	<style>
    	td.name1 {
    		color: blue;
    	}
    	td.name2 {
    		color: red;
    	}
    	</style>
    </head>
    <body>
    
    <table>
    <tr>
    	<td class=name1>This is a blue text</td>
    	<td class=name2>This should be a red text</td>
    </tr>
    </table>
    
    </body>
    </html>
    Hope this helps
    There are 10 types of people in this world - those who understand binary and those who don't...

    PHP | MySQL | DevShed Forum Search | Google Search
  4. #3
  5. No Profile Picture
    =) wannabe?
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jul 2002
    Location
    florida
    Posts
    2,153
    Rep Power
    14
    or put table instead of td to have the table have those properties. rather than mark each cell.
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    SAN DEIGO, CA
    Posts
    3
    Rep Power
    0
    HI! Thank you for responding to my S.O.S.
    The problem I have is to UNDERSTAND "WHERE AND HOW" I am to place your suggested CSS codes.

    At this time, I still need "step-by-step" directions in order to have it work for me.

    I would greatly appreciate it if you would check out the short page I just published at:

    http://crta-area11.menschel.net/mitch5.htm

    and give me the details that I need to know in order to make the second table have different size font and different color.

    Thanks, once again, for your cooperation. MITCH MENSCHEL
  8. #5
  9. /(bb|[^b]{2})/

    Join Date
    Nov 2001
    Location
    Somewhere in the great unknown
    Posts
    5,163
    Rep Power
    792
    Here is an example for you. I took the code from your page and changed it around a little and put two seperate classes and assigned them to the table rows and made it just one table.
    Code:
    <html>
    	<head> 
    		<style type="text/css">
    			<!--
    			.mitch {
            color : Blue;
            font-size : smaller;
            font-weight : bold;
            text-align : center;
    				font-family : Sans-Serif, Helvetica, Arial;
    			}
    			.angela {
    				color : Red;
    				font-size : small;
    				font-weight : 500;
    				text-align : center;
    				font-family : Arial, Helvetica, Sans-Serif;
    			}			
    			-->
    		</style>
    		<title>USING CSS CODE IN TABLE</title> 
    	</head>
    	<body BGCOLOR="AQUA">
    		<table id="blueTable" align="center">
    			<tr class="mitch">
    				<td>
    					<img SRC="mitch_hd.jpg"><br>Mitch
    				</td>
    				<td> 
    					&nbsp; &nbsp; 
    				</td>
    				<td>
    					<img SRC="mitch_hd.jpg"><br>Mitch8888
    				</td>
    				<td> 
    					&nbsp; &nbsp; 
    				</td>
    				<td>
    					<img SRC="mitch_hd.jpg"><br>Mitch-7
    				</td>
    				<td>
    					&nbsp; &nbsp; 
    				</td>
    				<td>
    					<img SRC="mitch_hd.jpg"><br>Mitch5
    				</td>
    			</tr>
    			<tr>
    				<td colspan="4">
    					&nbsp;
    				</td>
    			</tr>
    			<tr class="angela">
    				<td>
    					<img SRC="angela-opt.jpg" WIDTH=100><br>Angela Aschrennner
    				</td>
    				<td>
    					&nbsp; &nbsp; 
    				</td>
    				<td>
    					<img SRC="angela-opt.jpg" WIDTH=100><br>Angela-Director
    				</td>
    				<td> 
    					&nbsp; &nbsp; 
    				</td>
    				<td>
    					<img SRC="angela-opt.jpg" WIDTH=100><br>Angela-CRTA
    				</td>
    				<td> 
    					&nbsp; &nbsp; 
    				</td>
    				<td>
    					<img SRC="angela-opt.jpg" WIDTH=100><br>AREA-11-CRTA
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    SAN DEIGO, CA
    Posts
    3
    Rep Power
    0

    CSS CODE FOR PLACEMENT/COLORS,ETC.


    HI! Well, I must say that I am amazed at the immediate response that I have been receiving, relative to my question on CSS.

    All the answers to my problem were probably all good and correct, but the very last one, that I am now responding to, actually showed me the EXAMPLE THAT I NEEDED....
    really "STEP-BY-STEP".....and now I know how to apply the changes needed.

    This puts me on the path for bigger and better webpage creation, for I have been creating and publishing webpages for Non-Profit groups in San Diego, CA.

    I cannot express my sincere THANKS often enough.....
    THANKS, AGAIN....TO ALL. You all made an old geezer of 84 very happy, showing him the way.....

    MITCH MENSCHEL/WEBMASTER aka "CYBER-GRAMPS"

IMN logo majestic logo threadwatch logo seochat tools logo