[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Style JUST for the Table

Posted on 2003-10-31
6
Medium Priority
?
231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

649 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