HTML Elements – Block vs Inline Elements and Their Distinction

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.

The choice whether to include padding and border into the width or not was arbitrary. The only thing where it mattered was building multi-column layouts. However, you should pay into account the fact that people used tables for layouts at that time anyway. So to them that concern didn't seem important enough and they considered that being able to specify the exact width that the content itself would occupy in CSS seemed a lot more valuable.

For today's developers the situation seem totally different as they use CSS for layouts and they have to deal with CSS boxing model. Thankfully we've got an ability to override boxing rules so in most cases simple rule at the top of your stylesheet works fabulously:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

To quote Jeff Kaufman on the subject:

Given that the spec defined it the other way, though, the signal it would have sent to Microsoft to adopt their misinterpretation would have been bad for the web. Microsoft was already using an embrace, extend, and extinguish approach, where they intentionally made products that acted differently from competitors' in order to lock users into the Microsoft versions. They came very close to succeeding with the web: from approximately 2000 to 2005 IE was so popular that many sites designed just for it. Adopting IE's approach here then might have told Microsoft "you can do whatever you want with IE and we'll adjust the standards to make it legal".

So box model fell the victim of power-struggling between W3C and Microsoft.