What's the difference between HTML's and CSS's width attribute?

I checked the documents, but they don't make clear what will happen if both of them are set..

That's hidden away somewhere here:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

Now, as I've implied in my humorous comment, I don't know for certain why they would set a variety of values for the HTML width attribute on the img elements and have a single, different value for the CSS width property for all of them. Perhaps they're accounting for when the .thumbnail class is missing, or something else. As always, Alohci is in a better position to explain why the width and height attributes are specified anyway, even if they differ from the dimensions specified in CSS for whatever reason.

What I can tell you, however, is that this basically means the CSS does indeed take precedence anyway, even if both are set.

The widths given in the markup are semantic statements about how large the image is. For that reason, in HTML5 it is only valid to give the dimensions in pixels.

The widths given in the CSS are directives to the layout engine as to how much space to use when put the images on screen. They can be in any standard CSS units

See BoltClock's answer for how they interact when laying the page out.

Regarding the question in the title, it is easier to say what they have in common: just that they both affect the width of the image, and they have the same name. The HTML width attribute is governed by general rules on HTML attributes, it is limited syntax of values (only unsigned integers and percentages), it creates a width property to the element node, etc. In contrast, the CSS width property (not attribute) is governed by CSS syntax rules, it many different types of values permitted, it creates an entry in the relevant style sheet node in the DOM (but not directly a property of an element), etc. Moreover, an HTML attribute needs to be set separately for each element, whereas a style sheet can set a property on many elements at a time (even on all elements of a document).

Regarding to the question “are both of them necessary?”, it depends. Usually authors specify the width of an image either in HTML or in CSS, not both. It is, however, valid and sometimes useful to use both. In the given case, the actual dimensions of the images seem to match the HTML attributes, so the CSS settings cause them to be rescaled (without preserving the width:height ratio); this is bad practice, but what can you expect from w3schools? (The images should normally be scaled to the intended size and uploaded in that size, if they are to be shown in some fixed size.) – The explanation to the mess is most probably just sloppyness.

It can still be meaningful to use both HTML and CSS to set the width. For example, you could set the width in CSS in em units to make it scale to the font size but also specify the width in HTML (in pixels) as a fallback, just in case CSS isn’t enabled. (It makes more sense to do this for height than width, though.)

Informally speaking, CSS overwrites HTML in cases like this. But HTML isn’t really overwritten. The attributes are still there, they just don’t take effect – when CSS is enabled. All the relevant specifications and drafts agree on this. In HTML5 CR, clause 10.4.3, this is specified so that the width attributes are “presentational hints”, which means that they are “author-level zero-specificity presentational hints part of the CSS cascade”. So any CSS rule that sets the property will “win”, no matter how low the rule is in the cascading order.