Tables, CSS and Front page 2003

  sheila.weston 10:23 05 Oct 07
Locked

I have lots of pages which include tables on my website, eg click here.

I am updating the site, using FP 2003, to include CSSs. See click here.

What do I do about the tables? They are far too large to do anything but 'copy and paste'.

I have been told that I
'can reduce the coding further by moving the table formatting to the stylesheet. I would move it to the external stylesheet. If the formatting is not typical, then give the specific tables with the same formatting either an id or a class. You can only use the same id name once on a page, it can however be used on multiple pages.'

Quite honestly I don't understand this and need a bit of spoon-feeding. Surely I can't add it to the main css, can I?

The code appears to be:
div align="center">
center> !--mstheme--> /font> table border="1" width="100%" bordercolordark="#003366" bordercolorlight="#003366">
tr>
td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">
p align="center"> a href="index.htm"> b>Trenbath /b> /a> !--mstheme--> /font> /td>
td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">
p align="center"> a href="gillett/index.htm"> b>Gillett /b> /a> !--mstheme--> /font> /td>
td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">
p align="center"> b> a href="rahr/index.htm">Rahr /a> /b> !--mstheme--> /font> /td>
td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">
p align="center"> b> a href="fargus/index.htm">Fargus /a> /b> !--mstheme--> /font> /td>
td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">
p align="center"> b> a href="bramley/index.htm">Bramley /a> /b> !--mstheme--> /font> /td>
td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">
p align="center"> font size="1"> a href="click here"> b>Chapman
County /b> /a> Codes, as used in these pages /font> !--mstheme--> /font> /td>
/tr>
/table> !--mstheme--> font face="verdana,arial,helvetica"> /center>
/div>

Ignoring the FP themes, which of this goes to the style sheet? Just td width="20%"> !--mstheme--> font face="verdana,arial,helvetica">? No, that is just one cell.

Is it: div align="center">
center> !--mstheme--> /font> table border="1" width="100%" bordercolordark="#003366" bordercolorlight="#003366">?


Any help much appreciated.

Sheila

  IntoPCs 14:41 05 Oct 07

I use CSS for tables on a site I maintain on an Intranet so can't show a link, but the CSS in the external stylesheet looks like this:

table.courselist {
width: 90%; border-collapse: collapse; margin-top: 10px;
}
table.courselist tr {
border: 1px solid #000000; valign: middle;
}
table.courselist caption {
caption-side: top; text-align: left; font-family: arial; font-size: 110%; font-weight: bold; color: #000000; padding-bottom: 3px;
}
table.courselist th {
border: 1px solid; border-color: #336699; text-align: left; background-color: #336699; color: #ffffff; font-size: 90%;
}
table.courselist td {
border: 1px solid; border-color: #336699; font-size: 80%; padding-left: 3px;
}
table.courselist td.break {
font-style: italic;
color: #777777;
}
table.courselist col.1 {
width: 13%;
}
table.courselist col.2 {
width: 15%;
}
table.courselist col.3 {
width: 60%;
}
table.courselist col.4 {
width: 12%;
}
table.courselist col.a {
width: 20%;
}
table.courselist col.b {
width: 80%;
}
and the HTML like this:
<table class="courselist">
<caption><p>blahblah</p></caption>
<colgroup span="4" />
<col class="1"></col>
<col class="2"></col>
<col class="3"></col>
<col class="4"></col>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
and so on

  IntoPCs 14:43 05 Oct 07

Sorry the col.a and col.b in the CSS confuse the issue - they are for another table.

  sheila.weston 17:49 05 Oct 07

This makes me realise how 'behind' I am in understanding css.

I have created a file in FP2003 called tablepca.htm, and pasted your html code into it. I have copied and pasted your css code into notepad and saved it as table-pca.css in the same folder as the tablepca.htm. [pca=pcadvisor]

I have gone back to tablepca.html and put a line beneath the 'meta' lines saying
<link rel="stylesheet" type="text/css" href="tablepca.css">.

Is this the correct day to do it?

Anyway, to my amazement it works!! This is real progress!

I would also have another stylesheet for the general text, so presumably I also put <link rel="stylesheet" type="text/css" href="stylesht.css"> . Yes?

Is the 'course list' part essential? Does it refer to the type of 'list'?

Have you any idea what is meant by: 'give the specific tables with the same formatting either an id or a class. You can only use the same id name once on a page, it can however be used on multiple pages.'

Also I still need to import all the text in the tables without retyping. Is this possible?

Very many thanks.

  IntoPCs 00:06 06 Oct 07

You have done it correctly, using a link to the external stylesheet and working it out for yourself should spur you on to learn more. There are loads of sites offering tutorials and samples of css - when you get time explore and have a 'play'.
courselist is just the 'name' or class I have applied to this table (because it displayed a list of courses!!) - you can call it anything you like as long as the html matches the css.
As far as another stylesheet goes, yes you can do that or you can put everything in one style sheet.
Each table I start with the tag <table class="courselist"> has the same formatting, but if I wanted a different number or distribution of columns could create a class called courselist2 (or anything else) and change the css accordingly.
Importing the tables is a pain; I took over the intranet site and had to clear all the formatting manually, you could copy and paste them and then clear the formatting. I ended up using the 'Find and Replace' feature on the edit menu of FP2003 - view the code, select the first piece of formatting you want to get rid of eg width="20%"> !--mstheme--> font face="verdana,arial,helvetica" put that in find and put nothing in the replace with box then click replace all. Not very sophisticated I'm afraid and you have to be careful not to mess up the tags, but the resulting pure code is worth it.

  sheila.weston 09:32 06 Oct 07

Many thanks, Into pcs. This is *just* what I want. I'll play around with things and see where I get to.

I am taking one of the Yahoo Groups free tutorials - WBT (Web Design Training), by Susan Emerson. I think that it is linked to click here . Also, see click here.

This morning I have 11 emails to study - all about Tables, parts 18 to 24!! But they don't necessarily tell me what I want to know, although they are obviously helping a lot.

I'll mark this thread as resolved. Thanks, again.

Sheila

This thread is now locked and can not be replied to.

What is Amazon Go and will it come to the UK? The store without checkouts or queues

1995-2015: How technology has changed the world in 20 years

Hands-on with the Star Wars fighting drones you can fly yourself

15 macOS Sierra tips | How to use macOS Sierra: Secret tricks and best new features in Apple's new…