Style JUST for the Table

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
yunkaaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brainno722Commented:
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
dorwardCommented:
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

unbeatabulCommented:
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
ZontarCommented:
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
bobubiCommented:
---------------------------------------------------------------------------
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.