Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I am new to HTML and Im working on a self made project and I have to use < table > and < fieldset > tags in my html files. I need to set the width and height properties to the tables like

<td width="100" height="200" > </td> <!-- something like that -->

But Im afraid of these reason because as the Monitor size changes with the computers some have large screens and some have small screens like notebook pc's. The table dimensions looks small for the big screen computers and big to the small screen computers.How do I manage them. How do I fit it to all types of screen sizes.

I mean when it goes to the right most part of the screen it jumps to the next line, if I use width property to the < td > tag?

and also using Padding like these is a bad idea ?

< span style="padding-left:100"> </span>

It looks exactly what i want on my browser. Does it look same on all types of monitor sizes? or does it vary? Is there any standard way to follow it?

I love your answers but answer these original question too, does it matter to the monitor sizes using width and height properties in < td > tag ?

share|improve this question
3  
I suggest you learning CSS. This is a great website for beginners. –  Jose Faeti Sep 6 '11 at 7:03
    
Further to other answers recommending using CSS for this, I would also recommend always adding units to your measurements. "100" is ambiguous. Do you mean 100px or 100%? Add the unit for clarity and to avoid any potential browser misinterpretations. –  Gavin Coates Sep 6 '11 at 8:12
1  
default unit is px, pixels.. if you care about different monitor sizes, never use px. use em or some other relative unit. –  oenone Sep 6 '11 at 12:13
    
Thanks for your valuable comment @oenone –  niko Sep 6 '11 at 12:23
add comment

3 Answers

up vote 2 down vote accepted

I suggest you to learn CSS. There are many resource available, this for example is a great site to start.

Please avoid w3schools, see w3fools to understand why.


You should always use CSS to style your elements, possibly an external file containing all your rules.

The width and height attributes are now considered obsolete. You can obtain the same effect with a CSS rule. If you want to target only a particular table cell you can assign it a class like <td class="small"> for example:

#yourtable td.small {
  width:100px;
  height:200px;
}

For the padding, you should specify a class like <span class="indented"> and then create a CSS rule like this:

span.indented {
  padding-left:100px;
}

Now all your padding with this class will have a padding left of 100px.


As for screen resolutions, if you want to make a fixed size layout, keep in mind that the lowest common horizontal resolution nowadays is 1024px, you want to remove some pixels because of scrollbars, lateral bars, etc. so a standard safe size is considered to be 960px.

The best way to target different types of screen resolutions (and devices) is by having a liquid layout, a layout which adapt automatically on various resolutions. You can obtain this by using percentage values for your elements instead of fixed units for example.

share|improve this answer
    
you should use % or em as unit if you want to be independant of screen resolutions. don't forget to adjust the font size or it will look strange on big ones. –  oenone Sep 6 '11 at 12:15
add comment

First of all, presentational attributes have been deprecated in HTML for quite a while now; you should use the style attribute instead, or better yet, proper CSS. The internet is full of resources about these, so I'm not going to elaborate.

Then; with web layouts, you have to make a fundamental choice before you get started: Fixed or fluid? A fixed layout uses hard-coded sizes for most things, usually specified in px or em. By contrast, fluid layout describes a layout strategy and relies on the user agent to apply it.

Fixed layout

Pros:

  • Easier to make
  • Similar to print media design
  • Easier to support legacy browsers
  • Full control over placement of objects on page

Cons:

  • Only works well on a resolution similar to the one it was designed for
  • Hard to automatically adjust to dynamic content
  • Doesn't scale well (e.g. for mobile devices)
  • Doesn't play nice with window resizing
  • May break when used in unexpected situations (e.g. user has different fonts installed, different screen dpi configuration, etc.)

Fluid layout

Pros:

  • Scales well
  • Resolution independent
  • Automatically adjusts to dynamic content

Cons:

  • Harder to get right
  • Limited support for legacy browsers
  • Some things won't work at all

Also, note that you can tackle the screen resolution / window size / mobile devices problem with @media queries: you make individual stylesheets for different window sizes, and have the user agent select the right ones for you.

share|improve this answer
    
+1 for the Pro's vs Con's of each. I like this better than the blanket snobbery of "Fluid is the ONLY way to go, noob!". –  Graham Sep 6 '11 at 13:44
add comment

A lot of sites are tailored for the lowest common denominator (well, perceived anyway). The lowest resolution that most present day monitors will go to is 1280x720. A lot of sites will be authored with a static with anywhere from 920 to 1000px wide as it doesn't look bad at higher resolutions (some will compensate with larger backgrounds to make it look a little prettier).

As for whether or not you should use width and height attributes directly in td tags, no, you shouldn't use them as the attributes are obsolete as of HTML5. Look at expressing layout using CSS.

Padding (such as padding-left) is not such a bad idea, but again, you'll want to look at putting that into an external style sheet and applying it to the specific element.

Really, I'd suggest taking a quick break from HTML learning and dip into CSS a bit and find out some of the recommended best practices there.

share|improve this answer
    
Could you give me some more interesting css tutorials which are easy to grasp and understand I mean the list of properties I found at w3schools but still I need more and more to learn –  niko Sep 6 '11 at 7:00
    
w3schools is generally frowned upon by the development community due to the number of errors in their documents (so I wouldn't use it). –  Demian Brecht Sep 6 '11 at 7:02
    
So what do i read any good tutorials please –  niko Sep 6 '11 at 7:03
    
Looks like css3.info is littered with CSS tutorials (I haven't actually looked at tutorials in quite some time). Another way to learn is to check out how other people do it. Use developer tools in Firefox (Firebug) or Chrome/Chromium. You'll see links to .css files. Open those and take a look at how they're defined and then how they're used in the site's HTML. (sorry, didn't mean to submit my last comment without this accompanying it :)) –  Demian Brecht Sep 6 '11 at 7:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.