Is it a good idea to use width and height properties with the < td > tag?

Question

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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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.