Solved

Style JUST for the Table

Posted on 2003-10-31
6
224 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 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
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:
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

695 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