Centering a table and changing %s

Question

ScoobMJ 0 Newbie Poster

14 Years Ago

Oh my am I having some difficulty. I have been looking online and through this forum for a while today. I am trying to make a website using a table. This is my first website and I do not want to use a template and this way looked to be the easiest at the moment until school starts and I learn all the ins and outs of html and css.

I am trying to center the table horizontally and have it minimize by percentage to make every proportionate. Scratching my head, every time I try to center the table, it is not centering or I change the information inside of the table rather than the complete table. I am not quite sure what I am doing wrong. Also on another post, I seen that I should be using % instead of px, how do I go about doing this? How do I know what percentages to use?

Thanks,
Nicole

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Fast Forward Home</title>
</head>
<body style="color: white; background-color: black; width: 960px;"
 alink="yellow" link="white" vlink="#33ff33">
<table align="center">
</table>
<margin-left></margin-left>
<table
 style="width: 965px; height: 425px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="7" cellspacing="5">
  <tbody>
    <tr>
      <td style="text-align: center; width: 256px;"
 colspan="4" rowspan="1"><img
 style="width: 948px; height: 200px;" alt=""
 src="http://aae1.webs.com/FastForward/FastForwardBanner.jpg"></td>
    </tr>
    <tr>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="border-style: solid; border-width: 1pt; background: rgb(204, 0, 0) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 256px;"
 align="center">Textbooks
for Less</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 200px; background-color: rgb(204, 0, 0);"
 align="center">
Paying
for College</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="border-style: solid; border-width: 1pt; background: rgb(204, 0, 0) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 214px;"
 align="center">Planning
for College<br>
Start Early</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 264px; background-color: rgb(204, 0, 0);"
 align="center">
Internships
and Getting Experience</td>
    </tr>
    <tr>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 256px; background-color: rgb(204, 0, 0);"
 align="center">
Moving
to College</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 200px; background-color: rgb(204, 0, 0);"
 align="center">
Scholarships</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 214px; background-color: rgb(204, 0, 0);"
 align="center">
College
Prep</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 264px; background-color: rgb(204, 0, 0);"
 align="center">
Jobs
and Careers</td>
    </tr>
    <tr>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 256px; background-color: rgb(204, 0, 0);"
 align="center">
Smart
Spending</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 200px; background-color: rgb(204, 0, 0);"
 align="center">
Saving
for College</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 214px; background-color: rgb(204, 0, 0);"
 align="center">
Going
to College</td>
      <td onmouseover="this.style.backgroundColor='#F7BF07';"
 onmouseout="this.style.backgroundColor='#CC0000';"
 style="width: 264px; background-color: rgb(204, 0, 0);"
 align="center">
Cover
Letters and Resumes</td>
    </tr>
    <tr>
      <td style="width: 256px;" colspan="4" rowspan="1"></td>
    </tr>
    <tr>
      <td style="width: 256px;" align="undefined"
 valign="undefined"></td>
      <td style="width: 200px;" align="undefined"
 valign="undefined"></td>
      <td style="width: 214px;" align="undefined"
 valign="undefined"></td>
      <td style="width: 264px;" align="undefined"
 valign="undefined"></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

web-design

5 Contributors
4 Replies
122 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by macgurl70

macgurl70 9 Junior Poster

14 Years Ago

Disclaimer: code in this post is most likely being sloppy and probably not exact, but this will at least give you a good idea of what is being communicated by the previous posts.

First off - the tables get very confusing to try and figure out - and I could only imagine trying to update them later. By using CSS you can cut down on the HTML considerably.

My sloppy CSS code (give it the name of list.css)

#container{
   margin:auto;
   font-family:Arial, Helvetica, sans-serif;
   color: #000000;
}

.menulist{
   width:150px;
}

.menulist ul{
   list-style:none;
   border: none;
   padding:0px;
}

.menulist li a{
   display:block;
   padding:5px;
   background-color: #CC0000;
}

.menulist li a:hover{
   background-color: #F7BF07;
}

#column1{
   float:left;
   width: 200px;
   padding:5px;
}

#column2{
   float:left;
   width: 200px;
   padding:5px;
}

#banner{
   position:absolute;
   top:0px;
   left:0px;
}

Keep the color specifications to the hex numbers, don't use the rgb numbers.

The html will be much simpler - and easier to update later

<html>
<head>
<link rel="stylesheet" type="text/css" href="list.css">
</head>
<div id="container">
<img id="banner" src="banner.gif">
   <div id="column1">
      <ul class="menulist">
         <li><a href="#">Textbooks for Less</a></li>
         <li><a href="#">Planning for College</a></li>
         <li><a href="#">College Prep</a></li>
         <li><a href="#">Saving for College</a></li>
         <li><a href="#">Smart Spending</a></li>
         <li><a href="#">Scholarships</a></li>
      </ul>
   </div>
   <div id="column2">
      <ul class="menulist">
         <li><a href="#">Paying for College</a></li>
         <li><a href="#">Jobs</a></li>
         <li><a href="#">Internships</a></li>
         <li><a href="#">Moving to College</a></li>
         <li><a href="#">Going to College</a></li>
         <li><a href="#">Cover Letters &amp Resumes</a></li>
      </ul>
   </div>
</div>
</html>

This is a rough idea to illustrate how much easier it is to create a menu using CSS than trying to perfect a table. The CSS code creates the background for each link and it also handles the rollover effect. This is the "a:hover" style.

Again this is on very little sleep and hoping I remember things right - you would do well to double check everything on http://www.w3schools.com.

Edited 14 Years Ago by macgurl70 because: n/a

almostbob commented: way polite, and accurate guide to simple css, if the op cant follow it there's no hope for em +4

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

way polite, and accurate guide to simple css, if the op cant follow it there's no hope for em

macneato 29 Posting Pro in Training · Answer 1 · 2010-08-11T14:27:51+00:00

Hi,

The reason it isn't centering is because you have defined a width in the body. Which is the canvas, so your browser assumes your table is already centered since your body is 960px.

Regarding percentage conversions. Lets assume your table was 1000px (in the perfect world) and you have 4 columns. 1st two being 300px each and the 3rd 150px and the last 250px. We would do the conversions as follows;
300*100/1000. Which would equal 30% and the rest would follow suite. Now realistically. Your table is 960 and your first column is 264. Which is 264x100/960=27.5%. Make sense?

A few errors regarding your code:

You haven't specified character encoding
"margin-left" is not a tag.
Also you have a pointless table just before your "margin-left" tag (lol cause you gangsta like that ;)).
ALWAYS give your images alt tags. Your code wont validate if you dont.
Breakrule tags are closed as follows <br />

Sure there a quite a few more. I would suggest getting yourself firefox, installing firebug as well as web developer tools so you can constantly check your code as you working through it.

Hope this was helpful. Don't usually write as much, but I'm impressed with your enthusiasm. All the best bud

almostbob 866 Retired: passive income ROCKS · Answer 2 · 2010-08-12T02:53:55+00:00

onmouseover javascript is unneccessary
onmouseout javascript is unneccessary
all the inline styles are unneccessary
all the code indenting is unneccesary
add size and download time to the page,

javascripts can be done better with 2 lines of css
preferably in external css file, so you only have to type it ONCE in the entire site

td { background:#CC0000; }
td:hover {background:#F7BF07;}

replaces ALL the mouseover/onmouseout code
css presentation
html content
javascript as little as possible, it takes a lot of code to do a little

inline styles likewise

tables: so its 1980 again?, tables are for tabular data, not layout, there are better ways, maintainence will be extremely tedious on a table site

fixed width, will not work on anybody's display except yours,
small screens / part screen windows, will push offscreen, users do not scroll, user leaves
large screens, a pissant tiny column in the middle of big empty, annoying, user leaves
you have a 948px image in a 214px table cell, that's gonna work reeeeeeaaaal well (NOT), user leaves

current best practice is fluid layouts in ems and %

teedoff 3 Posting Pro · Answer 3 · 2010-08-12T20:53:25+00:00

Another thing to consider. While tables are great for displaying dynamic data and other things. Table page layouts are somewhat outdated. Divs are very useful in page layout and are much easier to maintain and control, as almostbob suggested is the goal of any web designer. But even divs I understand might lose some weight in html with the advent of html5 and its new structure tags. Also as almostbob said, while embedded styles are fine and work just as well, from a maintainance stand point, as well as the tediousness of coding each and every page, an external style sheet is the best practice. I often style a page quickly to show clients, then when progressing further into multiple pages, I copy and paste the embedded styles into an external style sheet. Then link each page and when a changes is needed, one time changes every page. Hope that helps.