HTML CSS – Using Width and Height Properties with Tag

csshtmlhtml5web-development

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 ?

Best Answer

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

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.

Related Topic