Solved

Style JUST for the Table

Posted on 2003-10-31
6
217 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
VMware virtualization clustering 5 25
website file permissions 4 65
What is the normal amount of queries 5 74
API Soap Calls 4 90
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 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

13 Experts available now in Live!

Get 1:1 Help Now