How semantic X/HTML can save time when we will write CSS?

How Semantic X/HTML mark-up can save time -

when we will write CSS for website
and if any design changes comes from client in future.
And why Table based layouts will take more time always in both condition

Today I've to Explain these thing to students.

I've some example but I want some more good example and ideas to explain nicely.

I want to explain what are benefits Semantic X/HTML mark-up from developers point of view.

Thanks in advance

Update:

The benefits of using semantics mark-up:

It will be readable in good manner to people seeing the document in an environment where CSS cannot be applied.
It will be a lot easier for web developers to maintain the code, and to separate content (HTML) from presentation (CSS).
Semantic markup can reduce the needs of css group selectors in some cases.

Solution

From my work experience: I had for several times now to look at legacy markup from my predecessor or from completely other people (and actually one or two times from myself as well). Sometimes I had only what came from viewing the source in a browser. My findings so far were:

If the author used semantic markup as far as possible, together with clear and logic class names, it was really easy and fun to find out the structure of the page and, e.g., code a new widget or restructure the column layout or stuff
If the author used table based layout, and I also had stuff from the end of the 90s to look at, it is a complete mess. You have to figure out, which table row does what, which table cell belongs where and if you start to think you'd get a grip, you have overlooked an rowspan="3" 300lines of markup earlier. Even in Firebug you can become mad with such a tag soup.

Adding new stuff here can become quite adventurous. If you add content to a table cell, and don't completely fix the width and height of the new stuff, you might find yourself with unpleasing gaps all over the page, and forgetting to open or close <td>s somewhere (with 200 validation errors on the original page you are likely to miss something somewhere) may lead to a completely screwed view.
If the author used divs and spans all over the place, but didn't do semantic markup (that is, writing <div class="header1"/> instead of <h1/>), it is still ways better than table layout (at most because of the mentioned rowspan and colspan and because you hav a chance that the page might not fully blow up, if there is a </div> missing somewhere), but you still can go mad on markup like
```
</div></div>
</div>
   </div>
  </div>
</div></div>
  </div>
```
Additionally, if I had an accompanying stylesheet, it was mostly a complete mess, too. Differentiating between .header, .header1, div.header_level1 and #middle .h1 forces you to jump back and forth between stylesheet and markup.