Avatar of isnoend2001
Flag for United States of America asked on

Replace a big table using css

This big table "http://roofgenius.com/roofmaterialchoices.htm was made about 10 yrs ago and want to replace it using css. how ?

Avatar of undefined
Last Comment

8/22/2022 - Mon
Ess Kay

Adrian Crabtree

Something like this would work. But like Chris said before, just keep it simple.

Adrian Crabtree

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

Thanks : esskayb2d not really looking to style a table. want to use just css and not use tables.
made about 150 pages 10 years ago using Frontpage and now most of the bad code is old and outdated. Down the road tables may be outdated (maybe not), but if i am going to redo 150 pages it looks as though css is here to stay.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

Tables for layout are a definite no-no! They have been outdated for some time. They're notoriously difficult to style, generate unnecessarily bloated code, and search engines / screen readers etc hate them!

i have styled some tables with css http://roofgenius.com/all-nails.asp
and they can be made to look a lot better, I'm 65 now and maybe not have another 10 years to redo everything. In fact I have noticed my mindset going from learning how to do it to getting it done and the less maintenance the better.
Chris Stanyon

What you've done on that page is actually OK for the most part - When i say tables are a no-no, I mean they shouldn't be used for layout. They should only be used for displaying tabular data, so the info about nail size and length is a perfect example of when you SHOULD be using tables!

Unfortunately, on the same page, your also have this:

<div align="left">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
          <td width="100%">
            <p align="center" class="BlueFont12Bold">             
              Determine   your price per square in 15 seconds with just a few clicks !                

Open in new window

You can achieve exactly the same with this:

<p>Determine your price per square in 15 seconds with just a few clicks!</p>

Open in new window

I know which I'd rather be maintaining ;)

If you code your pages using correct, semantic HTML markup, along with a well thought out external style sheet (plus a reset/normaliser), you can generally maintain an entire website (10 pages or 1000 pages) simply by editing 1 file - your stylesheet. That really is the easiest and quickest way to maintain a site.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.

I am curious .When you have a 150 pages using the <p> and not many places is it used
where the font is bold and blue it seems more reasonable to style it like i did eg;
BlueFont12Bold the class .Bbluefont12 {font-size:12px;font-weight:600; font-family:verdana, arial, helvetica, sans-serif; color: #000099;}
<p>Determine your price per square in 15 seconds with just a few clicks!</p>
Am i thinking wrong ?
Chris Stanyon

Sorry, not sure I understand your question!

The problem with using a classname such as bluefont12, is that later on you want to re-design your site, and your hilight needs to be in red and 18px. Do you then change the name of the class in all of your pages (search and replace), or do you simply change the style declaration to something like:

.bluefont12 { color:red; font-size :18px; }

The former is time consuming and the latter is just confusing.

A better option would be to use the built in HTML tags, such as <em> to add emphasis to small inline elements:

<p>This text is <em>emphasised</em></p>

or add a generic class to style an entire element:

<p class="hilight">This paragraph is hilighted</p>

You can then style however you like and your HTML stays semantic and your CSS still makes sense.

p.hilight { color: blue; font-size:12px; font-weight:600; }
p.hilight { color:red; font-size:18px; }
em { color: blue }
em { color: red; text-decoration:underline; }

the <p> tag is styled as p { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt }
and is used in 98% of the time
In the case  where I want to change it  i go <p>bluefont12
<p class="bluefont12 "> blue font bold
or <p class="BfontWhite12"> for white font bold
I still use frontpage for stuff like this.as it has all the classes in  a combo box. I highlight the font then select the style from the combobox. i am a pecker, not a typer. When i started building my site 10 years ago i started using .htm files, then found that .asp  is a better way
now i have 149 asp files and 24 htm files. i found that using asp include files is the way to go. All my menus are in include files I add a new page and just update the include file
that contains the menus with the new pages url and it gets added to all 149 pages.I still have 24 htm pages that have to hard coded.(hard coded is a vb term, don't know if it used in css). The htm pages are popular with the search engines and linked by other sites, so i cannot rename them
my plan for switching to css
Include file for the header
Include file for the 3 menus on the left side of every page
a template asp page  for layout of the 3 body columns
a template asp page  for layout of the 2 body columns
a template asp page  for layout of the 1 body column with no side menus
Include file for the footer
In coding css when i write something i check 2 things
1. look to see if it looks good.
2. If yes i check to make sure it validates
am i missing anything ?
Your help has saved me hundreds of hours of internet surfing.

Thanks everyone you gave me a path