Solved

Style JUST for the Table

Posted on 2003-10-31
6
215 Views
Last Modified: 2010-04-06
Hello,

Can a table be linked to an external stylesheet so that the rest of the page is unaffected?  If so, please could you show us how to write that?  

OR...

If that's not possible, please could you show us how to write a style statement for a table that modifies the

a

tag just for the table?

Many thanks,

Yun
0
Comment
Question by:yunkaa
6 Comments
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 500 total points
ID: 9658213
Hi,
I presume you know how to create and link to an external stylesheet, if not, simply place everything within the <style> tags in a separate file -- named 'myStyle.css' , for example

<style type='text/css'>
table.formTab
{
background-color : "#006699"
font-size: 16pt;
font-weight: bold;
color: #003399;
}
</style>

and then in the html .

<link href="myStyle.css" type=text/css rel=stylesheet>
make sure the path is correct


<html>
<head>
<style type='text/css'>
table.formTab
{
background-color : "#006699"
font-size: 16pt;
font-weight: bold;
color: #003399;
}
</style>
//<link href="myStyle.css" type=text/css rel=stylesheet>
</head>
<body>
<table class='formTab'>
<tr>
   <td><a href="http://members.aol.com/grassblad">GrassBlade Javascript</a></td>
   <td><a href="http://members.aol.com/grassblad"><img src="http://members.aol.com/grassblad/images/grassAvatar.jpg" alt="GrassBlade Javascript"></a></td><td>some text and or other stuff</td></tr>
</table>
<table>
<tr>
   <td><a href="http://members.aol.com/grassblad">GrassBlade Javascript</a></td>
   <td><a href="http://members.aol.com/grassblad"><img src="http://members.aol.com/grassblad/images/grassAvatar.jpg" alt="GrassBlade Javascript"></a></td><td>the non-styled table</td></tr>
</table>
</body>
</html>
Vinny
0
 

Expert Comment

by:brainno722
ID: 9658393
My take is similar, but see if you can understand it better.  You can copy and paste this code in a test page, and modify to your likings.

<HTML>
 <HEAD>
<style>
 TABLE.ex1 {background:00C9FF }
 CAPTION {background:blue; color:yellow; font-size:20pt; caption-side:bottom }
 TR.whitetext {color:FFFFFF ; font-size:18pt}
 TD.redtext {border: thick solid red; color:red ; font-size:24pt}
 TD.ltgreenbackground {background:lightgreen}
 #width30 {width=30}
 TD.image {background: url(chicken.jpg) fixed; vertical-align:bottom }

</style>

</head>
<body>  

<table border=0 class="ex1">
<th colspan=3>This is the header</th>
<tr class="whitetext">
<td>This is the first row first column </td>
<td class="ltgreenbackground" width=30>
<font color="green">second row second col</font>
</td> <td>Row 1 Col3</td> </tr>
<tr>
<td ID="width30" class="redtext">This text should be red </td>
<td bgcolor="yellow">Row2 col2
</td> <td class="image">
<font size="2">can you see the chicken?</font> </td> </tr>
<caption bgcolor="green">This is a caption</caption>
</table>
<p>
<table border=1>
<tr><td>another table</td></tr>
</table>
</BODY>
</HTML>

The second table does not have any attributes, so it will show up like a regular table.
0
 
LVL 17

Expert Comment

by:dorward
ID: 9658790
There are a few options...

(1) Put the table in another document (with a style sheet), then include that document using an iframe. I advise this though.

(2) Change the style sheet so it applies only to the table...

<table class="some-identifier">

.some-identifier {
  /* Applies to the table itself */
}

.some-identifier a {
  /* Applies to <a> elements, but only if they are inside that table */
}
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Expert Comment

by:unbeatabul
ID: 9669029
This works for me...below is a stype sheet i use for my web app.
So you would link to the externalk style sheet using the following
<LINK href="../library/iboss.css" type="text/css" rel="stylesheet">
This usually comes in the head of section of your page.
Now for the table that you need to apply a style to simply add one of the classes listed below to the table tag like this
<Table width="20" height="20" class="FormTABLE"></table>
you can even applpt to style to each row of column like this
<Table width="20" height="20" class="FormTABLE">
     <tr>
         <td class ="FormHeaderTD"></td>
       </tr>
</table>
Below is a style sheet that has styles defined for tables, columns and rows.If u need some more help let me know.

Cheers!

.PageBODY {background-color: #9F9F9F; font-family: Arial; font-size: 8px; color: #FFFFFF }
.FormTABLE {border: 1px solid #F0F0F0}

.FormHeaderTD {background-color: #E2DFD2; text-align: Center;}

.FormHeaderFONT {font-family: Verdana, Tahoma, Arial, Helvetica; font-size: 8pt; color: #C35E05; font-weight: bold}

.FieldCaptionTD {background-color: #E2E2E1; border: 1px solid #F0F0F0}

.FieldCaptionFONT {font-family: Verdana, Tahoma, Arial, Helvetica; color: #000000; font-size: 8pt}

.DataTD {background-color: #F0EEE3; border: 1px solid #F0F0F0}

.RecordSeparatorTD {background-color: #33CCCC; border: 1px solid #F0F0F0}

.DataFONT {font-family: Verdana, Tahoma, Arial, Helvetica; color: #000000; font-size: 8pt}

.ColumnFONT {font-family: Arial, Tahoma, Verdana, Helvetica; color: #FFFFFF; font-size: 8pt; font-weight: bold}

.ColumnTD {background-color: #9E1701; border: 1px solid #F0F0F0}

.combo {background-color: #fafad2;font-family: Verdana, Tahoma, Arial, Helvetica; color: navy; font-size: xx-small;width:150}

.txtBox {background-color: #fafad2;font-family: Verdana, Tahoma, Arial, Helvetica; color: navy; font-size: xx-small}

a:active     { font-family: Verdana; font-size: 10px; color: #C35E05}
a:hover      { font-family: Verdana; font-size: 10px; color: #666666 }
a:link       { font-family: Verdana; font-size: 10px; color: #C35E05 }
a:visited    { font-family: Verdana; font-size: 10px; color: #C35E05}
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9669368
Use descendant selectors:

<style type="text/css">
  body {font-family:Utopia,Times,serif;}

  table#myTable {font-family:Arial,Helvetica,sans-serif;}
  table#myTable th {color:#003; background-color:#EFF;}
  table#myTable td {font-size:.95em}
  table#myTable td.businessName {font-style:italic;}
  table#myTable td.businessAddress {font-weight:bold;}

  td.businessName {text-decoration:underline;}
<style>

<table id="myTable">
  <tr>
    <th>Business Name</th>
    <th>Address</th>
  </tr>
  <tr>
    <td class="businessName">Joe's Garage</td>
    <td class="businessAddress">133 Main St.</td>
  </tr>
  <tr>
    <td class="businessName">Pizzas-R-Us</td>
    <td class="businessAddress">5522 North Avenue</td>
  </tr>
  <tr>
    <td class="businessName">Zircon Jewelers</td> <!-- Italic  -->
    <td class="businessAddress">3210 1st Dr. SW</td>  <!-- Bold -->
  </tr>
</table>

<table>
  <tr>
    <td class="businessName">Other Stuff...</td> <!-- Not in myTable, hence not italic  -->
    <td class="businessAddress">More Other Stuff...</td>  <!-- Not in myTable, hence not bold  -->
  </tr>
</table>

All text in the page will be Utopia,Times,serif EXCEPT what's inside the table, which will be Arial,Helvetica,sans-serif.
The text in the bottom table will be Utopia,Times,serif because it's not in the table (it will inherit from the body style).
"Other Stuff..." will NOT be italic because the TD is not in the myTable table:
    table#myTable td.businessName <<-- affects ONLY TDs with class="businessName" that are inside the table with id="myTable"; will not be applied to TDs with class="businessName anywhere else.
"More Other Stuff..." will NOT be bold because the TD is not in the myTable table.
    table#myTable td.businessName <<-- affects ONLY TDs with class="businessAddress" that are inside the table with id="myTable"; will not be applied to TDs with class="businessName anywhere else.
    All text in any <td class="businessName"> in the page WILL be underlined (because of td.businessName selector) no matter which table the TD is located in.

This technique works for any elements contained inside other elements, not just tables and table cells, and not just IDs, e.g.

p.main b {color:red;} -->> will make red any text in a bold tag that comes inside a <p class="main">
0
 

Expert Comment

by:bobubi
ID: 9699094
---------------------------------------------------------------------------
External CSS (named it as tblStyle.css)
---------------------------------------------------------------------------
.tbl{
background-color:#FFFFFF;
font-family:Arial, Verdana;
font-size:10px
.... (and so on, depending on your preference)
}
---------------------------------------------------------------------------
Main Page (named it as urPage.htm. Remember to place "tblStyle.css" under the same folder as "urPage.htm"
---------------------------------------------------------------------------
<html>
<head><title>external style sheet</title></head>
<link type="text/css" rel="stylesheet" href="tblStyle.css"
<body>
<table class="tbl" width="500" height="500">
   <tr>
      <td>&nbsp</td>
      <td>&nbsp</td>
   </tr>
</table>
</body>
</html>
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now