Weather by You!

Templates and Projects support => Html Templates => Topic started by: aznetcowboy on June 02, 2013, 06:11:45 PM

Title: Table borders
Post by: aznetcowboy on June 02, 2013, 06:11:45 PM

I have been trying to create a table with the ability to have a border around the <tr> element as the <tr> has three <td> elements. So far, no luck. I have tried all sorts of methods, but nothing happens. Is there a way to add some code to the styles.css file or just something to the <tr> elements? I want to create a sitemap. An example is as follows:

<tr>
<td><a href="http://www.elgheko.us/index.htm">Now</a></td>
<td></td>
<td>Current readings</td>
</tr>   
<tr>
<td><a href="http://www.elgheko.us/today.htm">Today</a></td>
<td></td>
<td>Today's readings (MST)</td>
</tr>   
<tr>
<td><a href="http://www.elgheko.us/yesterday.htm">Yesterday</a></td>
<td></td>
<td>Reading from yesterday</td>
</tr>   

The three <td></td> elements are for the primary level, secondary level (where applicable) and a brief description.

Anyone have an idea or suggestion?

Tom

Title: Re: Table borders
Post by: Mr.Meteo on June 03, 2013, 04:54:59 PM

Hi Tom,

What you want to do is a little tricky, as the row was planned
to have just a few layout option (like background color!).
To achieve the desired effect, you have to do a bit of "CSS"

So, in the file in which you want to have this effect, insert just before </head>:
<style type="text/css">
   tr {       
      display: table;                        /* this makes borders/margins work */
      border: 1px solid black;
   }
</style>

This will apply to all tables row, then if you have more than
1 table and don't want this border to apply to all tables, simply
specify an "ID" for the table with border. 1st line will be:

MyTableID tr {...

Hope this help!

Regards,
Jacques

Title: Re: Table borders
Post by: avoorpool on June 04, 2013, 09:36:33 AM

Hi Jacques,

In addition to Tom's message, I'm facing a similar problem.

I created a page which shows most commonly used HTML characters (http://www.altonaweather.ca/wxcharacters.php).

I'm using the <table> and <th> <tr>  <td> settings for my menus (top of the page).

When using the CSS settings on the page to define the character table, all related <tabe> setting sin the main menu are affected as well.

HOW do I define the <table>, using internal CSS so that ONLY the character table will show border lines...????

Thanks,
Arthur

Title: Re: Table borders
Post by: Mr.Meteo on June 04, 2013, 11:14:19 AM

Hi Arthur,

Actually, you probably have a layout applied to all "TD" or "TR",
so what you have to do is to be more specific in your css.

Then, suppose that you have this characters table with a unique
identifier (ID) of "HTML_Chars"; you could easily use this name
to specify where to apply exactly, like this:

#HTML_Chars td {
  ... the desired layout options....
}

Hope this help!

Regards,
Jacques

Title: Re: Table borders
Post by: avoorpool on June 04, 2013, 09:01:49 PM

Hi Jacques,

C'est Formidable....  8)

Thanks very much for the hint, the table (and page) display correctly.
http://www.altonaweather.ca/wxcharacters.php

Good thing to know for future developments...!!!!

Cheers,
Arthur